Custom Dialog prompt box high imitation QQ browser version update prompt box

Foreword:

Today is May 7th. I haven’t written a blog for a long time. Time flies. I always feel like I’m busy. Thinking about it for a while is really busy, but in the midst of the busyness, there is a lack of summary. I believe everyone I know the importance of summarizing and summarizing. Today I want to share with you my custom Dialog prompt box, which imitates the QQ browser version update prompt box. Looking at its source code, we can see that Dialog is the base class of dialog boxes . Dialog is very common in development. Yes, the styles provided by the Android system sometimes cannot meet our needs, so we need to customize them at this time.

1. Customize the dialog box style:

in styles.xml

<!-- 定义对话框样式 -->
<style name="Dialog" parent="android:style/Theme.Dialog">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">true</item>
</style>

The explanation is: WindowBackground is transparent, because a custom layout is used, so the background color of the system must be set to transparent; WindowNoTitle is true, set to no title, because the layout is completely customized by itself, WindowIsFloating is true, floating on top of other interfaces. Well, this simply sets the style of the custom dialog.

2. Customize the dialog layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
    <ImageView
android:layout_width="match_parent"
android:layout_height="150dp"
android:src="@mipmap/custom"
android:layout_gravity=                                              
                                "center"
android:scaleType="fitXY"/>
    <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:text="新版发布"
android:textSize="20sp"
android:textColor="#000"
android:gravity="center"
android:layout_gravity="center"/>
    <TextView
android:id=        
                                                                                "@+id/tv_tips"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:layout_gravity="center"
        android:gravity="center"
        android:textSize="16sp"
        android:singleLine="false"
        android:layout_centerInParent="true"
        android:text="尊敬的用户，感谢您对QQ浏览器的支持，特邀您优先体验7.5.0版本beta版限量公测包，快来体验吧！"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp"
        android:background="#ccc"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <TextView
            android:id="@+id/tv_cancel"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:paddingTop="11dp"
            android:paddingBottom="11dp"
            android:gravity="center"
            android:text="以后再说"
            android:textSize="18sp"
            android:textColor="#000"
            android:background="@drawable/shape_bg"/>
        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:background="#ccc"/>

        <TextView
            android:id="@+id/tv_update"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:gravity="center"
            android:paddingTop="11dp"
            android:paddingBottom="11dp"
            android:textSize="18dp"
            android:text="立即更新"
android:textColor="#1586f2"
android:background="@drawable/shape_bg"/>
    </LinearLayout>
</LinearLayout>                        

The renderings imitate the updated layout of the QQ browser version.

3. Create a Dialog and associate custom styles and layouts:

final Dialog customDialog = new Dialog(this, R.style.Dialog);
View dialogView = LayoutInflater.from(this).inflate(R.layout.dialog_custom, null);
TextView btn_update = (TextView) dialogView.findViewById(R.id.tv_update);
TextView btn_cancel = (TextView) dialogView.findViewById(R.id.tv_cancel);
//将自定义布局加载到dialog上
customDialog.setContentView(dialogView);

btn_cancel.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        customDialog.cancel();
    }
});
btn_update.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "点击了确定", Toast.LENGTH_SHORT).show();
    }
});

//设置点击dialog外是否可以取消
customDialog.setCancelable(false);
customDialog.show();

到这里就完成了自定义Dialog了，最后还不完美，还可以设置Dialog的显示大小和位置，如所示代码：

//获得dialog的window窗口
Window window = customDialog.getWindow();
//设置dialog在屏幕中间
window.setGravity(Gravity.CENTER);
//获得window窗口的属性
WindowManager.LayoutParams lp = window.getAttributes();
//设置窗口高度为包裹内容
lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
//宽度设置为屏幕的0.7
Display defaultDisplay = getWindowManager().getDefaultDisplay();//
lp.width = (int) (defaultDisplay.getWidth() * 0.7 ) ;
 // Set the set attributes back window.setAttributes
 (lp) ;

Here I display the Dialog in the center (Gravity.CENTER), of course, it can also be displayed in other positions such as the bottom; then the width and height are displayed. Of course, the window size of the screen must be obtained before setting its width and height.

The custom Dialog dialog box is almost like this. Finally, let's take a look at the renderings!

Finally, add the demo address of this case: https://gitee.com/zsml/CustomDialog

For more exciting content, please follow me: luoweichao.top

Respect the original, please indicate: From zsml2016 ( http://blog.csdn.net/qq_29269233 ) Power byzsml2016 infringement must be investigated!