在Android开发中我们常常需要使用Dialog来处理一些弹窗操作。虽然Android系统本身为我们封装了一个自带的弹窗Dialog，但是由于Android操作系统的不同，导致了每个手机弹窗页面的不同，以至于我们很难用系统的去统一样式。并且UI会觉得系统的弹窗过于丑陋，希望自己来做一个于是我们便需要自己来处理一个Dialog弹窗。今天叫大家利用Builder构造者模式自己来封装一个弹窗Dialog。
需求分析
首先确定一下，弹窗我们需要哪些功能？
- 需要可以自己自定义样式。因为每个弹窗会根据逻辑和需求的不同拥有不同的样式。例如有些弹窗有title标题，有些只有message提示；有些有确定和取消按钮，有些又只有一个确定按钮。我们必须用一套代码来加载不同的样式才行。
- 设置title或者message的内容。这里可以根据传入的不同id设置不同文字内容。
- 设置按钮的点击事件
- 设置是否需要点击弹窗外部使得弹窗消失。
开始操作
分析完了需求之后我们便可以根据需求来撸代码了。
首先我们写一个CommonDialog类让他继承Dialog。 此时我们必须复写onCreat(),在onCreat()我么进行一些设置操作。这里我们设置setContentView()加载布局样式，设置setCancelable()是否点击弹窗以外使得弹窗消失。
public class CommonDialog extends Dialog {
private Context context;
private View view;
private boolean cancelTouchout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(view);
setCancelable(cancelTouchout);
}
}
其实这时候我们就开始要编写Builder构造者模式的代码了。
构造者模式，顾名思义，就是根据我们的需要往代码上添加需求。例如，我们需要设置title标题的内容，此时我们就添加上这个功能，如果需要设置message内容的功能我们也设置上这个功能。如果不需要则不添加这段代码。
先根据不同样式加载不同的布局。此时我们利用LayoutInflater来处理。布局样式由参数传递进来。
public Builder view(int resView) {
view = LayoutInflater.from(context).inflate(resView, null);
return this;
}
其次，再根据是否可以点击弹窗外部使得弹窗消失。
public Builder cancelTouchout(boolean val) {
cancelTouchout = val;
return this;
}
传入的val若为true代表可以消失，如果传入的为false则代表不能消失。
紧接着我们再来看看如果根据title和message来设置不同的内容。 这里我们的参数设置为两个，一个是需要设置内容的id，一个是设置内容的文字title/message。我们先通过findViewById去查找到这个View中的控件，之后再根据文字内容将文字设置到控件上去。
//设置标题title
public Builder setTitle(int viewRes,String title){
TextView txtTitle = (TextView) view.findViewById(viewRes);
txtTitle.setText(title);
return this;
}
//设置内容message
public Builder setMessage(int viewRes,String message){
TextView txtMessage = (TextView)view.findViewById(viewRes);
txtMessage.setText(message);
return this;
}
然后我们就该去设置点击事件了。 点击事件我们可以借鉴设置title和message的情况来处理，通过传入一个点击控件的id来查找id，之后通过View.OnClickListener来回调这个点击事件处理点击逻辑即可。
public Builder addViewOnclick(int viewRes,View.OnClickListener listener){
view.findViewById(viewRes).setOnClickListener(listener);
return this;
}
最后我们只需要把最后写一个build返回一个CommonDialog即可。但是如果此时我们调用使用这个CommonDialog时你会发现我们不管如何设置加载的View，发现大小其实都是不变的。这是怎么回事？其实这是因为我们的背景色一起被设置进入了View布局中。如果此时我们把我们加载的View背景设置为黑色(#000000)，就会神奇的发现，在View旁边还有一些白色的存在。正是因为这些白色，导致了我们无论如何设置弹窗宽度都显示的是原来的大小。如果你要设置为圆角，那更是不太可能。
那该如何处理这种情况？其实很简单，我们仅仅需要设置一下将弹窗风格的style设置一个透明的背景即可处理好这种情况。
我们在value-style中设置一个style风格样式，将背景设置为透明即可。
<!--Dialog将白色背景变透明-->
<style name="Dialog" parent="android:style/Theme.Dialog">
<item name="android:background">@android:color/transparent</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
</style>
此时我们再在CommonDialog中设置一个style样式，根据传入的样式来处理风格。
<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> public Builder style(int resStyle) {
this.resStyle = resStyle;
return this;
}
</pre>
最后我们再写两个CommonDialog的构造方法，根据是否有传入style来调用不同父类。完成操作。
private CommonDialog(Builder builder) {
super(builder.context);
context = builder.context;
cancelTouchout = builder.cancelTouchout;
view = builder.view;
}
private CommonDialog(Builder builder, int resStyle) {
super(builder.context, resStyle);
context = builder.context;
cancelTouchout = builder.cancelTouchout;
view = builder.view;
}
到此我们的整个代码就全部操作完毕。
使用
使用起来也非常简单，我们只需要创建一个CommonDialog.Builder根据不同的业务需求来添加不同操作即可。
CommonDialog build;
//dialog弹窗
private void dialog(){
build = new CommonDialog.Builder(this)
.view(R.layout.dialog)//设置弹窗的样式layout
.style(R.style.Dialog) //设置主题，这里可以将背景设为透明，这样只显示你需要显示的dialog部分
.cancelTouchout(true) //设置点击dialog之外是否弹窗消失，true为消失，false为不消失
.setTitle(R.id.txt_title, "这是一个弹窗标题")//根据id来设置标题的显示文字
.setMessage(R.id.txt_message, "这是一个弹窗消息内容")//根据id来设置消息内容的显示文字
.addViewOnclick(R.id.txt_sure, new View.OnClickListener() {//处理确认点击事件
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "点击了确定按钮", Toast.LENGTH_SHORT).show();
build.dismiss();
}
})
.addViewOnclick(R.id.txt_cancel, new View.OnClickListener() {//处理取消的点击事件
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "点击了取消按钮", Toast.LENGTH_SHORT).show();
build.dismiss();
}
}).build();
build.show();
}
代码已经上传至github，有需要的可以加Android架构师群；701740775找链接。
另外还有Android高级开发资料、职业生涯规划，面试，高级UI、性能优化、架构师课程、NDK、混合式开发
（ReactNative+Weex）等相关资料免费提供。加群请备注简书
网友评论