使用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>

当然这里放上用到的图标
连接手机或模拟器运行可出现效果

欢迎指点一二