Android的 Dialog自定义布局用法（弹窗），Button点击按住会变色，松开会恢复原来的颜色

1.先看效果图，点击按住按钮会变成红色，松开会恢复成原来的颜色

在这里插入图片描述

这里是视频演示。

Dialog弹窗

2.先在values/themes.xml新建一个样式MyDialog

   <!-- MyDialog的配置属性 -->
    <style name="MyDialog" parent="android:Theme.Dialog">
        <!-- 背景颜色及透明程度 -->
        <item name="android:windowBackground">@android:color/transparent</item>
        <!-- 是否半透明 -->
        <item name="android:windowIsTranslucent">false</item>
        <!-- 是否没有标题 -->
        <item name="android:windowNoTitle">true</item>
        <!-- 是否浮现在activity之上 -->
        <item name="android:windowIsFloating">true</item>
        <!-- 是否背景模糊，这个决定背景是否灰色 -->
        <item name="android:backgroundDimEnabled">true</item>
        <!-- 设置背景模糊的透明度-->
        <item name="android:backgroundDimAmount">0.5</item>
    </style>

3.新建一个MyDialog继承Dialog类

import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.Display;
import android.view.Gravity;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

import com.example.myapplication001.R;

public class MyDialog extends Dialog implements View.OnClickListener{
    //在构造方法里提前加载了样式
    private Context context;//上下文
    private int layoutResID;//布局文件id
    private int[] listenedItem;//监听的控件id
    public MyDialog(Context context,int layoutResID,int[] listenedItem){
        super(context,R.style.MyDialog);//加载dialog的样式
        this.context = context;
        this.layoutResID = layoutResID;
        this.listenedItem = listenedItem;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //提前设置Dialog的一些样式
        Window dialogWindow = getWindow();
        dialogWindow.setGravity(Gravity.CENTER);//设置dialog显示居中
        //dialogWindow.setWindowAnimations();设置动画效果
        setContentView(layoutResID);


        WindowManager windowManager = ((Activity)context).getWindowManager();
        Display display = windowManager.getDefaultDisplay();
        WindowManager.LayoutParams lp = getWindow().getAttributes();
        lp.width = display.getWidth()*4/5;// 设置dialog宽度为屏幕的4/5
        getWindow().setAttributes(lp);
        setCanceledOnTouchOutside(false);//点击外部Dialog不会消失
        //遍历控件id添加点击注册
        for(int id:listenedItem){
            findViewById(id).setOnClickListener(this);
        }
    }
    private OnCenterItemClickListener listener;
    public interface OnCenterItemClickListener {
        void OnCenterItemClick(MyDialog dialog, View view);
    }
    //很明显我们要在这里面写个接口，然后添加一个方法
    public void setOnCenterItemClickListener(OnCenterItemClickListener listener) {
        this.listener = listener;
    }


    @Override
    public void onClick(View v) {
      //  dismiss();//注意：我在这里加了这句话，表示只要按任何一个控件的id,弹窗都会消失，不管是确定还是取消。
        listener.OnCenterItemClick(this,v);
    }
}

4.主活动MainActivity2实现自己写的MyDialog 的接口,实现点击方法

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import com.example.myapplication001.R;


public class MainActivity2 extends AppCompatActivity implements MyDialog.OnCenterItemClickListener{

    TextView tv_1;
    //定义一个自己的dialog
    private MyDialog myDialog;
    @SuppressLint({"MissingInflatedId", "WrongViewCast"})
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        tv_1 = (TextView) findViewById(R.id.tv_1);
        tv_1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //显示
                myDialog.show();
            }
        });

        //实例化自定义的dialog
        myDialog = new MyDialog(this,R.layout.my_dialog,new int[]{R.id.dialog_btn,R.id.dialog_btn1,R.id.dialog_btn2});
        //绑定点击事件
        myDialog.setOnCenterItemClickListener((MyDialog.OnCenterItemClickListener) this);



    }

    @Override
    public void OnCenterItemClick(MyDialog dialog, View view) {
        switch (view.getId()){
            case R.id.dialog_btn:
                //这里让弹窗关闭
                dialog.dismiss();
                Toast.makeText(getApplicationContext(),"点击了1",Toast.LENGTH_SHORT).show();
                break;
            case R.id.dialog_btn1:
                //这里让弹窗关闭
                dialog.dismiss();
                Toast.makeText(getApplicationContext(),"点击了2",Toast.LENGTH_SHORT).show();
                break;
            case R.id.dialog_btn2:
                //这里让弹窗关闭
                dialog.dismiss();
                Toast.makeText(getApplicationContext(),"点击了3",Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }

    }

}

5.my_dialog布局文件代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_5"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:text="提示消息"
        android:textColor="@color/black"
        android:textSize="34sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/dialog_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="自定义dialog按钮1" />

        <Button
            android:id="@+id/dialog_btn1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="自定义dialog按钮2" />
    </LinearLayout>

    <Button
        android:id="@+id/dialog_btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="自定义dialog按钮3" />

    <Button
        android:id="@+id/dialog_btn3"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:background="@drawable/test"
        android:text="自定义dialog按钮4" />

    <Button
        android:id="@+id/dialog_btn4"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginLeft="3dp"
        android:layout_marginTop="5dp"
        android:layout_marginRight="3dp"
        android:background="@drawable/test"
        android:text="自定义dialog按钮5" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/dialog_btn5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"

            android:text="自定义dialog按钮6" />

        <Button
            android:id="@+id/dialog_btn6"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="自定义dialog按钮7" />
    </LinearLayout>
</LinearLayout>

6.my_dialog布局中按钮的点击按住会变色，松开会恢复原来的颜色。在drawable文件夹下新建一个test文件，代码内容如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false"><!--没点击按钮的时候-->
        <shape android:shape="rectangle"><!--按钮形状-->
            <solid android:color="#a8f9f7" /><!--按钮背景填充色-->
            <stroke
                android:width="1dp"
                android:color="@color/black" /><!--按钮边框-->
        </shape>
    </item>

    <!--当点击按钮的时候变为红色-->
    <item android:drawable="@color/colorRed" android:state_pressed="true" />
    <!-- 自己添加红色的颜色<color name="colorRed">#ea2e34</color>-->

</selector>

7.activity_main2布局文件内容如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/refreshLa"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="180dp"
        android:layout_height="50dp"
        android:background="@color/purple_500"
        android:gravity="center"
        android:text="新的页面1" />

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="180dp"
        android:layout_height="50dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="新的页面2" />


</LinearLayout>

原文链接：https://blog.csdn.net/qq_36570506/article/details/130182288

你可能也喜欢