用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，如下图：

到此，一个简单的登录界面就做好了。