Android开发丶使用DialogFragment实现炫酷的登录界面并实现DialogFragment与宿主Activity的通信

最新推荐文章于 2022-06-03 20:55:28 发布

Fantasychong丶

最新推荐文章于 2022-06-03 20:55:28 发布

阅读量2.3k

点赞数 1

分类专栏： Android 文章标签： DialogFragment 登录界面

本文链接：https://blog.csdn.net/u014078990/article/details/79286850

版权

Android 专栏收录该内容

34 篇文章 2 订阅

订阅专栏

项目终于赶在2月8日收工了，单抗的这一个月尝试了很多新鲜的技术，并且取得了很不错的效果，现在距离放假还有几天，空闲之余决定做一下技术归纳。

本文主要围绕着Dialogfragment这个控件在登录界面上的应用来展开描述，这个控件是谷歌官方推荐用来替代传统Dialog控件的，因其有着和fragment相似的生命周期，因此更好管理。

一般来说，登录界面一般都是一个单独的Activity，然后通过intent给其它Activity和Fragment传值，那我们我们先看下通过DialogFragment实现的登录界面效果。

可见这个效果还是比较炫的，首先我们画这个界面的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:background="#0000"
    android:orientation="vertical">


    <RelativeLayout
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:background="#fff">

        <ImageView
            android:id="@+id/login_iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:src="@mipmap/login_close_bg_nor" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:orientation="vertical"
            android:paddingBottom="20dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="30dp"
                android:text="即刻开启见界"
                android:textSize="18sp" />

            <EditText
                android:id="@+id/login_et1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="40dp"
                android:background="@null"
                android:hint="请输入用户名"
                android:textSize="16sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:layout_marginTop="5dp"
                android:background="#d3d3d3" />

            <EditText
                android:id="@+id/login_et2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:background="@null"
                android:hint="请输入密码"
                android:inputType="textPassword"
                android:textSize="16sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:layout_marginTop="5dp"
                android:background="#d3d3d3" />

            <Button
                android:id="@+id/login_btn"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_marginTop="35dp"
                android:background="#000000"
                android:padding="5dp"
                android:text="登 录"
                android:textColor="#ffffff"
                android:textSize="16sp" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp">

                <TextView
                    android:id="@+id/login_register"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:text="没有账号?点击注册"
                    android:textSize="10sp" />

            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@mipmap/login_qq_bg_nor" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@mipmap/login_sina_bg_nor" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@mipmap/login_weixin_nor" />
    </LinearLayout>
</LinearLayout>

这块值得一提的是我们需要把上方包含输入框按钮的相对布局背景设为白色，否则之后设置全透明时会影响观感。

<RelativeLayout
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:background="#fff">

接下来设置弹窗的DialogFragment代码

package com.fantasychong.dialogfragmentlogin0208;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.Intent;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.DialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;

/**
 * Created by lenovo on 2018/2/8.
 */

public class LoginDailogFragment extends DialogFragment implements View.OnClickListener {

    private EditText mUsername;
    private EditText mPassword;
    private Button btn;
    private ImageView iv;
    private TextView toReg;
    private ProgressBar pb;

    public interface LoginInputListener{
        void onLoginInputComplete(String userName, String password);
    }


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //设置背景透明
        getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        return super.onCreateView(inflater, container, savedInstanceState);
    }

    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        View view= LayoutInflater.from(getActivity()).inflate(R.layout.dialog_login, null);
        iv= view.findViewById(R.id.login_iv);
        toReg= view.findViewById(R.id.login_register);
        pb= view.findViewById(R.id.login_pb);
        pb.setVisibility(View.GONE);
        mUsername= view.findViewById(R.id.login_et1);
        btn= view.findViewById(R.id.login_btn);
        mPassword= view.findViewById(R.id.login_et2);
        iv.setOnClickListener(this);
        toReg.setOnClickListener(this);
        btn.setOnClickListener(this);

        builder.setView(view);
        return builder.create();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.login_btn:
                LoginInputListener listener= (LoginInputListener) getActivity();
                listener.onLoginInputComplete(mUsername.getText().toString(), mPassword.getText().toString());
                dismiss();
                break;
        }
    }
}

首先完成view布局的搭建工作后，在onCreateView（）方法里设置背景透明。

  @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //设置背景透明
        getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        return super.onCreateView(inflater, container, savedInstanceState);
    }

生成一个接口用于传递用户名密码值便于宿主Acitivity接收。

 public interface LoginInputListener{
        void onLoginInputComplete(String userName, String password);
    }

在登录的入口调取该方法。

 @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.login_btn:
                LoginInputListener listener= (LoginInputListener) getActivity();
                listener.onLoginInputComplete(mUsername.getText().toString(), mPassword.getText().toString());
                dismiss();
                break;
        }
    }

接下来在宿主Acitivity里接收DialogFragment接收的值。

首先让宿主Activity继承这个接口。

public class MainActivity extends AppCompatActivity implements LoginDailogFragment.LoginInputListener{

手动生成这个方法。

 @Override
    public void onLoginInputComplete(String userName, String userPassword) {
        name.setText(userName);
        password.setText(userPassword);
    }

然后表示宿主Acitivity已经接收到用户名和密码值，此时可以按照个人实际开发需求进行网络请求等操作了。

至此全部完成！

源码下载: 点击打开链接

Fantasychong丶

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Android开发丶使用DialogFragment实现炫酷的登录界面并实现DialogFragment与宿主Activity的通信

项目终于赶在2月8日收工了，单抗的这一个月尝试了很多新鲜的技术，并且取得了很不错的效果，现在距离放假还有几天，空闲之余决定做一下技术归纳。本文主要围绕着Dialogfragment这个控件在登录界面上的应用来展开描述，这个控件是谷歌官方推荐用来替代传统Dialog控件的，因其有着和fragment相似的生命周期，因此更好管理。一般来说，登录界面一般都是一个单独的Activity，然后通过inten...
复制链接

扫一扫