动画对话框实现

2022-02-22 13:59:32 浏览数 (1)

炫酷的动画对话框

关键技术

AlertDialog的自定义

代码
代码语言：javascript复制
 //创建对话框实例
            dlg = new AlertDialog.Builder(this).create();
            dlg.show();                             //显示对话框
            Window window = dlg.getWindow();        //获取对话框窗口
            window.setGravity(Gravity.CENTER);     //此处设置dialog显示在中心位置
            window.setWindowAnimations(R.style.mystyle);      //添加动画
            window.setContentView(R.layout.dialog_layout);   //设置对话框布局文件
            //获取对话框确定按钮
            button_determine = (Button) window.findViewById(R.id.btn_determine);
            //获取对话框取消按钮
            button_cancel = (Button) window.findViewById(R.id.btn_cancel);

代码含义已注释

动画 mystyle
代码语言：javascript复制
 <style name="mystyle" parent="android:Animation">
        <!--进入时的动画-->
        <item name="@android:windowEnterAnimation">@anim/dialog_enter</item>
        <!--退出时的动画-->
        <item name="@android:windowExitAnimation">@anim/dialog_exit</item>
    </style>

可以看出我们使用了两个动画 dialog_enter dialog_exit

dialog_enter (进入动画)
代码语言：javascript复制
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--从上进入到中间-->
    <translate
        android:duration="200"
        android:fromYDelta="-100%">
    </translate>

</set>
dialog_exit (退出动画)
代码语言：javascript复制
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--从中间到底部退出-->
    <translate
        android:fromYDelta="0"
        android:toYDelta="100%"
        android:duration="200"/>
</set>
对话框布局文件 dialog_layout （这个根据自己喜好来）
代码语言：javascript复制
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical">
        <!--标题-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="20dp"
            android:text="提示"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <!--提示文字-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="50dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="20dp"
            android:text="您确定退出？"
            android:textColor="@color/blue"
            android:textSize="20sp" />
        <!--线-->
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/yellow" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <!--确定按钮-->
        <Button
            android:id="@ id/btn_determine"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:text="确定"
            android:textColor="@color/orange"
            android:textSize="20sp" />
        <!--线-->
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/yellow" />
        <!--取消按钮-->
        <Button
            android:id="@ id/btn_cancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:text="取消"
            android:textColor="@color/orange"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>
最后就剩下简单的 主布局文件了，这个布局没有什么就是改了一下背景颜色
代码语言：javascript复制
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@ id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#4a5fec"
    >
</RelativeLayout>

到此 关键代码就已经完了

完整Java代码

代码语言：javascript复制
public class MainActivity extends Activity {
    private Button button_determine, button_cancel;      //定义对话框按钮
    private AlertDialog dlg;                               //定义对话框

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

    /**
     * 判断当单击手机返回按钮时，从手机顶部向下移动对话
     * 再次单击返回按钮,对话框将从中间向底部移动消失对话框
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //判断如果单击了返回按钮
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            //创建对话框实例
            dlg = new AlertDialog.Builder(this).create();
            dlg.show();                             //显示对话框
            Window window = dlg.getWindow();        //获取对话框窗口
            window.setGravity(Gravity.CENTER);     //此处设置dialog显示在中心位置
            window.setWindowAnimations(R.style.mystyle);      //添加动画
            window.setContentView(R.layout.dialog_layout);   //设置对话框布局文件
            //获取对话框确定按钮
            button_determine = (Button) window.findViewById(R.id.btn_determine);
            //获取对话框取消按钮
            button_cancel = (Button) window.findViewById(R.id.btn_cancel);
            initEvent();                                       //调用初始化事件方法
        }
        return super.onKeyDown(keyCode, event);
    }

    /**
     * 该方法出事对话框中按钮的事件，单击确定按钮退出该应用
     * 单击取消按钮，对话框将移动至底部消失
     */
    private void initEvent() {
        button_determine.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dlg.dismiss();          //对话框移动到底部消失
                finish();               //关闭当前应用
            }
        });
        button_cancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dlg.dismiss();          //对话框移动到底部消失
            }
        });
    }
}

运行

jqueryui 网站

0 人点赞