Android布局管理器-使用TableLayout表格布局管理器实现简单的用户登录页面

梦里梦外; 2023-10-08 11:33 113阅读 0赞

## 场景 ##

Android布局管理器-使用FrameLayout帧布局管理器显示层叠的正方形以及前景照片：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/103839149][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_103839149]

实现效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

将activity\_main.xml修改为TableLayout

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

然后使用<TabelRow>标签代表添加一行，首行使用

android:paddingTop="200dp">

设置顶部内边距

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

第二行，同理，改为密码输入行，不用再设置内顶边距

第三行添加注册和登录按钮

第四行，添加忘记密码提示

完整示例代码

<?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>

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_103839149]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103839149
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200105150737968.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020010515073858.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70