Android：week 4總結 Android佈局二

目錄

 

 

1.RelativeLayout實現計算器的另一種用法

2.表格佈局（TableLayout） 

---

 

 

1.RelativeLayout實現計算器的另一種用法

用傳統的RelativeLayout實現會出現行尾留出大量的空白。使一行填滿有下面兩種方法：

<!-- 使一行填滿的方法 --> 
<!-- 1.自定義大小進行填充 --> 
<!-- 2.以中心點爲參照 左右展開 -->

<!-- 參照點，不佔用寬度 水平垂直或centerParent-->

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tool="http://schemas.android.com/tools"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        tool:context=".MainActivity">
    <!--        參照點，不佔用寬度  水平垂直或centerParent-->
    <Button
        android:id="@+id/bt10"
        android:layout_width="0sp"
        android:layout_height="0sp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true">
    </Button>
    <Button
        android:id="@+id/bt11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/bt10"
        android:layout_alignBottom="@+id/bt10"
        android:text="8"
        android:textSize="30sp">
    </Button>
    <Button
        android:id="@+id/bt12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignBottom="@id/bt11"
        android:layout_toLeftOf="@id/bt11"
        android:text="7"
        android:textSize="30sp">
    </Button>
    <Button
        android:id="@+id/bt13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/bt10"
        android:layout_alignBottom="@id/bt10"
        android:text="9"
        android:textSize="30sp">
    </Button>
    <Button
        android:id="@+id/bt14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/bt13"
        android:layout_alignBottom="@id/bt23"
        android:layout_alignTop="@id/bt13"
        android:text="-"
        android:textSize="30sp">
    </Button>
<!--    使一行填滿的方法   -->
<!--  1.自定義大小進行填充   -->
<!--  2.以中心點爲參照 左右展開  -->

    <Button
        android:id="@+id/bt21"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/bt12"
        android:layout_alignLeft="@id/bt12"
        android:text="1"
        android:textSize="30sp">
    </Button>
    <Button
        android:id="@+id/bt22"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/bt21"
        android:layout_alignTop="@id/bt21"
        android:text="2"
        android:textSize="30sp">
    </Button>
    <Button
        android:id="@+id/bt23"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/bt22"
        android:layout_toRightOf="@id/bt22"
        android:text="3"
        android:textSize="30sp">
    </Button>
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="100sp"
        android:layout_above="@id/bt12"
        android:layout_alignRight="@id/bt14"
        android:layout_alignLeft="@id/bt12"
        android:gravity="right|center_vertical"
        android:text="24242"
        android:textSize="50sp">
    </EditText>
</RelativeLayout>

2.表格佈局（TableLayout） 

   該佈局中的行由TableRow表示，有多少TableRow就有多少行，表列的個數由包含最多子元素的TableRow所決定。列的寬度也由最大元素決定。  比如，有兩行，第一行有兩個元素，第二行有三個元素，則表列的個數爲3。

   TableRow不需要設置寬度和高度，它的寬度一定是match_parent，它的高度一定是wrap_content，它其中的控件的寬度和高度均爲wrap_content。
   TableRow中的控件在哪一列由android:layout_column指定，該值從0開始，也可以一個元素跨多列，由android:layout_span指定跨列的個數。  只能跨列不能跨行。

屬性名	描述
android:collapseColumns	指定列摺疊起來，在界面上看不到該列
android:shrinkColumns	當本列的定義總長度超出屏幕寬度時，指定列縮減跨度以適應屏幕
android:stretchColumns	當本列的定義總長度不足屏幕寬度時，指定列拉伸以充滿屏幕

<?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:tool="http://schemas.android.com/tools"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:stretchColumns="0,3"

    tool:context=".MainActivity">
<!--  android:stretchColumns="*"  *：表示所有都可以被拉伸；也可以指定特定列被拉伸。  拉伸可以利用剩餘空間 -->
<!-- 編號從0 開始-->
<!--  android:collapseColumns="2"  可隱藏的  -->
    <TableRow>
<!--        空的控件-->
        <TextView
            android:layout_width="wrap_content">
        </TextView>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="姓名: "
            android:textSize="30sp"
            android:background="#ffffff">
        </Button>
        <EditText
            android:layout_width="250sp"
            android:layout_height="wrap_content">
        </EditText>
        <TextView
            android:layout_width="wrap_content">
        </TextView>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="wrap_content">
        </TextView>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="學號: "
            android:textSize="30sp"
            android:background="#ffffff">
        </Button>
        <EditText
            android:layout_width="250sp"
            android:layout_height="wrap_content">
        </EditText>
        <TextView
            android:layout_width="wrap_content">
        </TextView>
    </TableRow>
<!--    列的寬度由最大的決定  -->
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_weight="1">
        </TextView>
        <Button
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:layout_width="0sp"
            android:text="修 改"
            android:textSize="30sp">
        </Button>
        <Button
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:layout_width="0sp"
            android:text="確 定"
            android:textSize="30sp">
        </Button>
        <TextView
            android:layout_weight="1"
            android:layout_width="wrap_content">
        </TextView>
    </TableRow>
</TableLayout>