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

前言

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

[仿南航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);

效果展示

上面代码讲解完了，接下来完整的看下完成的例子吧：