Android平台上的UI在5.0以前,那真的只能叫做实现功能了!谷歌爸爸总是那么的“好”,于是有了各种各样的support兼容包。MD设计确实不错,但是试问现在有几个UI设计师是知道这个设计的,又有多少设计师设计UI原型图是按照谷歌爸爸的风格?一般悲剧的设计师都是iphone,所以UI各种朝向IOS,那真叫一个蛋疼!但是话说回来一个APP软件,从理论上来讲确实应该是一样的风格界面啊!于是我们为了兼容android的各个版本,我们最好的效果就是自定义View了。MD有其兼容性的限制!
我打算打造一个仿造IOS效果的Dialog,不说了先上图:
new IOSDialog(this).radius(10)
.leftText("取消")
.rightText("确认")
.layout()
.show();
没错,就是这样简单粗暴,只需一行代码实现高仿IOS Dialog效果!这个IOSDialog需要实现高度的可定制化:具备以下特色:
1.Dialog的圆角边框弧度可以自定义。
2.Dialog的背景颜色可以自定义。
3.分割线的颜色可以自定义。
4.下面左右两侧的字体颜色,大小,内容可以自定义。
5.标题、内容的字体大小颜色可以自定义。
6.可以去掉内容,只保留标题栏。
7.只用纯java代码实现,拒绝xml布局,方便移植。
首先第一步我们既然是用到Dialog这个名词,当然是少不了,Dialog喽。我采用类似装饰器模式设计IOSDialog类,让其持有一个Dialog对象,然后暴露其方法供外面使用!接着我们需要考虑如何实现这样的布局,如果抽象能力不好的话,不妨先用XML方式写一个出来,然后再封装成java代码!所有的XML形式布局最后都会转化为Java代码,所以XML能实现的90%可以用java代码实现,而且更加的高效!那么我们采用什么布局来实现了?这里我主要采用的是LinearLayout,可能有人会认为使用Relativelayout更好控制,但是我不用,原因可以查阅下这篇文章Android性能优化之布局优化
public class IOSDialog {
private Dialog mDialog = null;
private GradientDrawable mBackground = new GradientDrawable();
}
最初的IOSDialog类应该是这样的包含一个Dialog对象,以及一个GradientDrawable对象(它对应的XML是shape资源文件),主要是用它来形成圆角矩形背景。接下来我们先着手布局,如下:
//加载基本布局
public IOSDialog layout() {
mBackground.setColor(mBackgroundColor);
mBackground.setCornerRadius(mRadius);
mLayout = new LinearLayout(mContext);
mLayout.setOrientation(LinearLayout.VERTICAL);
mLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT));//300dp
mTitle = new TextView(mContext);
mTitle.setText(mTiltleText);
mTitle.setTextColor(mTextColor);
mTitle.setTextSize(18);
mTitle.setGravity(Gravity.CENTER);
if(mHasContent) {
mTitle.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, (int) (mDisplayMetrics.density * 50)));
}else{
mTitle.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, (int) (mDisplayMetrics.density * 70)));
}
mLayout.addView(mTitle);//添加标题
if(mHasContent) {
mContent = new TextView(mContext);
mContent.setText(mContentText);
mContent.setTextColor(mTextColor);
mContent.setTextSize(14);
mContent.setGravity(Gravity.CENTER_HORIZONTAL);
mContent.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, (int) (mDisplayMetrics.density * 50))); //50dp
mLayout.addView(mContent);//添加内容
}
TextView hozLine = new TextView(mContext);
LinearLayout.LayoutParams lineParam = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 1);
hozLine.setLayoutParams(lineParam);
hozLine.setBackgroundColor(mLineColor);
mLayout.addView(hozLine); //添加横线
//底部部分
LinearLayout buttom = new LinearLayout(mContext);
LinearLayout.LayoutParams layoutParam = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,(int) (mDisplayMetrics.density * 50)); //50dp
layoutParam.gravity = Gravity.BOTTOM;
buttom.setLayoutParams(layoutParam);
buttom.setOrientation(LinearLayout.HORIZONTAL);
mLeft = new TextView(mContext);
mLeft.getPaint().setFakeBoldText(true);
mLeft.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT,1));
mLeft.setText(mLeftText);
mLeft.setTextColor(mCancleColor);
mLeft.setTextSize(14);
mLeft.setGravity(Gravity.CENTER);
mLeft.setTag(NO);
mLeft.setOnClickListener(this);
TextView verLine = new TextView(mContext);
verLine.setLayoutParams(new LinearLayout.LayoutParams(1,ViewGroup.LayoutParams.MATCH_PARENT));
verLine.setBackgroundColor(mLineColor);
mRight = new TextView(mContext);
mRight.getPaint().setFakeBoldText(true);//加粗
mRight.setText(mRightText);
mRight.setTextColor(mCancleColor);
mRight.setTextSize(14);
mRight.setGravity(Gravity.CENTER);
mRight.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT,1));
mRight.setTag(YES);
mRight.setOnClickListener(this);
buttom.addView(mLeft);
buttom.addView(verLine);
buttom.addView(mRight);
mLayout.addView(buttom);
config();
return this;
}
可以看见在布局的最后我们调用了config()方法,config方法的全文如下:
private void config() {
if (Build.VERSION.SDK_INT >= 16) {
mLayout.setBackground(mBackground);
} else {
mLayout.setBackgroundDrawable(mBackground);
}
//去除蓝色顶部横线
int dividerID=mContext.getResources().getIdentifier("android:id/titleDivider", null, null);
View divider=mDialog.findViewById(dividerID);
divider.setBackgroundColor(Color.TRANSPARENT);
//去背景框颜色
//mDialog.getWindow().setBackgroundDrawable(new BitmapDrawable());
mDialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
//设置Dialog的窗体大小
Window wm=mDialog.getWindow();
WindowManager.LayoutParams lp=wm.getAttributes();
lp.width=(int)(mDisplayMetrics.widthPixels*0.75f); //设置窗体的宽度
wm.setAttributes(lp);
mDialog.setContentView(mLayout);
}
config方法是IOSDialog类的私有方法,其主要是实例化IOSDialog类中的Dialog对象以及设置前面java代码所写的布局的背景,也就是说前面所说的所有的特点读必须在这个layout()方法之前代用才能生效!
layout()方法中所用的所有的字体颜色,分割线,等等属性全部用IOSDialog私有变量控制,然后通过,set方法暴露出去,但是这些方法需要在layout方法之前调用!比如设置圆角的大小:
public IOSDialog radius(int radius) {
if (radius < 0)
mRadius=(int)(radius*mDisplayMetrics.density);
return this;
}
设置全程返回的this对象,是为了能一行代码链接下去。当然我们不能忘了,我们是需要为下面的左右两边的取消或者确定设置接口回调监听的,如下,定义接口:
public interface IOSDialogListener{
public void YES(Dialog dialog);
public void NO(Dialog dialog);
}
暴露设置接口的方法:
public IOSDialog setIOSDialogListener(IOSDialogListener listener){
if(listener!=null) {
mListener = listener;
}
return this;
}
调用的接口的时候:
@Override
public void onClick(View v) {
int result=(int)v.getTag();
if(result==YES) {
if(mListener!=null){
mListener.YES(mDialog);
mDialog.dismiss();
}
}else if(result==NO){
if(mListener!=null){
mListener.NO(mDialog);
mDialog.dismiss();
}
}
}
打造这样一个IOSDialog并不难,主要是去掉Dialog原生的在Theme.LIGHT主题下顶部蓝色的线,以及装饰器模式的设计,还有就是shape资源文件的代码形式!以及View的setTag方法的调用!这里没有展示完全IOSdialog,全部代码如下文件中:
改进版主要是在项目中发现了问题之前的版本无法解决:
1.文字没办法自适应。
2.当内容过多时无法滑动进行适配。
改进版IOSDialog
当然读者如果有更好的建议欢迎下方留言,大家共同进步!