使用Android常用控件与布局实现美观的登录页面

使用Android常用控件与布局实现美观的登录页面

编码前介绍：

         使用知识点：EditText、LinearLayout、ImageView、TextView、selector、shape

实现效果：

第一步：新建一个LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
   <!--
   EditText
       layout_width：把宽设置为手机宽度
        layout_height：高设置为文本宽度
        hint：设置提示字符为请输入用户名
        textSize：设置字体大小为22dp
        layout_marginTop：设置外边距Top为10dp
        background：设置背景样式从选择器中获取
    -->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入用户名"
        android:textSize="22dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/et_selector"
        />
    <!--用线性布局把图标与文本装起来，设置外部距调整位置-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="-34dp"
        android:layout_marginLeft="10dp"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/icon_user"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登录名："
            android:textSize="22dp"
            />

    </LinearLayout>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入密码"
        android:textSize="22dp"
        android:inputType="numberPassword"
        android:background="@drawable/et_selector"
        android:layout_marginTop="10dp"
        />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="-34dp"
        android:layout_marginLeft="10dp"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/icon_user"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密码："
            android:textSize="22dp"
            />

    </LinearLayout>
    <!--调整宽度
    设置gravity设置居中-->
    <Button
        android:layout_width="210dp"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:layout_height="wrap_content"
        android:background="@drawable/bt_up_my"
        />
</LinearLayout>

第二步：调换到Project——》再drawable中创建selector.xml

drawable

右键新建Drawable Resource File

两个shape文件与一个selector选择器

et_shape与et_shape2

注意把Root element转化成相对应的file

第三步：编写et_shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--设置弧度-->
    <corners
        android:radius="50dp"
        ></corners>
    <!--设置单一背景颜色-->
    <!--<solid
        android:color="#fcf063"
        ></solid>-->
    <!--设置渐变开始、中间、结束颜色-->
    <gradient
        android:startColor="#c7c675"
        android:centerColor="#d3c729"
        android:endColor="#ff0220"
        ></gradient>
    <!--设置边框宽度等同粗细与颜色-->
    <stroke
            android:width="1dp"
            android:color="#ff0000"
        ></stroke>
    <!--设置内边距
        设置左为140因为会把图标与文本通过位置设置附在上面
    -->
    <padding
            android:left="140dp"
            android:top="10dp"
            android:bottom="10dp"
        ></padding>
</shape>

shape2只用改变你想要的背景颜色和边框就可出现该效果

第四步：编写选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--当文本框聚焦时，调用et_shape，false调用2-->
    <item android:state_focused="true" android:drawable="@drawable/et_shape"></item>
    <item android:state_focused="false" android:drawable="@drawable/et_shape2"></item>
</selector>

当然这里放上用到的图标

连接手机或模拟器运行可出现效果

欢迎指点一二