Android開發 UI佈局

Android開發 UI佈局
1、線性佈局LinearLayout
 什麼是線性佈局？
 其實呢，線性佈局就是把全部的孩子擺在同一條線上

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />
</LinearLayout>

線性佈局擺放的方向：咱們能夠經過orientation來修改LinerLayout的佈局的擺放方向，它的值有兩個，一個是horizontal(水平)，另外一個是vertical(豎直)

 

 

 三、線性佈局的權重
  當有些時候，咱們須要平均地給孩子分配寬度或高度，咱們就可使用權重；
  有時候不平均，但點佔的寬或高成比例，咱們也可使用權重。
  android:layout_width="0th"
  android:layout_weight="1"
  將寬度設爲零，權重設爲1，便可平均。
  權重就是把全部的數字加起來，上面的佔的比例就是大小的比例。

  2、相對佈局RelativeLayout
 一、相對佈局相對於父控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="中間" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="右上角" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="左上角" />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="左下角" />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="右下角" />

</RelativeLayout>

 

 

 

 二、相對佈局相對於同級控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/center_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="中間" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/center_button"
        android:text="我在中間的右邊"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@id/center_button"
            android:text="我在中間的左邊"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/center_button"
        android:text="我在中間的上面"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/center_button"
        android:text="我在中間的下面"/>
</RelativeLayout>

 

 3、其它佈局

一、絕對佈局AbsoluteLayout
   依靠x、y控制本身的位置

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="147dp"
        android:layout_y="167dp"
        android:text="Button" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="61dp"
        android:layout_y="279dp"
        android:text="Button" />
</AbsoluteLayout>

 

 

 

 二、表格佈局TableLayout

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
           
            android:text="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="2" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="3" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="4" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="5" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="6" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="7" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="8" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="9" />
    </TableRow>
</TableLayout>

 

三、幀佈局FrameLayout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <View
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:layout_gravity="center"
      android:background="#ff00"
      />
</FrameLayout>

 

 4、佈局中經常使用的單位
一、像素單位px
  像素單位不建議使用，除非是手錶，或者機頂盒

二、適配單位dp
 推薦使用，由於能夠實現適配
 以160dp爲基準，1dp=1px
三、字體單位sp  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <View
        android:layout_width="540px"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="#ff00"
        />
    <View
        android:layout_width="205dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="#00ff00"
        />
</LinearLayout>