【自定义Dialog】封装IOS样式的圆角Dialog

喜你入骨 提交于 2019-12-20 06:56:54

###开发项目的时候经常会使用的Dialog,所以给大家分享一个类似IOS风格的Dialog。

####源码下载链接:源码下载

实现效果

实现机制
1.先自定义一个弹出框的样式
2.自己实现MyDialog类,在里面加载自定义样式的弹出框;
3.使用时,与使用Dialog一样
具体代码

####MainActivity.java :

public class MainActivity extends AppCompatActivity {
    private MyDialog myDialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView btn = (TextView) findViewById(R.id.click);
        myDialog = new MyDialog(this);
        myDialog.setTitle("注意");//设置标题
        myDialog.setMessage("确认删除吗?");//设置内容

        //调起Dialog
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myDialog.dialog.show();//显示
            }
        });

        //确认按键回调,按下确认后在此做处理
        myDialog.setMyDialogOnClick(new MyDialog.MyDialogOnClick() {
            @Override
            public void ok() {
                Toast.makeText(MainActivity.this, "回调成功了", Toast.LENGTH_LONG).show();
                myDialog.dialog.dismiss();//关闭
            }
        });
    }
}

####MyDialog.java :自定义Dialog的实现类MyDialog

public class MyDialog implements View.OnClickListener {
    private Context context;
    public Dialog dialog;
    public TextView title, message, cancle, ok;
    private MyDialogOnClick myDialogOnClick;

    public MyDialog(Context context) {
        this.context = context;
        //下面三步非常重要
        dialog = new Dialog(context, R.style.dialog);//Dialog的Style
        Window window = dialog.getWindow();
        window.setContentView(R.layout.my_dialog);//引用Dialog的布局

        title = (TextView) window.findViewById(R.id.tv_title);
        message = (TextView) window.findViewById(R.id.tv_message);
        cancle = (TextView) window.findViewById(R.id.btn_cancel);
        ok = (TextView) window.findViewById(R.id.btn_ok);

        cancle.setOnClickListener(this);
        ok.setOnClickListener(this);
    }

    public void setTitle(String titleStr) {
        title.setText(titleStr);
    }

    public void setMessage(String messageStr) {
        message.setText(messageStr);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_ok:
               myDialogOnClick.ok();
                break;
            case R.id.btn_cancel:
                dialog.dismiss();
                break;

        }
    }

    //给确认按钮设置回调的接口
    public interface MyDialogOnClick{
         void ok();
    }

    public void setMyDialogOnClick(MyDialogOnClick myDialogOnClick){
        this.myDialogOnClick =myDialogOnClick;
    }

}

####my_dialog.xml 自定义Dialog的布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@null">
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/top_title"
        android:gravity="center_horizontal"
        android:text="警告"
        android:textColor="#000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv_message"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/tv_title"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:background="#fff"
        android:padding="5dp"
        android:maxLines="2"
        android:text="你正在进行危险操作"
        android:textColor="#9000"
        android:textSize="14sp" />

    <View
        android:id="@+id/line1"
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#ccc"
        android:layout_below="@+id/tv_message"
        />


    <LinearLayout
        android:layout_below="@+id/line1"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/bottom_title"
        android:orientation="horizontal"
        >
        <TextView
            android:id="@+id/btn_cancel"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="取消"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="#000"
            />
        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:background="#ccc"
            />
        <TextView
            android:id="@+id/btn_ok"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="确定"
            android:layout_weight="1"
            android:textColor="#000"
            android:gravity="center"
            />
    </LinearLayout>
</RelativeLayout>

####引用的样式styles.xml

 <style name="dialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:background">@android:color/transparent</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:backgroundDimEnabled">true</item>
    </style>

####为了实现圆角,必须把style里的两个背景都设置为透明,并且在my_dialog.xml dialog的Top和Bottom中把Background分别设置为top_title.xml和bottom_title.xml

####top_title.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#fff"></solid>
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"></corners>
</shape>

####bottom_title.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#fff"></solid>
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"></corners>
</shape>

到这一步页就完成了。实现原理很简单。希望能给不懂的同学带来启发。
这个项目Android Studio环境下开发的。所以使用Eclipse的同学只能复制到eclipse

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!