Android學習筆記---布局方式(一)(LinearLayout,AbsoluteLayout,FrameLayout布局)

Android 布局方式學習

一.LinearLayout線性布局:

 

      線性布局是程序中最常見的一種布局方式，線性布局可以分為水平線性布局和垂直線性布局兩種, 通過android:orientation屬性可以設置線性布局的方向

 

   1.在LinearLayout中設置排列方式為水平時只有垂直方向的設置是有效的，水平方向的設置是無效的：即left，right，center_horizontal 是不生效的

   2.在LinearLayout中設置排列方式為垂直時只有水平方向設置是有效的，垂直方向的設置是無效的是無效的：即top，bottom，center_vertical 是無效的；

 布局一源碼：

             android:orientation="vertical" 表示豎直方式對齊  

     android:orientation="horizontal"表示水平方式對齊  
LinearLayout布局方式一布局源碼：

<LinearLayout 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:orientation="vertical"
    tools:context=".LinearLayoutOneActivity" >
    <EditText android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
         <Button android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="登陸"/>
         <Button android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="退出"/>
    </LinearLayout>
</LinearLayout>

效果圖：

3.LinearLayout 布局中 android:gravity：
   該屬性用於控制布局中控件的對齊方式。如果是沒有子控件的控件設置此屬性，表示其內容的對齊方式，比如說TextView里面文字的對齊方式；若是有子控件的控件設置此屬性，則表示其子控件的對齊方式。

4.android: layout_weight
    通過設置控件的layout_weight屬性以控制各個控件在布局中的相對大小。layout_weight屬性是一個非負整數值。線性布局會根據該控件layout_weight值與其所處布局中所有控件layout_weight值之和的比值為該控件分配占用的區域。例如，在水平布局的LinearLayout中有兩個Button，這兩個Button的layout_weight屬性值都為1，那么這兩個按鈕都會被拉伸到整個屏幕寬度的一半。如果layout_weight指為0，控件會按原大小顯示，不會被拉伸；對於其余layout_weight屬性值大於0的控件，系統將會減去layout_weight屬性值為0的控件的寬度或者高度，再用剩余的寬度或高度按相應的比例來分配每一個控件顯示的寬度或高度

LinearLayoutSecond布局顯示圖

布局源碼：

<LinearLayout 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:orientation="vertical"
    tools:context=".LinearLayoutOneActivity" >
    <EditText android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="right">
         <Button android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="登陸"/>
         <Button android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="退出"/>
    </LinearLayout>
    <Button android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ff00ff"
        android:layout_weight="1"
        android:text="Button1"/>
    <Button android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#eeff00"
        android:layout_weight="2"
        android:text="Button2"/>
</LinearLayout>

5.LinearLayout綜合應用 效果圖

布局源碼：

<LinearLayout 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:orientation="vertical"
    tools:context=".LinearLayoutThirdActivity" >
   <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="1">
      <!-- 文本水平垂直居中 -->
      <TextView android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:gravity="center_horizontal|center_vertical"
          android:background="#aa0000"
          android:text="紅色"/>  
         <!-- 水平居中 頂部對齊 -->  
       <TextView android:layout_width="wrap_content"
           android:layout_height="fill_parent"
           android:layout_weight="1"
           android:gravity="top|center_horizontal"
           android:background="#00aa00"
           android:text="綠色"/>
       <!-- 水平居中頂部對齊 -->
       <TextView android:layout_width="wrap_content"
           android:layout_height="fill_parent"
           android:layout_weight="1"
           android:background="#0000aa"
           android:gravity="center_horizontal|bottom"
           android:text="藍色"/>
       <!-- 垂直居中 水平靠左 -->
       <TextView android:layout_width="wrap_content"
           android:layout_height="fill_parent"
           android:background="#aaaa00"
           android:layout_weight="1"
           android:gravity="center_vertical|left"
           android:text="黃色"/>
    </LinearLayout>
    <LinearLayout android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
       
        <Button android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:text="第一行"/>
        <Button android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="第二行"/>
        <Button android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="第三行"/>
        <Button android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="第四行"/>
    </LinearLayout>
</LinearLayout>

二.AbsoluteLayout絕對位置布局：

      指定子控件的xy精確坐標的布局。絕對布局缺乏靈活性，在沒有絕對定位的情況下相比其他類型的布局更難維護。

布局效果圖：

 

布局源碼:

<AbsoluteLayout 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=".AbsoluteLayoutActivity" >
    <EditText android:layout_width="200px"
        android:layout_x="20px"
        android:layout_y="20px"
        android:layout_height="wrap_content"/>
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="70px"
        android:layout_y="100px"
        android:text="登錄"/>
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="150px"
        android:layout_y="100px"
        android:text="退出"/>
</AbsoluteLayout>

三.FrameLayout布局：
 所有添加到這個布局中的視圖都以層疊的方式顯示。第一個添加的組件放到最底層，最后添加到框架中的視圖顯示在最上面。上一層的會覆蓋下一層的控件

java.lang.Object
   ↳ android.view.View
   ↳ android.view.ViewGroup
   ↳ android.widget.FrameLayout

布局效果一:

 

布局源碼:

<FrameLayout 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=".FrameLayoutOneActivity" >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#aa0000"
        android:gravity="right"
        android:text="布局一" />
    <TextView android:layout_width="150px"
        android:layout_height="fill_parent"
        android:background="#00aa00"
        android:gravity="bottom"
        android:text="布局二"/>
    <TextView android:layout_width="190px"
        android:layout_height="300px"
        android:gravity="bottom"
        android:background="#0000aa"
        android:text="布局三"/>

</FrameLayout>

  android:gravity / android:layout_gravity區別：
       android:gravity　是設置該view里面的內容相對於該view的位置，例如設置button里面的text相對於view的靠左，居中等位置。(也可以在Layout布局屬性中添加，設置Layout中組件的位置)
        android:layout_gravity 是用來設置該view相對與父view的位置，例如設置button在layout里面的相對位置：屏幕居中，水平居中等。 即android:gravity用於設置View中內容相對於View組件的對齊方式，而android:layout_gravity用於設置View組件相對於Container的對齊方式。 說的再直白點，就是android:gravity只對該組件內的東西有效，android:layout_gravity只對組件自身有效 

布局效果二：

布局源碼：

<FrameLayout 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=".FrameLayoutSecondActivity" >

    <TextView
        android:layout_gravity="center"
        android:layout_width="230px"
        android:layout_height="230px"
        android:background="#000011" />
    
   <TextView android:layout_gravity="center"
       android:layout_width="190px"
       android:layout_height="190px"
       android:background="#004433"/>
     <TextView android:layout_gravity="center"
       android:layout_width="150px"
       android:layout_height="150px"
       android:background="#00aa00"/>
     <TextView android:layout_gravity="center"
       android:layout_width="110px"
       android:layout_height="110px"
       android:background="#00dd00"/>
</FrameLayout>

本文寫到這里，本人是剛開始寫博客文件，歡迎指出不足之處。

RelativeLayout 和 TableLayout布局方式學習  及其源碼  會在下一篇隨筆中繼續。