TextInputLayout+TextInputEditText 打造精美的登录界面

最新推荐文章于 2021-12-10 13:08:03 发布

威威貓

最新推荐文章于 2021-12-10 13:08:03 发布

阅读量1.1w

点赞数 6

分类专栏： # 初级之路 Android 文章标签： TextInputLayout TextInputEditText 精美登录界面

本文链接：https://blog.csdn.net/smile_Running/article/details/97260032

版权

Android 同时被 2 个专栏收录

70 篇文章 16 订阅

订阅专栏

初级之路

17 篇文章 10 订阅

订阅专栏

博主声明：

转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。

本文首发于此博主：威威喵 | 博客主页：https://blog.csdn.net/smile_running

感受 Material Design UI 魅力，你不能错过的 Material Design 全系列文章：

Material Design 之一 BottomNavigationView + ViewPager + Fragment 仿微信底部导航效果

Material Design 之二 Toolbar + DrawerLayout + NavigationView 实现QQ侧拉抽屉效果

Material Design 之三 TabLayout + ViewPager + Fragment 今日头条标题切换效果

Material Design 之四 SwipeRefreshLayout + CardView + RecyclerView 精美瀑布流效果

Material Design 之五 CoordinatorLayout + AppBarLayout 提供最佳浏览体验

Material Design 之六 CollapsingToolbarLayout + FloatingActionButton 打造精美详情界面

Material Design 之七 TextInputLayout+TextInputEditText 打造精美的登录界面

前面写的那几篇呢，都是关于 Material Design 库下提供的几种漂亮的 view 的使用，这么一连学习下来的话， Material Design 库下几个 nice 又常用的都学完了，这一篇是 Material Design 库剩下的最后两个控件了，把这些综合起来用，绝大部分的界面都足够满足需求了，如果再不够的话，就只能自定义 View，自定义 sytle 去更改了。

好了，多的就说到这里。我们来看看这篇要使用的两个控件 TextInputLayout 与 TextInputEditText，光从名字看，就能知道它是用于文本输入的，至于有什么新的效果，我们使用过后才知道。

我们要用这两个控件写一个精美的登录界面，我们之前使用的 EditText 输入框基本都是这样样子的：

虽然 EditText 的样式能够自定义，但是总缺了点什么味道。而我们今天要写的一个登录界面是这样的：

这只是一个比较简约的登录界面，做为例子已经足够了。下面我们来看如何实现吧。

首先，登录外围是一个 CardView 包裹起来，顶部是一个 CircleImageView 圆形图片，说到这个 CircleImageView 是真的好用，而且非常简单，与 ImageView 的使用没有什么区别，不过需要引入一下库依赖：

    implementation 'de.hdodenhof:circleimageview:3.0.0'

然后接下来就是 TextInputLayout 了，它是一个 ViewGroup，所以与它配合的就是 TextInputEditText 了。TextInputLayout 内部包裹着 TextInputEditText，就能够形成联动效果。

那么，整个布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="32dp"
        android:layout_marginTop="64dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="64dp"
        app:cardCornerRadius="4dp"
        app:cardElevation="8dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <de.hdodenhof.circleimageview.CircleImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="16dp"
                android:src="@drawable/cat" />

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginRight="16dp"
                android:hint="用户名"
                android:textColorHint="#a2c699">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/edt_user"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="#9966cc" />

            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginRight="16dp"
                android:hint="密码"
                android:textColorHint="#a2c699">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/edt_pwd"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="#9966cc" />
            </android.support.design.widget.TextInputLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="48dp">

                <Button
                    android:id="@+id/btn_login"
                    android:layout_width="0dp"
                    android:layout_height="32dp"
                    android:layout_marginRight="16dp"
                    android:layout_weight="1"
                    android:background="@drawable/style_btn_login"
                    android:text="登录"
                    android:textColor="#fcfcfc" />

                <Button
                    android:id="@+id/btn_reg"
                    android:layout_width="0dp"
                    android:layout_height="32dp"
                    android:layout_marginLeft="16dp"
                    android:layout_weight="1"
                    android:background="@drawable/style_btn_login"
                    android:text="注册"
                    android:textColor="#fcfcfc" />
            </LinearLayout>

        </LinearLayout>

    </android.support.v7.widget.CardView>

</RelativeLayout>

TextInputLayout 有几个比较常用的属性：

android:hint="用户名"
android:textColorHint="#a2c699"

hint 和以往的 EditText 一样，是一个提示文本，但是必须写在 TextInputLayout 下面，才能形成如上图那个提示文本效果。还有一个 color 属性就是设置提示文本的样式了，非常容易懂。TextInputEditText 的话，就与 EditText 没什么区别，都是基本属性的使用。

接下来就是 Button 的一个样式设置了，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <stroke android:color="#9966cc" />
            <solid android:color="#9966cc" />
            <corners android:radius="8dp" />
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <stroke android:color="#a2c699" />
            <solid android:color="#a2c699" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

两个 item 表示的是被按下和抬起的样式，stroke 表示描边，solid 表示填充的颜色，corners 表示四周弧度，也就是将 button 设置为圆角矩形，值越大，就越明显。

最后是我们 Fragment 中的代码，也就是登录逻辑的判断，这里我就随便写了一下：

package nd.no.xww.bottomnavigationlayout;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.TextInputEditText;
import android.support.v4.app.Fragment;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

/**
 * @author xww
 * @desciption :
 * @date 2019/7/22
 * @time 23:40
 */
public class TwoFragment extends Fragment {

    TextInputEditText edt_user;
    TextInputEditText edt_pwd;

    Button btn_login;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_two, container, false);
        return view;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        edt_user = view.findViewById(R.id.edt_user);
        edt_pwd = view.findViewById(R.id.edt_pwd);
        btn_login = view.findViewById(R.id.btn_login);


        btn_login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String user = edt_user.getText().toString().trim();
                String pwd = edt_pwd.getText().toString().trim();

                if (TextUtils.isEmpty(user) && TextUtils.isEmpty(pwd)) {
                    Toast.makeText(getContext(), "user or pwd not null", Toast.LENGTH_SHORT).show();
                    return;
                }

                if ("威威喵".equals(user) && "123456".equals(pwd)) {
                    Toast.makeText(getContext(), "登录成功", Toast.LENGTH_SHORT).show();
                } else if (!"威威喵".equals(user)) {
                    edt_user.setError("用户名错误");
                } else if (!"123456".equals(pwd)) {
                    edt_pwd.setError("密码错误");
                }

            }
        });

    }
}

还有一个比较好看的效果，就是那个用户名或密码错误时，弹出的框框效果，是这样的：

看起来挺不错的效果，就一行代码搞定：

edt_user.setError("用户名错误");

edt_pwd.setError("密码错误");

好了，最后经过这几篇下来的学习，Material Design 库已经被我们使用的差不多了，如果还没使用过的话，感觉学起来吧，让你的界面更加炫酷和美观。

威威貓

关注

6
点赞
踩
27

收藏

觉得还不错? 一键收藏
4
评论
TextInputLayout+TextInputEditText 打造精美的登录界面

博主声明：转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。本文首发于此博主：威威喵|博客主页：https://blog.csdn.net/smile_running感受 Material Design UI 魅力，你不能错过的Material Design 全系列文章：Material Design 之一 Bott...
复制链接

扫一扫

专栏目录