用Android Studio設計一個簡單個性的登錄界面

一、用到的組件：

LinearLaout、TableLayout、FrameLayout、RelativeLout

二、效果圖展示：

三、步驟及過程：

1.首先新建一個Project，並在app -> res -> layout中新建一個xml文件，文件爲RelativeLout類型，以qqface命名，如下圖：

2.將選好的圖片複製粘貼至app —> res --> drawable中 ；

3.在qqface.xml文件中編輯以下代碼（使用時需要將註釋刪除）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background = "#E6E6E6"
    android:orientation="vertical">
    //設置圖片

    <ImageView
        android:id="@+id/iv"            //圖片id
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerHorizontal="true"   //居中
        android:layout_marginTop="40dp"         //圖片大小
        app:srcCompat="@drawable/head" />      //圖片位置
    
     //關於賬號控件的設置
    <LinearLayout
        android:id="@+id/uer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv"
        android:layout_centerVertical="true"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="5dp"
        android:layout_marginRight="10dp"
        android:background="#ffffff"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/qq_nume"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="賬號："
            android:textSize="25sp"
            android:textColor="#000" />

        <EditText
            android:id="@+id/qq_uer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:background="@null"
            android:padding="10dp"/>

    </LinearLayout>
   //關於密碼控件的設置
   
    <LinearLayout
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/uer"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="#ffffff"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/qq_PW"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="密碼："
            android:textSize="25sp"
            android:textColor="#000" />

        <EditText
            android:id="@+id/qq_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf = "@+id/qq_PW"
            android:layout_marginLeft="5dp"
            android:background="@null"
            android:padding="10dp"
            android:inputType="numberPassword" />

    </LinearLayout>

    //登錄點擊按鈕控件的設置
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="#3C8DC4"
        android:text="登錄"
        android:textColor="#ffffff"
        android:textSize="20sp"/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:textColor="#000"
        android:textSize="20sp"
        android:layout_marginTop="25dp"
        android:layout_below="@+id/button"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"/>

</RelativeLayout>

4.將MainActivitty.java代碼中的R.layout.activity_main改爲R.layout.qqface，如下圖：

到此，一個簡單的登錄界面就做好了。