【Android UI】使用RelativeLayout与TableLayout实现登录界面

简介: 【Android UI】使用RelativeLayout与TableLayout实现登录界面

使用RelativeLayout与TableLayout分别实现两种登录界面,学习RelativeLayout布局


中如何对齐与调整组件相对位置,使用TableLayout实现登录界面,学习如何设置列


的长度,与对齐方式等。


RelativeLayout中使用如下属性调整组件相对位置


layout_alignParentLeft :表示组件左对齐布局


layout_alignParentRight:表示组件有对齐布局


layout_below="@+id/edit1":表示组件在edit1组件下面


layout_toRightOf="@+id/edit1":表示组件放在edit1的右边

效果图:

TableLayout实现效果:

RelatvieLayout实现登录的XML文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/RelativeLayout01"
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent">
  <TextView android:layout_height="wrap_content" 
    android:id="@+id/textView1"
    android:layout_width="wrap_content" 
    android:text="用户名:"
    android:layout_marginLeft="5dp"
    android:textColor="@color/green"
    android:layout_marginRight="5dp"
    android:layout_alignParentLeft="true">
  </TextView>
  <EditText android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:layout_toRightOf="@+id/textView1" 
    android:id="@+id/editText1">
  </EditText>
  <TextView android:layout_height="wrap_content" 
    android:id="@+id/textView2"
    android:layout_width="wrap_content" 
    android:text="密码:"
    android:layout_marginLeft="5dp"
    android:textColor="@color/green"
    android:layout_marginRight="5dp"
    android:layout_below="@+id/editText1"
    android:layout_alignParentLeft="true">
  </TextView>
  <EditText android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:layout_toRightOf="@+id/textView2" 
    android:id="@+id/editText2"
    android:layout_below="@+id/editText1">
  </EditText>
  <Button android:layout_height="wrap_content" 
    android:text="登录" 
    android:layout_width="wrap_content" 
    android:layout_below="@+id/editText2"
    android:layout_alignParentLeft="true" 
    android:id="@+id/button1">
  </Button>
  <Button android:layout_height="wrap_content" 
    android:text="注册" 
    android:layout_width="wrap_content" 
    android:layout_below="@+id/editText2"
    android:layout_toRightOf="@+id/button1" 
    android:id="@+id/button2">
  </Button>
</RelativeLayout>

TableLayout实现登录的XML文件

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/tableLayout1"
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent">
    <TableRow android:id="@+id/TableRow01">
      <TextView android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:text="帐号"
          android:textColor="@color/green"
          android:layout_marginLeft="5dp"
          android:layout_marginRight="5dp">
      </TextView>
      <EditText android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="1"/>
    </TableRow>
    <TableRow android:id="@+id/TableRow02">
      <TextView android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:text="密码"
          android:textColor="@color/green"
          android:layout_marginLeft="5dp"
          android:layout_marginRight="5dp">
      </TextView>
      <EditText android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="1"/>
    </TableRow>
    <TableRow android:id="@+id/TableRow03"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="right">
      <Button android:id="@+id/login_btn"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="登录"
          android:textColor="@color/green"
          />
      <Button android:id="@+id/register_btn"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="注册"
          android:textColor="@color/green"
          />
    </TableRow>
</TableLayout>
相关文章
|
22天前
|
Android开发 开发者
Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。
【6月更文挑战第26天】Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。要更改主题,首先在该文件中创建新主题,如`MyAppTheme`,覆盖所需属性。然后,在`AndroidManifest.xml`中应用主题至应用或特定Activity。运行时切换主题可通过重新设置并重启Activity实现,或使用`setTheme`和`recreate()`方法。这允许开发者定制界面并与品牌指南匹配,或提供多主题选项。
23 6
|
22天前
|
开发工具 Android开发 开发者
Android `.9.png` 图像是用于UI的可拉伸格式,保持元素清晰度和比例
【6月更文挑战第26天】Android `.9.png` 图像是用于UI的可拉伸格式,保持元素清晰度和比例。通过边上的黑线定义拉伸区域,右下角黑点标识内容区域,适应文本或组件大小变化。常用于按钮、背景等,确保跨屏幕尺寸显示质量。Android SDK 提供`draw9patch.bat`工具来创建和编辑。**
65 6
|
22天前
|
API Android开发 开发者
`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView
【6月更文挑战第26天】`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView。它提供高效的数据视图复用,优化的布局管理,支持多种布局(如线性、网格),并解耦数据、适配器和视图。RecyclerView的灵活性、性能(如局部刷新和动画支持)和扩展性使其成为现代Android开发的首选,特别是在处理大规模数据集时。
28 2
|
23天前
|
Android开发 开发者
Android UI中的Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等。要更改主题
【6月更文挑战第25天】Android UI中的Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等。要更改主题,首先在`styles.xml`中定义新主题,如`MyAppTheme`,然后在`AndroidManifest.xml`中设置`android:theme`。可应用于全局或特定Activity。运行时切换主题需重置Activity,如通过`setTheme()`和`recreate()`方法。这允许开发者定制界面以匹配品牌或用户偏好。
17 2
|
28天前
|
数据库 Android开发 数据安全/隐私保护
在 Android Studio 中结合使用 SQLite 数据库实现简单的注册和登录功能
在 Android Studio 中结合使用 SQLite 数据库实现简单的注册和登录功能
70 2
|
1月前
|
编解码 安全 Android开发
探索iOS与Android开发的差异:从界面到性能
【6月更文挑战第10天】在移动应用开发的广阔天地中,iOS和Android两大平台各占山头,它们在设计理念、用户体验、性能优化等方面展现出独特的魅力。本文将深入探讨这两大系统在开发过程中的主要差异,从用户界面设计到性能调优,揭示各自背后的技术逻辑与创新策略,为开发者提供全面的视角和实用的开发指南。
|
15天前
|
Android开发 索引
Android流布局实现筛选界面
Android流布局实现筛选界面
15 0
|
20天前
|
Android开发 开发者
深入了解 Android 中的 RelativeLayout 布局
深入了解 Android 中的 RelativeLayout 布局
13 0
|
1月前
|
存储 数据库 Android开发
在 Android Studio 中结合使用 SQLite 数据库实现简单的注册和登录功能
在 Android Studio 中结合使用 SQLite 数据库实现简单的注册和登录功能
23 0
|
JSON 数据格式 开发工具
Android+struts2+json方式模拟手机登录功能
<p style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px"> 涉及到的知识点: </p> <p style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px"> 1.Struts2
2017 0