Android開發UI布局之QQ登陸界面練習

一、樣圖

 

 

二、源程序代碼

 

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--QQ登陸UI布局練習-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_marginTop="80dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="30dp">
        <TextView
            android:layout_width="wrap_content"
            android:drawableLeft="@mipmap/ic_launcher"
            android:text="QQ"
            android:textSize="40sp"
            android:layout_height="wrap_content"/>

        <EditText
            android:layout_marginTop="30dp"
            android:layout_width="match_parent"
            android:textSize="30sp"
            android:hint="QQ號碼/手機號/郵箱"
            android:layout_height="wrap_content"/>

        <EditText
            android:layout_width="match_parent"
            android:textSize="30sp"
            android:hint="登陸密碼"
            android:layout_height="wrap_content"/>

        <Button
            android:layout_width="match_parent"
            android:textSize="20dp"
            android:text="登陸"
            android:layout_height="wrap_content"/>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_marginTop="10dp"
                android:layout_width="wrap_content"
                android:textSize="20dp"
                android:text="忘記密碼？"
                android:layout_height="wrap_content"/>
            <TextView
                android:layout_marginTop="10dp"
                android:layout_width="wrap_content"
                android:textSize="20dp"
                android:layout_alignParentRight="true"
                android:text="新用戶注冊"
                android:layout_height="wrap_content"/>
        </RelativeLayout>

    </LinearLayout>
        <TextView
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_marginBottom="40dp"
            android:layout_alignParentBottom="true"
            android:text="登錄即代表閱讀並同意閱讀條款"
            android:layout_height="wrap_content"/>

</RelativeLayout>

 

三、效果圖

 

 

 四、總結心得

　　總體是一個相對布局，其中嵌套這部分的線性布局，其中“忘記密碼”和“新用戶注冊”是通過相對布局來放置的。其中輸入的地方用的是edittext。另外還有需要注意的是圖片導入的時候圖片的存儲形式需要和所用設備的型號所匹配，具體的信息可以在一篇文章中借鑒（轉載）https://www.sunofbeach.net/a/1167623719519117312