具有多个视图的自定义警报对话框

时间:2017-07-27 12:11:48

标签: android xml android-alertdialog

我正在尝试创建一个带有取消按钮的自定义提醒,如下图所示, 请帮我创建一个。在此先感谢。!

enter image description here

1 个答案:

答案 0 :(得分:5)

MainActivity类

    Button openAlert;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    openAlert = (Button)findViewById(R.id.openAlert);

    openAlert.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {


            AlertDialog.Builder alert = new AlertDialog.Builder(MainActivity.this);
            View alertView = getLayoutInflater().inflate(R.layout.custom_alert, null);

            //Set the view
            alert.setView(alertView);
            //Show alert
            final AlertDialog alertDialog = alert.show();
            //Can not close the alert by touching outside.
            alertDialog.setCancelable(false);
            alertDialog.setCanceledOnTouchOutside(false);
            alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

            ImageView closeButton = (ImageView) alertView.findViewById(R.id.closeButton);

            closeButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    alertDialog.dismiss();
                }
            });



        }
    });



}

MainActivity XML - >这只是一个打开警报的按钮

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.vzw.www.multviewalert.MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="OPEN ALERT"
        android:id="@+id/openAlert"/>

</RelativeLayout>

您需要为警报

创建自定义布局

custom_alert.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/alertContainer"
        android:background="@drawable/custom_alert_bg">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/rowOne">

            <ImageView
                android:id="@+id/rowOneButtonOne"
                android:background="#cdcdcd"
                android:layout_margin="4dp"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_weight="0.33"
                />

            <ImageView
                android:id="@+id/rowOneButtonTwo"
                android:background="#cdcdcd"
                android:layout_margin="4dp"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_weight="0.33"
                />

           <ImageView
                android:id="@+id/rowOneButtonThree"
                android:background="#cdcdcd"
                android:layout_margin="4dp"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_weight="0.33"
                />
        </LinearLayout>



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/rowTwo"
        android:layout_below="@id/rowOne">

        <ImageView
            android:id="@+id/rowTwoButtonOne"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />

        <ImageView
            android:id="@+id/rowTwoButtonTwo"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />

        <ImageView
            android:id="@+id/rowTwoButtonThree"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/rowThree"
        android:layout_below="@id/rowTwo">

        <ImageView
            android:id="@+id/rowThreeButtonOne"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />

        <ImageView
            android:id="@+id/rowThreeButtonTwo"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />

        <ImageView
            android:id="@+id/rowThreeButtonThree"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />
    </LinearLayout>

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

</RelativeLayout>

<ImageView
    android:id="@+id/closeButton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_weight="0.33"
    android:background="#cdcdcd" />


</RelativeLayout>

这是警报背景的drawable custom_alert_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#ffffff"/>
    <corners
        android:radius="5dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

这将产生以下内容

enter image description here

这是一个骨架....你必须用你的图像和每个点击听众填写它。

另外,如果要将顶部向下移动。你可以添加

android:layout_marginTop="50dp"

到custom_alert.xml

中的alertContainer ID