• 酷狗的登入介面
  

• 仿寫的介面

• 佈局程式碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 

    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#0091fc"
        android:gravity="center"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width
 
="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_marginLeft="10dp"
 

                android:src="@mipmap/ico_exit" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登入"
                android:textColor="#fffdff"
                android:textSize="20sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:background="#f7f7f7"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@mipmap/ico_head" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#ffffff"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="賬號"
                android:textColor="#000000"
                android:textSize="15sp" />

            <EditText
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="1"
                android:background="@null"
                android:hint="請輸入銀行卡賬號"
                android:textColorHint="#dadada"
                android:textSize="15sp" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:src="@mipmap/ico_down" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="#dadada" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="密碼"
                android:textColor="#000000"
                android:textSize="15sp" />

            <EditText
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="1"
                android:background="@null"
                android:hint="請輸入銀行卡密碼"
                android:textColorHint="#dadada"
                android:textSize="15sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:text="忘記密碼"
                android:textColor="#0091fc"
                android:textSize="13sp" />
        </LinearLayout>
    </LinearLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:background="#0091fc"
        android:text="登入"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:text="快速註冊"
        android:textColor="#0091fc"
        android:textSize="13sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginTop="180dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:background="#dadada" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="其他登入方式"
            android:textColor="#88858585"
            android:textSize="13sp" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:background="#dadada" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:gravity="center_vertical|center_horizontal"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawablePadding="5dp"
            android:drawableTop="@mipmap/ico_wb"
            android:gravity="center"
            android:text="微博"
            android:textColor="#88000000" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:drawablePadding="5dp"
            android:drawableTop="@mipmap/ico_qq"
            android:gravity="center"
            android:text="QQ"
            android:textColor="#88000000" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:drawablePadding="5dp"
            android:drawableTop="@mipmap/ico_wx"
            android:gravity="center"
            android:text="微信"
            android:textColor="#88000000" />
    </LinearLayout>
</LinearLayout>

LinearLayout常用屬性：
android:orientation:佈局中元件的排列方式，有vertical垂直,horizontal水平兩種

android:gravity:控制元件所包含的子元素的對齊方式

android:layout_weight:控制元件佔父元素的比重

android:layout_width:佈局的寬度

android:layout_height:佈局的高度

android:layout_marginLeft:左邊距

android:layout_marginRight:右邊距

android:layout_marginTop:上邊距 

android:drawableTop:設定圖片在文字的上方

android:background:背景(可以是圖片，也可以是顏色值)