UI布局初試three---四種基本布局

wqbendy 8年前發布 | 6K 次閱讀 安卓開發 Android開發 移動開發

  • 版權聲明：歡迎轉載，轉載請注明出處。 如果本文幫助到你，本人不勝榮幸，如果浪費了你的時間，本人深感抱歉。如果有什么錯誤，請一定指出，以免誤導大家、也誤導我。感謝關注。

什么是布局？

布局是一種可以放置很多控件的容器，他可以按照一定的規律調整內部控件的位置，從而編寫出好看的界面。布局的內部也能夠放置布局，形成多層嵌套。

線性布局 LinearLayout

LinearLayout 叫做線性布局,他會將其內部的控件在線性的方向依次排列。 他是按照屬性android:orientation的指定，來決定其子視圖設置為水平還是垂直。

  • horizontal 表示一行 (水平) 默認的值
  • vertical 表示一列 (垂直)

LinearLayout 是布局中的根視圖，因此應將寬度和高度設置為 "match_parent"，從而填滿可供應用使用的整個屏幕區域。

栗子：
    <LinearLayout xmlns:android="


    <Button
        android:layout_gravity="top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:layout_gravity="bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"/>
</LinearLayout></code></pre> 



android:layout_gravity屬性:指定控件在布局中對齊方式，需要根據父視圖的排列方式來指定，比如父視圖對齊方式為vertical，只有在水平方向上的對齊方式才有效
 
  
然后就是LinearLayout的重要屬性---android:layout_weight：一般稱為權重。他是使用比例的方式來指定控件的大小。
 
  
栗子：
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Input someing"/>

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Button"/>
    </LinearLayout>
 
  
首先把width的值指定為0，可以理解成寬度不再受width控制，而由weight來控制，系統會把所有的weight的值加起來，然后按份分配給各個控件。另外，我們也可以只指定其中一部分控件的weight值來實現UI效果。
 
  
相對布局 RelativeLayout
 
  
他可以通過相對定位的方式讓控件出現在布局的任何位置。可以相對與父視圖定位，也可以相對于控件定位
 
  
栗子：
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:text="Button 1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:text="Button2 " />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Button 3" />

    </RelativeLayout>
 
  
android:layout_alignParentLeft：相對于父控件左對齊，其他的依次類推
 
  
android:layout_centerInParent：與父控件的中心對齊
 
  
栗子：
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Button 3"/>

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/btn3"
            android:layout_toLeftOf="@id/btn3"
            android:text="Button 1" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/btn3"
            android:layout_toRightOf="@id/btn3"
            android:text="Button 2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/btn1"
            android:text="Button 4"/>
    </RelativeLayout>
 
  
android:layout_above：讓一個控件位于其指定控件的上方，需要指定相對控件的id，其他的依次類推
 
  
android:layout_toLeftOf：讓一個控件位于其指定控件的左側
 
  
android:layout_alignLeft：讓一個控件的左邊緣與另外一個控件的左邊緣對齊
 
  
這里我們需要注意的是：如果一個控件要引用另外一個控件的id時，該控件一定要定義在引用控件的后面，不然會找不到id。
 
  
幀布局 FrameLayout
 
  
FrameLayout是最簡單的布局了。應用場景相對于前面兩種來說也少了很多。 所有放在布局里的控件，都按照層次堆疊在屏幕的左上角。后加進來的控件覆蓋前面的控件。
 
  
栗子：
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="50sp"
            android:textColor="#ff0000"
            android:text="Text"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />
    </FrameLayout>
 
  
簡而言之，他根本控制不了子控件在其內部的位置
 
  
百分比布局 Percent
 
  
可以不用match_parent或者wrap_content等方式來指定控件的大小， 而是直接指定控件在布局中所占的百分比，可以輕松實現按任意比例分配布局的效果。
 
  
LinearLayout已經可以使用權重來按比例分配控件大小了，所以只需要為FrameLayout和RelativeLayout提供擴展。
 
  
     
   
  • PercentFrameLayout 繼承了FrameLayout的特性
    •  
   
  • PercentRelativeLayout 繼承了RelativeLayout的特性
    •  
  
 
  
百分比布局屬于新增的布局，我們要想使用他，就需要在項目下的build.gradle 文件添加百分比布局庫的依賴。具體就是在dependencies閉包中添加以下內容：
 
  
compile 'com.android.support:percent:24.2.1'
 
  
栗子:
    <android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:layout_gravity="left|top"
            android:text="Button 1"
            app:layout_heightPercent="50%"
            app:layout_widthPercent="50%" />

        <Button
            android:layout_gravity="right|top"
            android:text="Button 2"
            app:layout_heightPercent="50%"
            app:layout_widthPercent="50%" />

        <Button
            android:layout_gravity="left|bottom"
            android:text="Button 3"
            app:layout_heightPercent="50%"
            app:layout_widthPercent="50%" />

        <Button
            android:layout_gravity="right|bottom"
            android:text="Button 4"
            app:layout_heightPercent="50%"
            app:layout_widthPercent="50%" />

    </android.support.percent.PercentFrameLayout>
 
  
由于PercentFrameLayout不是系統內置的布局，所以我們需要寫出完整的路徑，并且給他定義一個app的命名空間。所以我們可以使用app:layout_widthPercent與app:layout_heightPercent來指定控件的寬與高
 
  
好了，對于四種基本布局的基本用法暫時就了解到這里。慢慢用到新的知識再來分享。
 
  
 
 
  
來自：http://www.jianshu.com/p/1bc5383a5e91
 
  
 
 本文由用戶 wqbendy 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！