「Android」1.简单的登录页面设计-阿里云开发者社区

「Android」1.简单的登录页面设计

本文将通过简单的介绍android开发使用到的基础组件，完成一个登录页面的设计。页面展示请点击目录处跳转即可。

前言知识

Android Studio的安装这里就不再介绍了，博客千篇一律~

本页面的设计主要应用到了LinearLayout、ImageView、TextView、Button、EditText、CheckBox6种组件。这里先一一简单的介绍一下。请往下看⛷️⛷️：

1.LinearLayout

LinearLayout线性布局。通过属性android:orientation区分两种方向。从左往右设置属性值为horizontal；从上到下设置为vertival。默认的属性为水平方向（即从左往右）。

可以通过设置background属性设置背景，比如将背景设置为一张图片。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:padding="5dp"  
 android:orientation="vertical"
 android:background="@drawable/bg" >
</LinearLayout>

注意，这里的背景图片为bg.png，放在项目中res/drawable/目录下，使用"@drawable/bg"引入，不需要添加后缀名，所以在资源目录下，不允许出现相同命名文件的资源，因为编译器不认后缀😶‍🌫️。

2.ImageView

视图属性：layout_margin,padding。就是调整View和其他试图的距离。

margin调整的是框内元素和框的距离，而padding是调整框与父级元素之间的距离。

视图对齐方式：通过设置属性android:layout_gravity指定视图对齐方向。

top、bootom、left、right分别表示朝上、下、左、右。如果希望视图既靠左又靠中间的话就用|连接。

比如：android:layout_gravity="left|center"。

layout_gravity是决定当前视图位于上级视图的哪个方位，而gravity是好决定了下级视图位于当前视图的哪个方位。

视图权重：关于layout_weight的设置：

由于视图有两个方向，即width和height，那么如何知道设置的是哪个方向的权重呢？

所以设置了weight之后，要求layout_width或layout_height填写0dp。（只需要设置一个即可）若是width设置为0dp，就是水平分割线性布局。反之，就为垂直分割线性布局。

ImageView图片视图：

作用就是将图片引入到XML中。

图片这类资源一般放在res/drawable目录下，ImageView通过设置src属性即可引用到图片资源。

举例：

<ImageView
    android:id="@+id/iv_scale"
    android:layout_width="match_parent"
    android:layout_height="220dp"
    android:src="@drawable/apple" />

ImageView默认图片居中显示，且不管图片有多大或有多小，图像视图都会自动缩放图片，使之刚好够着ImageView的边界。这种属性通过android:scaleType定义。默认值为fitCenter。

3.TextView

TextView文本视图，见名知意，就是用来放置文本的。

设置文本内容

通过属性android:text=""设置文本的内容。

比如，以下代码就可以设置文本的内容为"你好，世界！"

<TextView
    android:id="@+id/tv_hello"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="你好，世界！" />

id:就是为了在写逻辑的时候方便取到当前的组件。这里取名为tv_hello。@+id/是固定的格式。

layout_width和layout_height就是当前组件的宽和高，当然你可通过Studio的可视化界面进行拖拽调整，但是这里建议初学者还是多写写代码吧。

wrap_content就是其宽度和高度和原来的内容一致。也就是你文本多高文字多大，它就占相应的空间大小。

同理，match_parent就是和父级的宽度/高度保持一致。

当然你可以选择不在xml中设置text的值，即通过java代码来设置文本的内容。设置方法如下：

// 获取名为tv_hello的文本视图 
TextView tv_hello = findViewById(R.id.tv_hello); 
// 设置tv_hello的文字内容
tv_hello.setText("你好，世界");

java中的方法就不多介绍了，见名知意~

这里的R代表的是resource

注意到直接xml文件中写文字的话，编译器会给提示-should be @string resource，翻译过来就是建议使用来自@string的资源。为了保证资源的通用性，编译器推荐吧字符串放到res/values/string.xml中进行管理。在文件中添加字符串以及name即可：

<resource>
    ...
    <string name="hello">你好，世界！</string>
</resource>

相应的，之前的xml中的text的也需要修改为android:text:@string/hello。

java代码设置则为tv_hello.setText(R.string.hello);

设置文本大小

android:textSize=30sp

字号常见的单位主要有px、dp、sp。具体之间的区别到时候可以写一篇博客比较一下，或者自行百度即可。这里用的sp，因为这个单位可以跟随系统字体大小变化而变化。

设置文本颜色

android:textColor="#00ff00"

同理，和文本内容一样，可以在res/values/colors.xml中定义颜色

<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="green">#00ff00</color>
</resources>

在引用时改为android:textColor=@color/green。

4.Button

按钮控件是由TextView派生而来，因此也具有文本内容。大小、颜色等，但是不同的是Button有默认的按钮背景。Button内部文本默认居中对齐，TextView内部文本默认靠左对齐。

对于Button来说，不论text属性设置的是大写字母还是小写字母，按钮控件默认转成大写字母显示。通过过设置属性android:textAllCap="false"则表示不转为大写。

按钮的onClick属性可以设置点击按钮对应触发的功能，对应的逻辑需要用java来实现。

同时显示图像和文本

drawableTop:指定文字上方的图片
drawableBottom:指定文字下方的图片
drawableLeft:指定文字左方的图片
drawableRight:指定文字右方的图片
drawablePadding:指定图片与文字的间距

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_about"
    android:drawablePadding="5dp"
    android:text="图标在左"
    android:textSize="17sp" />

5.EditText

EditText编辑框，即可以输入文本。除了TextView的基本属性之外，还支持以下属性：

inputType:执行输入的文本类型

text:文本
textPassword:文本密码，显示时用原点代替
datetime:时间日期格式
...

hint:指定提示文本的内容
maxLength:指定文本允许输入的最大长度
textColorHint:指定提示文本的颜色

6.CheckBox

CheckBox复选框

复合按钮的继承关系如下图所示：

CheckBox主要有以下属性：

checked：指定按钮的勾选状态，true表示勾选，false则表示未勾选。默认为未勾选。
button：指定左侧勾选图标的图形资源，如果不指定就使用系统的默认图标。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp" >
    <CheckBox
        android:id="@+id/ck_system"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:checked="false"
        android:text="这是系统的CheckBox"
        android:textColor="@color/black" 
        android:textSize="17sp" />
</LinearLayout>

给CheckBox设置监听方法：

// 该页面实现了接口OnCheckedChangeListener，意味着要重写勾选监听器的onCheckedChanged方法 
public class CheckBoxActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener { 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_check_box); 
        // 从布局文件中获取名叫ck_system的复选框     
        CheckBox ck_system = findViewById(R.id.ck_system); 
        // 给ck_custom设置勾选监听器，一旦用户点击复选框，就触发监听器的onCheckedChanged方 法 
        ck_system.setOnCheckedChangeListener(this); 
    } 
    @Override 
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { 
        String desc = String.format("您%s了这个CheckBox", isChecked ? "勾选" : "取 消勾选"); 
        buttonView.setText(desc); 
    } 
}

需要用到的控件都介绍完了，相信你对布局也有了一定的了解接下来就直接分析我们的登录页面就好了。

页面展示与分析

自认为还是“调参”调的挺不错的，页面也还算过得去~

我这里整个登录的页面用了LinearLayout包裹起来了，目的是为了设置margin。(~~为了显得不那么违和。~~

图片的资源都是以@drawble\引入,字体大小这里是在res/values下新建了一个dimen.xml文件，主要用来设置字体和视图宽度、高度。

具体代码如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="common_font_size">17sp</dimen>
    <dimen name="min_font_size">17sp</dimen>
    <dimen name="button_font_size">20sp</dimen>
    <dimen name="common_layout_height">50dp</dimen>
    <dimen name="common_margin">50dp</dimen>
</resources>

同理strings.xml代码如下：

<resources>
    <string name="app_name">My Application</string>
    <string name="hello">hello</string>
    <string name="title">系统登录</string>
    <string name="login">登录</string>
    <string name="username">用户名:</string>
    <string name="name_hint">请输入用户名</string>
    <string name="password">密码:</string>
    <string name="free_login">一周内免登陆</string>
    <string name="forget_password">忘记密码？</string>
</resources>

系统登录的最上方可以放上自己学校的logo哦，就是ImageView控件啦~。具体实现参照代码嗷。

logo图片放置：

    <!--logo-->
    <ImageView
        android:id="@+id/iv_logo"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:src="@drawable/logo" />

中间的登录框具体设置：

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="483dp"
        android:layout_margin="50dp"
        android:background="@color/white"
        android:orientation="vertical">
    </LinearLayout>

用户名文本框以及输入框:

<!--用户名输入-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:orientation="horizontal">
        <!--用户名-->
        <TextView
            android:layout_width="85dp"
            android:layout_height="match_parent"
            android:drawableLeft="@drawable/user"
            android:gravity="left|center"
            android:text="@string/username"
            android:textColor="@color/black"
            android:textSize="@dimen/common_font_size" />
        <!--输入框-->
        <EditText
            android:id="@+id/username"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:hint="@string/name_hint" 
            android:textColor="@color/black"
            android:textColorHint="@color/grey"
            android:textSize="@dimen/common_font_size" />
    </LinearLayout>

文本用户名前面的小图标是以图片的形式引入，设置<TextView>的属性android:drawableLeft的值设置为drawable路径下的一张图片。

输入框EditText的属性中hint就是输入框提示的文字，textColorHint设置提示文字的颜色，一般设置为灰色。

密码输入和用户名输入的类型相似，这里不单独拿出来展示。

接下来登录按钮:

<!--登录按钮-->
<Button
    android:id="@+id/btn_login"
    android:layout_width="match_parent"
    android:layout_height="65dp"
    android:layout_marginTop="40dp"
    android:shadowColor="@color/black"
    android:text="@string/login"
    android:textSize="@dimen/button_font_size"/>

由于按钮需要设置点击事件的按钮，所以一般情况需要设置一个单独的id，其他的属性就不做介绍了。

免登陆是一个复选框，即CheckBox,其属性onClick是一个函数，需要在Activity中利用代码实现。

<!--一周内免登陆-->
<CheckBox
    android:id="@+id/checkbox_login"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/free_login"
    android:textSize="@dimen/min_font_size"
    android:onClick="freeLoginClicked"/>

忘记密码的实现非常简单，就是一个TextView，设置其字体颜色为蓝色即可。

<!--忘记密码-->
<TextView
   android:id="@+id/forget_pwd"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="right|center"
   android:text="@string/forget_password"
   android:textColor="@color/blue"
   android:textSize="@dimen/min_font_size" />

整体代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/background">
    <!--logo-->
    <ImageView
        android:id="@+id/iv_logo"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:src="@drawable/logo" />
    <!--    中间登录    -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="483dp"
        android:layout_margin="50dp"
        android:background="@color/white"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="40dp"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="@dimen/common_layout_height"
                android:layout_marginTop="30dp"
                android:gravity="center"
                android:text="@string/title"
                android:textColor="@color/black"
                android:textSize="30sp" />
            <!--用户名输入-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="40dp"
                android:orientation="horizontal">
                <!--用户名-->
                <TextView
                    android:layout_width="85dp"
                    android:layout_height="match_parent"
                    android:drawableLeft="@drawable/user"
                    android:gravity="left|center"
                    android:text="@string/username"
                    android:textColor="@color/black"
                    android:textSize="@dimen/common_font_size" />
                <!--输入框-->
                <EditText
                    android:id="@+id/username"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:hint="@string/name_hint" 
                    android:textColor="@color/black"
                    android:textColorHint="@color/grey"
                    android:textSize="@dimen/common_font_size" />
            </LinearLayout>
            <!--密码输入-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="85dp"
                    android:layout_height="match_parent"
                    android:drawableLeft="@drawable/lock"
                    android:gravity="left|center"
                    android:text="@string/password"
                    android:textColor="@color/black"
                    android:textSize="@dimen/common_font_size" />
                <EditText
                    android:id="@+id/password"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:textColor="@color/black"
                    android:textColorHint="@color/grey"
                    android:textSize="@dimen/common_font_size" />
            </LinearLayout>
            <!--登录按钮-->
            <Button
                android:id="@+id/btn_login"
                android:layout_width="match_parent"
                android:layout_height="65dp"
                android:layout_marginTop="40dp"
                android:shadowColor="@color/black"
                android:text="@string/login"
                android:textSize="@dimen/button_font_size"/>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:orientation="horizontal">
                <!--一周内免登陆-->
                <CheckBox
                    android:id="@+id/checkbox_login"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/free_login"
                    android:textSize="@dimen/min_font_size"
                    android:onClick="freeLoginClicked"/>
                <!--忘记密码-->
                <TextView
                    android:id="@+id/forget_pwd"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="right|center"
                    android:text="@string/forget_password"
                    android:textColor="@color/blue"
                    android:textSize="@dimen/min_font_size" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Q：如何让用户名和密码都靠左的，虽然他们的长度不一致？

A：将TextView设置为固定宽度，我这里设置为85dp，~~别问，问就是试出来的。~~ 然后将字体的位置设置为左对齐并居中，即android:gravity="left|center"。

然后用户名和密码前面的小图标其实用的是图片，大小也是自己调整放缩之后放进去的。设置属性android:drawableLeft="@drawable/lock" 即可，lock就是对应的图片名称了。

我是在交了学校的作业之后才写这篇文章的😶‍🌫️，希望老师不要觉得我是抄袭

关于Android开发模拟器

自带的模拟器用了几天之后就已经开始嫌弃了，总是各种奇怪的问题。所以这里推荐一下夜神模拟器。

使用感想：除了有时候需要重启模拟器来让它自动连接到Android Studio外，比Studio自带的模拟器强多了。

当自动连接不起作用的时候直接输入命令连接更奏效嗷~

安装方法

进入下载界面之后无脑安装即可，在设置里面可以选择模拟的机型大小。然后cmd进入到模拟地安装目录，输入一下代码即可连接

E:\SoftWare\Nox\bin>nox_adb.exe connect 127.0.0.1:62001

输入代码前，确保Android studio是打开的。不然连接不上。

Attention Please🎯：

1.文中有些图片的出处源自b站up:动脑学院，有兴趣的可以直接搜.

2.页面设计纯属原创。

3.如果对你有帮助的话，不妨点个赞，你的支持就是是我更文的动力~⛷️⛷️⛷️

「Android」1.简单的登录页面设计