[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="https://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="https://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>  

 

 

發佈留言