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

最新推荐文章于 2021-02-26 13:40:37 发布
最新推荐文章于 2021-02-26 13:40:37 发布
阅读量1.4k 收藏
点赞数
分类专栏： 仿南航app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/supervictim/article/details/53869382
版权

前言

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

[仿南航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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
安卓开发---仿网易云小火箭dialog一个简单的自动更新弹窗以及下载apk
panghaha12138的博客
05-17 6363
先看效果图 前面是网易云的小火箭更新dialog 先说思路吧，想实现自动更新版本，最简单就是获取到应用的包信息，应用版本号，版本名，然后每次登陆的时候从服务器获取当前apk的版本号和版本名，然后进行判断，不一致证明是新版本，弹出dialog 让用户更新，选择立即更新调用浏览器下载（系统自带的），然后就是安装了...balabala 步骤 1，获取包信息，版本号，版本名 /
仿南航app的源码
03-20
仿南航app的源码，里面包含了所有的源码还有资源文件以及编译好的一个apk文件
仿头条评论对话框
07-27
一个高仿安卓版今日头条评论对话框实现，对于很多有这方面需求的读者来说受益匪浅
Android系统仿iPhone对话框
01-19
厌倦了Android系统自带的对话框，我们更想要一种灵活的自定义的对话框，于是我们推出仿iPhone的对话框，一种自定义布局的典型，让Android成为万能系统
登陆对话框。。。LoginDialog（用TableLayout加载xml），，另一个例子：设置密码（用View的形式加载xml）
u010919133的专栏
02-13 775
-----------------------main.java------------------------------------------ package com.example.mm; import android.app.AlertDialog; import android.app.AlertDialog.Builder; import android.co
java比较炫的登录界面_教你写一个炫酷的Material Design 风格的登录和注册页面
weixin_42393198的博客
02-26 797
每个人都会喜欢漂亮的登录界面，一个App 给人们的第一印象是非常重要的。这篇文章将教你使用谷歌材料设计规范(Material design spec)和谷歌的新的设计支持库(design support library)来创建一个炫酷的登录和注册界面。设计支持库实现了材料设计规范的一部分，它包含了一部分炫酷的UI 部件，让你的Android 应用给人一种优雅的感觉。对事物的设计和布局方面，如何...
[仿南航app开发日记6]自定义背景透明进度条
伯兰的博客
12-28 1438
自定义透明进度框
[仿南航app开发日记2]主界面完成
伯兰的博客
12-24 1883
主界面完成
[仿南航app开发日记5]查成绩界面开发完成以及使用PopupWindow踩过的坑
伯兰的博客
12-27 1514
放南航app开发日记4
[仿南航app开发日记1]开篇-总体布局分析
伯兰的博客
12-24 2546
仿南航app开篇
南航移动Redis-Cluster趟坑记
01-27
而南航电商营销平台这种带有国企背景和传统行业特色的电商系统在这股浪潮的引领之下，也逐步向这些“大厂”学习，结合自身的实际情况，在“高可用，高可靠，高并发下低延迟”的系统优化之路上展开一番游历探索，期间...
南航直减自动出票app
07-27
在线对接接口文档 https://www.apifox.cn/apidoc/shared-28d55f80-a873-4d05-95a7-4db942e2964b 访问密码 : 123456
南航计算机组成原理课件第4章
07-05
南航计算机组成原理课件，计算机专业或跨考，考研必备
Dialog所遇到的坑
冰糖的博客
12-01 1128
App中使用Dialog显示一些信息可谓家常便饭，而初次使用所遇到的坑也挺多。Dialog样式的指定详细请看这篇文章,这篇文章主要介绍了以下几点: 创建对话框片段 创建按钮，列表 使用自定义布局 事件消息传递 清楚对话框的细节和处理 这篇文章是Google官方教程，简明扼要，使用对话框创建DialogFragment更加方便。Dialog传递消息如果使用自定义的样式的DialogFragment，那
[仿南航app开发日记7]自绘漂亮的课程表界面
伯兰的博客
12-29 4252
前言 前面的博客里面分别讲到了自定义ViewGroup（侧滑菜单）、自定义Dialog（登陆对话框以及背景透明进度条）、使用PopupWindow（下拉方式选择年份），那么今天要讲的是自绘课程表界面，属于android绘图知识，在这之前我也写过课程表界面，不过当时使用的GridView+Adapter来制作课程表，不过效果不是很好，链接如下： http://blog.csdn.net/s...
[仿南航app开发日记3]侧滑菜单实现
伯兰的博客
12-24 1424
放南航app开发日记3
[仿南航app开发日记8]解决部分bug
伯兰的博客
01-03 1384
透明进度条bug 我的透明进度条原理是不断重绘一个背景图片，然后使用Matrix旋转图片，原先的代码是死循环，代码如下： protected Void doInBackground(Void... params) { while( true ) { try { Thread.slee...
Python_Pinry是一个平铺图像板系统，为那些想要保存标签和分享图像、视频和网页的人提供一个易于浏览的格式.zip
最新发布
05-24
Python_Pinry是一个平铺图像板系统，为那些想要保存标签和分享图像、视频和网页的人提供一个易于浏览的格式
南航trans复现: 电容电流前馈+电网电压全前馈_单相lcl并网逆变器仿真
05-01
南航trans复现的工作是基于电容电流前馈和电网电压全前馈的单相LCL并网逆变器仿真。逆变器是将直流电转换为交流电的设备，用于太阳能、风能等可再生能源发电系统中。LCL并网逆变器是目前较流行的一种拓扑结构，具有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值