Android布局管理器-使用TableLayout表格布局管理器實現簡單的用戶登錄頁面

場景

Android布局管理器-使用FrameLayout幀布局管理器顯示層疊的正方形以及前景照片：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103839149

實現效果如下

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

將activity_main.xml修改為TableLayout

 

 

然后使用<TabelRow>標簽代表添加一行，首行使用

android:paddingTop="200dp">

 

設置頂部內邊距

第一行，添加空的TextView，再添加一個水平居中的TextView和一個EditText

 <TableRow
        android:paddingTop="200dp">
        <TextView/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="賬  號："
            android:textSize="18sp"
            android:gravity="center_horizontal"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="輸入郵箱或手機號"
            />
    </TableRow>

 

第二行，同理，改為密碼輸入行，不用再設置內頂邊距

<TableRow>
        <TextView/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密  碼："
            android:textSize="18sp"
            android:gravity="center_horizontal"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="輸入6-16位數字或字母"
            />
    </TableRow>

 

第三行添加注冊和登錄按鈕

    <TableRow>
        <TextView/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="注  冊"
            />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="登  錄"
            android:background="#FF8247"
            />
    </TableRow>

 

第四行，添加忘記密碼提示

<TableRow
        android:paddingTop="20dp"
        >
        <TextView/>
        <TextView/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FF4500"
            android:text="忘記密碼？"
            android:gravity="right"
            />
        <TextView/>
    </TableRow>

 

完整示例代碼

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TableLayoutActivity">

    <TableRow
        android:paddingTop="200dp">
        <TextView/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="賬  號："
            android:textSize="18sp"
            android:gravity="center_horizontal"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="輸入郵箱或手機號"
            />
    </TableRow>

    <TableRow>
        <TextView/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密  碼："
            android:textSize="18sp"
            android:gravity="center_horizontal"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="輸入6-16位數字或字母"
            />
    </TableRow>

    <TableRow>
        <TextView/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="注  冊"
            />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="登  錄"
            android:background="#FF8247"
            />
    </TableRow>

    <TableRow
        android:paddingTop="20dp"
        >
        <TextView/>
        <TextView/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FF4500"
            android:text="忘記密碼？"
            android:gravity="right"
            />
        <TextView/>
    </TableRow>

</TableLayout>