Android登录界面设计

1.页面布局

布局其实很简单，用相对布局累起来就可以了，然后注册和记住密码这两个控件放在一个水平线性布局里

界面底部还设置了第三方登录的入口，可以直接用
大致布局是这样的：

效果图：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background3"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="100dp" >

    <ImageView
        android:id="@+id/iv_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:scaleType="fitCenter"
        android:src="@drawable/logo" />

    <EditText
        android:id="@+id/et_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/iv_1"
        android:layout_marginTop="10dp"
        android:hint="@string/hint_username"
        android:lines="1"
        android:textColor="@color/result_text"
        android:textColorHint="@color/result_text" />

    <EditText
        android:id="@+id/et_cancel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/et_login"
        android:layout_marginTop="10dp"
        android:hint="@string/hint_password"
        android:inputType="textPassword"
        android:lines="1"
        android:textColor="@color/result_text"
        android:textColorHint="@color/result_text" />

    <LinearLayout
        android:id="@+id/ly_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/et_cancel"
        android:orientation="horizontal" >

        <CheckBox
            android:id="@+id/cb_rm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/et_cancel"
            android:layout_gravity="left"
            android:layout_weight="3"
            android:text="@string/checkbox_re"
            android:textColor="@color/result_text" />

        <TextView
            android:id="@+id/btn_register"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/button_cancel"
            android:textColor="@color/result_text"
            android:textSize="14sp" />
    </LinearLayout>

    <Button
        android:id="@+id/btn_login"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/ly_1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="35dp"
        android:background="@drawable/shape"
        android:text="@string/button_confirm"
        android:textColor="@color/result_text" />

    <ImageButton
        android:id="@+id/im_qq"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:scaleType="fitCenter"
        android:src="@drawable/qq" />

    <ImageButton
        android:id="@+id/im_git"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignLeft="@+id/btn_login"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="16dp"
        android:scaleType="fitCenter"
        android:src="@drawable/github" />

    <ImageButton
        android:id="@+id/im_wechat"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/btn_login"
        android:scaleType="fitCenter"
        android:src="@drawable/wechat" />



    <TextView
        android:id="@+id/thirdparty"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/im_qq"
        android:layout_centerHorizontal="true"
        android:text="@string/thirdparty"
        android:textSize="15dp" />


</RelativeLayout>

在drawable文件下创建的shape.xml来设置button样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    //设置圆角
    <corners android:radius="10dp" />
   <!-- //设置颜色 <solid android:color="@color/QQblue"/> -->
   
   <!--    //设置透明
    <solid android:background="@android:color/transparent"/>  -->

    //设置半透明
    <solid android:background="#66FFFF00"/>
     //设置button的大小
    <size
        android:height="60dp"
        android:width="320dp" />
    //设置button的内边距
    <padding android:left="5dp"
        android:right="5dp"
        android:top="5dp"
        android:bottom="5dp"/>
<!-- 连框宽度和颜色值 -->
    <stroke  
        android:width="2dp"  
        android:color="@color/result_text" />  
    
</shape>

参考资料：https://www.cnblogs.com/robotpaul/p/10541585.html
https://blog.csdn.net/WL_Android_HWH/article/details/53861145