android 自定义Dialog-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangyf1987hb/article/details/84388532

看上面的图，其实这个页面的UI实现不复杂，来讲讲这个半透明的弹出对话框窗口是如何实现的，首先新建名为AuthorizeActivity.java的Activity，并且在AndroidManifest.xml文件中添加这个Activity，这样这个Activity才能被使用，接下来为这个Activity新建名为authorize.xml的Layout,这个Layout很简单只负责logo小图标显示，背景部分和透明窗口都是有代码来实现。

完成Layout建立后在AuthorizeActivity的onCreate方法添加如下代码，设置authorize.xml为AuthorizeActivity的页面Layout:

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.authorize);
.......
}
接下来是本文的重点部分，半透明弹窗用Dialog控件进行实现，首先为这个半透明弹窗新建一个名为dialog.xml的Layout,这个Layout主要是对4个元素进行布局，如图所示分别为i小图标、信息提示、中间文字、开始按钮，首先用LinearLayout对i小图标和信息提示进行水平布局，中间文字以一个TextView跟在下面，对于开始按钮是用RelativeLayout进行底部对齐显示。具体代码如下：
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content"
6. android:orientation="vertical"
7. android:padding="10dip">
8. <LinearLayout
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:orientation="horizontal">
12. <ImageView
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:src="@drawable/info_icon">
16. </ImageView>
17. <TextView
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"
20. android:text="信息提示"
21. android:textSize="13px"
22. android:textColor="#219ac6"
23. android:layout_marginLeft="5dip">
24. </TextView>
25. </LinearLayout>
26. <TextView
27. android:id="@+id/text_info"
28. android:layout_marginTop="6px"
29. android:layout_width="200px"
30. android:layout_height="wrap_content"
31. android:textColor="#686767"
32. android:textSize="14px"
33. android:text="第一次使用需要输入您的新浪微博账号和密码进行登录授权">
34. </TextView>
35. <RelativeLayout
36. android:layout_width="fill_parent"
37. android:layout_height="40px">
38. <LinearLayout
39. android:layout_width="wrap_content"
40. android:layout_height="wrap_content"
41. android:orientation="horizontal"
42. android:layout_centerHorizontal="true"
43. android:layout_alignParentBottom="true">
44. <ImageButton
45. android:id="@+id/btn_start"
46. android:layout_width="80px"
47. android:layout_height="31px"
48. android:src="@drawable/btn_start_selector">
49. </ImageButton>
50. <ImageButton
51. android:id="@+id/btn_cancel"
52. android:layout_width="80px"
53. android:layout_height="31px"
54. android:layout_marginLeft="8px"
55. android:src="@drawable/btn_cancel_selector">
56. </ImageButton>
57. </LinearLayout>
58. </RelativeLayout>
60. </LinearLayout>
完成了半透明弹窗的Layout定义接下来我们要做的就是为它写一个自定义样式来实现我们想要的显示效果，首先我们需准备一个圆角的半透明png图片名为dia_bg.png并且添加到drawable中，接下来再res/values文件夹新建名为 dialogStyle.xml的resources样式文件，具体代码如下：
1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
3. <mce:style name="dialog" parent="@android:style/Theme.Dialog"></mce:style><style name="dialog" parent="@android:style/Theme.Dialog" mce_bogus="1"><item name="android:windowFrame">@null</item>
11. <item name="android:windowIsFloating">true</item>
12. <item name="android:windowIsTranslucent">false</item>
13. <item name="android:windowNoTitle">true</item>
14. <item name="android:windowBackground">@drawable/dia_bg</item>
15. <item name="android:backgroundDimEnabled">false</item></style>
16. </resources>
这个样式文件的说明如下

　　parent="@android:style/Theme.Dialog" ：在系统Dialog样式基础上，相当于继承系统样式

　　<item name="android:windowFrame">@null</item> ：Dialog的windowFrame框为无

　　<item name="android:windowIsFloating">true</item>：是否浮现在activity之上

　　<item name="android:windowIsTranslucent">false</item>:是否半透明

　　<item name="android:windowNoTitle">true</item>:是否显示title

　　<item name="android:windowBackground">@drawable/dia_bg</item>:设置dialog的背景

　　<item name="android:backgroundDimEnabled">false</item>: 背景是否模糊显示

　　接下来写java代码把这个半透明弹窗显示出来，在AuthorizeActivity的onCreate方法添加如下代码：
1. ......
2. View diaView=View.inflate(this, R.layout.dialog, null);
3. dialog=new Dialog(AuthorizeActivity.this,R.style.dialog);
4. dialog.setContentView(diaView);
5. dialog.show();
6. ......