自定义dialog

发表于 | 分类于
字数统计: 766 word | 阅读时长 ≈ 4 min
概述

大致实现如下的效果：

几个样式

blue_corner_shapes.xml ： 按钮的圆角样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#03a9f4" />
    <!-- 填充颜色  蓝色-->
    <stroke
        android:width="1dp"
        android:color="#03a9f4" />
    <!-- 边框宽度和颜色  边框蓝色-->
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
    <!-- 圆角边框   圆角小 -->
</shape>

popup_title_window.xml : 对话框的标题栏样式

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
 
    <!-- 圆角半径 -->
    <corners 
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"/>
    <!-- 背景颜色 -->
    <solid android:color="#03a9f4" />
 
</shape>

popup_window.xml : 弹框样式

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 圆角半径 -->
    <corners android:radius="20dp" />
    <!-- 背景颜色 -->
    <solid android:color="#eeeeee" />

</shape>

弹窗背景的透明样式 （在 style.xml 文件内添加）

1
2
3
4
5
6
<style name="Theme_Transparent" parent="Theme.AppCompat.Light.Dialog" tools:ignore="ResourceCycle">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
</style>
看一下目录s

布局

activity_main.xml ：

很简单 ，就一个按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textAllCaps="false"
        android:background="@drawable/blue_corner_shapes"
        android:textColor="#ffffff"
        android:text="弹出自定义dialog"/>

</RelativeLayout>

dialog_layout.xml

弹窗的布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/popup_window"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:background="@drawable/popup_title_window">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:paddingLeft="20dp"
            android:text="请选择操作"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="vertical"
        android:paddingLeft="10dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:gravity="center_vertical"
            android:text="这里啥也没有1" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:gravity="center_vertical"
            android:text="这里啥也没有2" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:orientation="horizontal"
        android:padding="5dp">

        <Button
            android:id="@+id/confirm"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/blue_corner_shapes"
            android:text="确定" />

        <Button
            android:id="@+id/cancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/blue_corner_shapes"
            android:text="取消" />

    </LinearLayout>
</LinearLayout>
逻辑

MainActivity.java 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        btn.setOnClickListener {
            val builder = AlertDialog.Builder(this, R.style.Theme_Transparent)
            val dialog = builder.create()
            // view 布局
            val view = View.inflate(this, R.layout.dialog_layout, null)
            // 将自定义布局加载到dialog中
            dialog.setView(view)
            dialog.show()

            // 点击事件
            val btn_confirm = view.findViewById<Button>(R.id.confirm)
            val btn_cancel = view.findViewById<Button>(R.id.cancel)

            btn_confirm.setOnClickListener {
                Log.d("data", "点击了确认")
                Toast.makeText(this, "点击了确认按钮", Toast.LENGTH_SHORT).show()
            }

            btn_cancel.setOnClickListener {
                Log.d("data", "点击了取消")
                Toast.makeText(this, "点击了取消按钮", Toast.LENGTH_SHORT).show()
            }
        }
    }
}
0%