Android 自定义View之仿IOS Dialog

最新推荐文章于 2023-06-12 22:30:00 发布
最新推荐文章于 2023-06-12 22:30:00 发布
阅读量1.8k 收藏
点赞数
分类专栏： 安卓基础 文章标签： 自定义View Dialog
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_android_c/article/details/68574647
版权

    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，全部代码如下文件中：

IOSDialog

改进版主要是在项目中发现了问题之前的版本无法解决：

1.文字没办法自适应。

2.当内容过多时无法滑动进行适配。

改进版IOSDialog
当然读者如果有更好的建议欢迎下方留言，大家共同进步！

玄影
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android仿IOS自定义AlertDialog提示框
08-31
本篇文章主要介绍了Android仿IOS自定义AlertDialog对话框，主要介绍了圆角AlertDialog对话框，具有一定的参考价值，有兴趣的可以了解一下。
android 仿IOSDialog
07-14
android 仿IOSDialog效果，效果很不错
仿IOS底部Dialog
03-02
实现底部的对话框 自定义两种风格的样式 一种类似popuwindow的浮层窗体 一种是自定义的两种选择的对话框dialog 可以自定义样式 ，
Android仿ios弹出框AndroidshowDialog库
02-27
自定义弹出框Library: 统一弹出框样式，以及取消按钮的空隙
自定义Dialog仿ios弹出底部菜单
10-08
实现自定义Dialog仿ios弹出底部菜单，选择相册或者相机进行操作
Android 自定义View 之 Dialog弹窗
热门推荐
晨曦
06-12 1万+
  在日常开发中用到弹窗是比较多的，常用于提示作用，比如错误操作提示，余额不足提示，退出登录提示等，还有用于数据展示的弹窗，上拉弹窗等等，主要为了简化在日常开发中的使用。  Android中的Dialog弹窗是一种用于展示特定信息或者在用户需要进行某些操作时才显示的窗口。Dialog弹窗可以分为系统提供的常规Dialog弹窗和自定义Dialog弹窗。  常规Dialog弹窗包括AlertDialog、ProgressDialog、DatePickerDialog、TimePickerDialog等，这些Di
Android--自定义Dialog,仿IOS对话框样式
css33的专栏
06-25 1639
效果：实现：1.dialog_layout.xml:&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" and...
【仿IOS】Android自定义一个简洁、美观、通用的Dialog
weixin_34191734的博客
08-12 651
目 录（本篇字数：1437） 介绍 实现步骤 介绍 今天我们来学习一下如何自定义一个漂亮、美观且通用的对话框。开始前，我们先了解一下对话框（Dialog），它是Android UI交互的一种形式，通常给予用户一个重要事件的通知，让用户来处理这一个事件。它不同于其他几种通知方式，比如Toast、Notification、Snackbar等...
Android开篇之高仿ios风格的自定义Dialog
gf的博客
12-21 349
一 概述       经常做项目的时候，你会发现。AlertDialog这个控件，我们也经常用到，比如说当你提交一些数据的时候啊，确定是否退出程序的时候啊等等场景，于是我们很自然的想到用到这个控件。当我们开发完成的时候，给测试测的时候。测试来一句“这什么鬼东西，这么丑。能不能做成和ios一样的效果”，宝宝心里苦啊，怪我咯.哎没办法，谁让google自带的效果都是很丑呢（现在最新系统自带的dial
android仿苹果dialog库,万能的dialog库（包括类似popwindow效果）
weixin_32064437的博客
05-31 912
博主最近发现了一个万能的dialog库一、目前这个库具有的主要功能如下：material风格(v7支持包中的)，ios风格，自动获取顶层activity,可在任意界面弹出,可在任意线程弹出。(也就是说安卓也可以实现ios风格的dialog,666,是不是吊炸天呢？博主再也不会被ios哥们嘲笑了。博主也可以轻松实现它们系统dialog的效果)二、先看一下1.1.5版本的特性：★ loading对话...
仿IOS圆角对话框 Android-CircleDialog.zip
09-20
仿IOS圆角对话框 Android-CircleDialog.zip,仿IOS圆角对话框、进度条、列表框、输入框，支持横竖屏切换
安卓IOS风格相关-仿Ios弹窗效果第一种是自定义仿IOS的ActionSheet底部Dialog的样式有模糊效果第二种是自定义仿IOS的AlertDialog的样式.rar
07-29
仿Ios弹窗效果，第一种是自定义仿IOS的ActionSheet底部Dialog的样式 ，有模糊效果，第二种是自定义仿IOS的AlertDialog的样式.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
Android自定义view仿iOS弹出框效果
01-20
本文实例为大家分享了Android自定义view仿iOS弹出框的具体代码，供大家参考，具体内容如下 运行效果图 自定义对话框的使用，仿照ios。从底部弹出，类似pop窗口。包括消息、图片、列表及对话框。 好了,用法都会,直接贴上代码 1.layout布局文件 view_actionsheet.xml <?xml version=1.0 encoding=utf-8?> <LinearLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_width=match_paren
自定义dialog仿ios风格的dialog
12-21
资源是关于仿ios风格的弹出dialog,还可以根据需求自己改。在此免费分享飞大家
Android自定义控件之仿优酷菜单
09-02
主要为大家详细介绍了Android自定义控件之仿优酷菜单的相关资料，感兴趣的小伙伴们可以参考一下
Android仿IosDialog控件
06-23
Android仿IosDialog控件
Dialog对话框之android 自定义对话框代码
05-08
Dialog对话框之android 自定义对话框代码 设置对话框显示一个单选的List 用来设置对话框显示一系列的复选框 设置进度条风格，风格为圆形，旋转的
node-v16.12.0-darwin-x64.tar.xz
最新发布
04-23
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
试用Dev Containers的示例项目-Go
04-23
计算机技术是指评价计算机系统的各种知识和技能的总称。它涵盖了计算机硬件、软件、网络和信息安全等方面。计算机技术的发展使我们能够进行高效的数据处理、信息存储和传输。现代计算机技术包括操作系统、数据库管理、编程语言、算法设计等。同时，人工智能、云计算和大数据等新兴技术也在不断推动计算机技术的进步。计算机技术的应用广泛，涵盖了各个领域，如商业、医疗、教育和娱乐等。随着计算机技术的不断革新，我们可以更加高效地实现预期自动化、标准化
android仿ios自定义弹框,Android仿IOS自定义AlertDialog提示框
05-28
好的，我可以为您介绍一下Android仿IOS自定义AlertDialog提示框的实现方法。 首先，我们需要在Android项目中创建一个自定义布局文件，用于显示弹框的内容。可以使用LinearLayout或RelativeLayout等布局容器来组织弹框的内容，例如： ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="标题" android:textSize="18sp" /> <TextView android:id="@+id/message" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="内容" android:textSize="14sp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center"> <Button android:id="@+id/confirm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="确定" /> <Button android:id="@+id/cancel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="取消" /> </LinearLayout> </LinearLayout> ``` 接下来，我们需要创建一个自定义AlertDialog类，用于显示弹框和处理按钮点击事件。在这个类中，我们需要实现onCreateDialog方法来加载自定义布局文件，并设置弹框的标题、内容和按钮监听器等。例如： ```java public class IOSAlertDialog extends DialogFragment { private String title; private String message; private DialogInterface.OnClickListener confirmListener; private DialogInterface.OnClickListener cancelListener; public IOSAlertDialog(String title, String message, DialogInterface.OnClickListener confirmListener, DialogInterface.OnClickListener cancelListener) { this.title = title; this.message = message; this.confirmListener = confirmListener; this.cancelListener = cancelListener; } @Override public Dialog onCreateDialog(Bundle savedInstanceState) { LayoutInflater inflater = LayoutInflater.from(getActivity()); View view = inflater.inflate(R.layout.dialog_ios_alert, null); TextView titleView = view.findViewById(R.id.title); TextView messageView = view.findViewById(R.id.message); Button confirmButton = view.findViewById(R.id.confirm); Button cancelButton = view.findViewById(R.id.cancel); titleView.setText(title); messageView.setText(message); confirmButton.setOnClickListener(confirmListener); cancelButton.setOnClickListener(cancelListener); AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); builder.setView(view); return builder.create(); } } ``` 最后，在我们的Activity中，我们可以通过创建一个实例对象，并调用show方法来显示弹框。例如： ```java IOSAlertDialog dialog = new IOSAlertDialog( "提示", "确定要删除吗？", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // 确定按钮点击事件 } }, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // 取消按钮点击事件 } }); dialog.show(getSupportFragmentManager(), "IOSAlertDialog"); ``` 这样，我们就可以实现一个Android仿IOS自定义AlertDialog提示框了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值