[仿南航app开发日记4]登陆对话框完成以及自定义对话框碰到的坑

来源：互联网发布：手机淘宝怎么申请试用编辑：程序博客网时间：2024/05/20 23:34

前言

这篇博客是接着前面三篇博客的，前面三篇博客的地址：

[仿南航app开发日记1]开篇-总体布局分析
[仿南航app开发日记2]主界面完成
[仿南航app开发日记3]侧滑菜单实现

原app的界面

这里写图片描述

分析

编写一个自定义对话框是比较简单了，直接些布局就行了，先上布局吧：

<?xml version="1.0" encoding="utf-8"?><!--登陆对话框--><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:background="@drawable/dialog_shape"    android:layout_width="wrap_content"    android:layout_height="wrap_content">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="134dp"        android:background="@drawable/login_banner">        <ImageView            android:id="@+id/dialog_cancelBtn"            android:layout_width="20dp"            android:layout_height="20dp"            android:layout_alignParentRight="true"            android:layout_alignParentTop="true"            android:layout_marginRight="15dp"            android:layout_marginTop="10dp"            android:src="@drawable/dialog_edite_selector"/>    </RelativeLayout>    <!--学号-->    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:padding="20dp">        <EditText            android:layout_width="match_parent"            android:layout_height="40dp"            android:background="@drawable/edite_text_shape"/>        <ImageView            android:layout_width="20dp"            android:layout_height="20dp"            android:layout_alignParentRight="true"            android:layout_marginRight="10dp"            android:clickable="true"            android:src="@drawable/dialog_edite_selector"            android:visibility="visible"            android:layout_centerVertical="true"/>    </RelativeLayout>    <!--密码-->    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:padding="20dp">        <EditText            android:layout_width="match_parent"            android:layout_height="40dp"            android:inputType="textPassword"            android:background="@drawable/edite_text_shape"/>         <!--这里的ImageView必须加上android:clickable="true"-->        <ImageView            android:layout_width="20dp"            android:layout_height="20dp"            android:layout_alignParentRight="true"            android:layout_marginRight="10dp"            android:clickable="true"            android:src="@drawable/dialog_top_close_off"            android:visibility="invisible"            android:layout_centerVertical="true"/>    </RelativeLayout>    <!--选择按钮-->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:paddingLeft="30dp"        android:paddingRight="30dp"        android:paddingTop="20dp"        android:paddingBottom="20dp"        android:orientation="horizontal">        <RadioGroup            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="horizontal">            <RadioButton                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="教师"/>            <View                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1"/>            <RadioButton                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="学生"/>        </RadioGroup>    </LinearLayout>    <!--登陆按钮-->    <Button        android:id="@+id/dialog_loginBtn"        android:layout_margin="20dp"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:background="@drawable/dialog_login_shape"        android:textColor="@android:color/white"        android:textSize="25dp"        android:text="登录"/></LinearLayout>

这上面有一个坑，因为里面有ImageView用来放置右上角和输入框右边的小叉叉，我给他们写了一个selector用来改变形态（切换状态的时候），但是右上角的ImageView和编辑框右边的ImageView不一样，如果编辑框右边的ImageView不加上android:clickable=”true”这个属性的话将不会达到切换效果，下面放上selector的写法：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" android:drawable="@drawable/dialog_top_close_on"/>    <item android:drawable="@drawable/dialog_top_close_off"/></selector>

这里面也有一个值得注意的地方，上面两个item顺序不能写反，否则也不能生效，第一个item代表按下时候显示的图片，第二个item代表默认状态显示的图片，写好了布局，那就自定义一个Dialog来加载我的布局就可以显示了：

package cn.karent.nanhang.UI;import android.app.ActionBar;import android.app.Dialog;import android.content.Context;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.Window;import android.view.WindowManager;import android.widget.Button;import android.widget.ImageView;import cn.karent.nanhang.R;import cn.karent.nanhang.util.ScreenUtil;/** * Created by wan on 2016/12/25. * 登陆对话框 */public class LoginDialog extends Dialog{    public LoginDialog(Context context) {        super(context);    }    public LoginDialog(Context context, int theme) {        super(context, theme);    }    /**     * 创建对话框的类     */    public static class LoginDialogBuilder {        private Context mContext;        /**         * 登录事件的监听器         */        private View.OnClickListener mLoginListener;        /**         * 对话框的宽度         */        private int mWidth;        public LoginDialogBuilder(Context context) {            this.mContext = context;            mWidth = ScreenUtil.dp2px(340);        }        public LoginDialogBuilder setOnClickListener(View.OnClickListener l) {            this.mLoginListener = l;            return this;        }        /**         * 创建对话框         * @return         */        public LoginDialog create() {            LayoutInflater inflater = LayoutInflater.from(mContext);            //加载布局对话            View v = inflater.inflate(R.layout.login_dialog_layout, null);            final LoginDialog d = new LoginDialog(mContext);            d.addContentView(v, new ActionBar.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,                    ViewGroup.LayoutParams.WRAP_CONTENT));            //设置对话框的大小            Window dialogWindow = d.getWindow();            WindowManager.LayoutParams lp = dialogWindow.getAttributes();            dialogWindow.setGravity(Gravity.CENTER);            lp.width = mWidth;            dialogWindow.setAttributes(lp);            Button loginBtn = (Button)v.findViewById(R.id.dialog_loginBtn);            loginBtn.setOnClickListener(mLoginListener);            ImageView cancelBtn = (ImageView)v.findViewById(R.id.dialog_cancelBtn);            cancelBtn.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    d.dismiss();                }            });            return d;        }    }}

上面代码比较简单，也没什么好讲的，值得注意的地方就是修改对话框的高度：

   //设置对话框的大小            Window dialogWindow = d.getWindow();            WindowManager.LayoutParams lp = dialogWindow.getAttributes();            dialogWindow.setGravity(Gravity.CENTER);            lp.width = mWidth;            dialogWindow.setAttributes(lp);

这样就可以了，现在看看效果：
这里写图片描述
可以看到对话框已经出来了，但是顶部有一个空白，这个好像无法消除，这个应该是对话框给title预留的位置，不行我们试试，在LoginDialogBuilder类的create方法里面加入

d.setTitle("标题");

然后看看效果：
这里写图片描述
标题果然出现了，可是这个标题是我们不想要的，所以只有通过设置这个标题框的主题了，还记得我们的LoginDialog类的第二个构造函数吗：

 public LoginDialog(Context context, int theme) {        super(context, theme);    }

那我们接下来写一个style吧：

    <style name="LoginDialogTheme" parent="Theme.AppCompat.DayNight.Dialog">        <!--去除标题-->        <item name="android:windowTitleStyle">@null</item>        <!--去除背景-->        <item name="android:windowBackground">@null</item>    </style>

然后修改LoginDialogBuilder的create()函数：

 final LoginDialog d = new LoginDialog(mContext);

换成

 final LoginDialog d = new LoginDialog(mContext, R.style.LoginDialogTheme);

并删除原先添加标题的那一行代码，看看效果：
这里写图片描述

果然成功了。接下来讲讲在哪里创建了那个对话框，首先我将侧滑菜单里面的布局都提取到了一个叫做MenuUI的地方：

package cn.karent.nanhang.UI;import android.app.Activity;import android.util.Log;import android.view.View;import android.widget.Button;import android.widget.Toast;import cn.karent.nanhang.R;/** * Created by wan on 2016/12/25. * 侧滑菜单里面的封装 */public class MenuUI {    private Activity mActivity;    /**     * 登陆按钮     */    private Button loginBtn;    public MenuUI(Activity activity) {        mActivity = activity;        loginBtn = (Button)activity.findViewById(R.id.menu_loginBtn);        loginBtn.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                new LoginDialog.LoginDialogBuilder(mActivity).setOnClickListener(new View.OnClickListener() {                    @Override                    public void onClick(View v) {                        Log.d("MenuUI", "对话框点击事件");                    }                }).create().show();            }        });    }}

可以看到我在这里面给侧滑菜单的登录按钮添加了点击事件，并在这个点击事件里面创建了对话框，MainActivity里面只要创建这个MenuUI对象就行了：

 mMenuUI = new MenuUI(this);

效果展示

上面代码讲解完了，接下来完整的看下完成的例子吧：
这里写图片描述

0 0