Android UI系列-----RelativeLayout的相關屬性

本篇隨筆將主要記錄一些RelatieLayout的相關屬性，並將猜拳遊戲通過RelativeLayout實現出來

RelativeLayout的幾組屬性

第一組屬性：android:layout_below, android:layout_above, android:layout_toLeftOf, android:layout_toRightOf

這四個屬性是用在RelativeLayout上的，例如android:layout_below就是將目標控制元件的上邊緣與引用控制元件的下邊緣對齊，android:layout_toRightOf就是將目標控制元件的左邊緣與引用控制元件的右邊緣對齊。

第二組屬性：android:layout_alignTop, android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight, android:layout_alignBaseLine

顧名思義，android:layout_alignTop就表示目標控制元件和引用控制元件的上邊緣對齊，android:layout_alignLeft則表示目標控制元件與引用控制元件的左邊緣對齊，android:layout_alignBaseLine是基於基準線對其，基準線就是我們寫英文字母那4行線的第三條

第三組屬性：layout_alignParentRight, layout_alignParentLeft, layout_alignParentTop, layout_alignParentBottom

這組屬性的值是 true 或者 false，因為每個控制元件的直接父控制元件只有一個，所以用true/false來表示是否與父控制元件的邊緣對齊

第四組屬性：layout_centerInParent, layout_centerVertical, layout_centerHorizontal

這組屬性取值也是true 或者 false，layout_centerInParent表示與父控制元件在水平方向和垂直方向都對齊，處於正中央，layout_centerVertical表示與父控制元件在垂直方向上對其，layout_centerHorizontal表示與父控制元件在水平方向上對齊

第五組屬性：layout_alignStart, layout_alignStop, layout_alignParentStart, layout_alignParentStop

layout_alignStart, layout_alignStop是引用其他控制元件，表示與控制元件的開始位置、結束位置對齊，layout_alignParentStart, layout_alignParentStop取值為true、false，表示與父控制元件的開始，結束位置對齊

我們來看幾個例子，來綜合使用一下上面的幾組屬性：

①

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/firstView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ABCDEF"
        android:text="第一個TextView" />
    <TextView
        android:id="@+id/secondView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/firstView"
        android:background="#FEDCBA"
        android:text="第二個TextView"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/secondView"
        android:layout_alignRight="@id/secondView"
        android:background="#DC000E"
        android:text="TextView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/secondView"
        android:layout_alignTop="@id/secondView"
        android:background="#00AB0E"
        android:text="TextView" />

</RelativeLayout>

②

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="#00FF00">
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ABCDEF"
            android:textSize="30sp"
            android:text="Hello" />
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#EF9087"
            android:layout_toRightOf="@id/textView"
            android:layout_alignBaseline="@id/textView"
            android:text="android"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#AA0088"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:text="java"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:background="#993300"
            android:text="world"/>
    </RelativeLayout>

</RelativeLayout>

③猜拳遊戲的RelativeLayout實現

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <TextView 
        android:id="@+id/textId1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="猜拳遊戲" />
    
    <ImageView 
        android:id="@+id/imageId1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:scaleType="centerCrop"
        android:layout_below="@id/textId1"
        android:layout_toLeftOf="@id/textId1"/>

    <ImageView
        android:id="@+id/imageId2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textId1"
        android:layout_toRightOf="@+id/textId1"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher" />
    
    <RadioGroup 
        android:id="@+id/groupId1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_below="@id/imageId1"
        android:layout_alignLeft="@id/imageId1">
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="石頭"/> 
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="剪子"/> 
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="布"/>        
    </RadioGroup>
    
    <RadioGroup 
        android:id="@+id/groupId2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_below="@id/imageId2"
        android:layout_alignRight="@id/imageId2">
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="石頭"/> 
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="剪子"/> 
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="布"/>
    </RadioGroup>
    
    <Button 
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/groupId1"
        android:text="確定"/>
    
    <TextView
        android:id="@+id/textId2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button"
        android:layout_alignLeft="@id/groupId1"
        android:text="結果"/>

    <TextView
        android:id="@+id/textId3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/textId2"
        android:layout_alignRight="@id/groupId2"
        android:text="測試結果"/>
    
</RelativeLayout>

④簡單的登陸介面

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="15dp">

    <TextView
        android:id="@+id/loginId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="登陸介面" />
    <EditText 
        android:id="@+id/usernameId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/loginId"
        android:hint="username"/>
    <EditText 
        android:id="@+id/passwordId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/usernameId"
        android:layout_alignRight="@id/usernameId"
        android:layout_below="@id/usernameId"
        android:hint="password"
        android:inputType="textPassword"/>

    <Button
        android:id="@+id/cancelId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/passwordId"
        android:layout_below="@id/passwordId"
        android:text="取消" />
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/cancelId"
        android:layout_below="@id/passwordId"
        android:text="登陸"/>

</RelativeLayout>