安卓app開發-05-Android xml布局詳細介紹
- 雖然說有 墨刀，墨客 這些圖形化開發工具來做 Android 的界面設計，但是我們還是離不開要去學習做安卓原生app，學習 xml 布局還是必要的
（1）准備
- 首先我們要了解 android 到底有那些布局，和每個布局類型的區別
- 學習時最好打開 Android Studio 打開 xml 文件對應看一下
- 配置參數的詳細含義不用着急全部理解，放在文章后面，可收藏做查閱【可通過目錄跳轉】
（2）學習目標
- 學習下xml的布局文件具體寫法。這一節我們要繪制如下圖所示的界面
（3）線性布局 LinearLayout
- 線性布局分兩種。一種是水平布局，一種是垂直布局。下面我們根據上圖舉例子
- 上圖代碼：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:layout_height="wrap_content" android:text="@string/note_title"
android:layout_width="wrap_content" android:padding="10dp"></TextView>
<LinearLayout android:layout_height="fill_parent"
android:layout_width="fill_parent" android:layout_weight="1">
<EditText android:id="@+id/EditText02" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="left"
android:hint="@string/edithint"></EditText>
</LinearLayout>
<LinearLayout android:layout_height="fill_parent"
android:layout_width="fill_parent" android:layout_weight="2"
android:gravity="center"
android:orientation="horizontal">
<ImageButton android:id="@+id/ImageButton01" android:layout_width="72dp" android:layout_height="72dp" android:src="@drawable/sketchy_paper_003" android:layout_margin="3dp"></ImageButton> <ImageButton android:id="@+id/ImageButton02" android:layout_width="72dp" android:layout_height="72dp" android:src="@drawable/sketchy_paper_004" android:layout_margin="3dp"></ImageButton> <ImageButton android:id="@+id/ImageButton03" android:layout_width="72dp" android:layout_height="72dp" android:src="@drawable/sketchy_paper_007" android:layout_margin="3dp"></ImageButton> <ImageButton android:id="@+id/ImageButton04" android:layout_width="72dp" android:layout_height="72dp" android:src="@drawable/sketchy_paper_011" android:layout_margin="3dp"></ImageButton> </LinearLayout> </LinearLayout>
- 可以看到，上圖是由三部分組成。在大的LinearLayout從上而下垂直分布着三個內容：TextView，LinearLayout，LinearLayout。所以總體的 LinearLayout 是垂直布局
- 下面我們來看水平布局
- 其實就是上圖中的最下面那個 LinearLayout。四個圖標平行排列。
android:orientation="horizontal"
（4）相對布局 RelativeLayout
- 這個布局相對簡單一點。一般來講利用ADT自己拖放按鈕就可以。基本上可以隨意布局。如下圖所示
- 上圖代碼：
<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Button
android:id="@+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="@+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button1"
android:layout_alignBottom="@+id/button1"
android:layout_alignParentRight="true"
android:layout_marginRight="14dp"
android:text="Button" />
<Button
android:id="@+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button1"
android:layout_centerHorizontal="true"
android:layout_marginTop="97dp"
android:text="Button" />
<Button
android:id="@+id/button4"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/button1"
android:layout_below="@+id/button3"
android:layout_marginTop="89dp"
android:text="Button" />
<Button
android:id="@+id/button5"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/button2"
android:layout_alignTop="@+id/button4"
android:text="Button" />
</RelativeLayout>
- layout_marginBottom是指控件邊以外空下的距離，比如Button1和Button2垂直顯示，將Button1中layout_marginBottom = 10dp，那么Button1與Button2之間將有10dp距離
- 下面這兩句是居左顯示和居右顯示
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" - 【提示】：相對視圖應該是最有用的，具體的操作比較復雜，更多的是通過圖形界面拖拉，再用代碼微調
（5）幀布局 FrameLayout
- 這個布局很簡單，而且感覺有點二二的，哈哈！就是控件一個挨一個在左上角羅列
- 上圖代碼：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="@+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_width="126dp"
android:layout_height="135dp"
android:text="Button" />
<Button
android:id="@+id/button3"
android:layout_width="194dp"
android:layout_height="232dp"
android:text="Button" />
</FrameLayout>
（6）絕對布局 AbsoluteLayout
- 絕對布局比較容易使用，就是以左上方為原點建立坐標系。每個控件用layout_x和layout_y表示位置。但是據說這種布局比較剛性，不容易適配各種終端，所以要慎用！
- 上圖代碼：
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="44dp"
android:layout_y="18dp"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="122dp"
android:layout_y="173dp"
android:text="Button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="36dp"
android:layout_y="133dp"
android:text="Button" />
</AbsoluteLayout>
（7）表格布局 TableLayout
- TableLayout有點像一個表格或是矩陣。在布局中加入TableRow，它的屬性是horizontal所以每個TableRow只能橫放。它里面的每個控件的高都是一樣的。下圖所示，是加入了一個TableRow和里面的控件
- 上圖代碼：
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="@+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button4"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</TableRow>
</TableLayout>
xml 配置參數大全
-
第一類:屬性值為true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相對於父元素完全居中
android:layout_alignParentBottom 貼緊父元素的下邊緣
android:layout_alignParentLeft 貼緊父元素的左邊緣
android:layout_alignParentRight 貼緊父元素的右邊緣
android:layout_alignParentTop 貼緊父元素的上邊緣
android:layout_alignWithParentIfMissing 如果對應的兄弟元素找不到的話就以父元素做參照物 -
第二類：屬性值必須為id的引用名
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左邊
android:layout_toRightOf 在某元素的右邊
android:layout_alignTop 本元素的上邊緣和某元素的的上邊緣對齊
android:layout_alignLeft 本元素的左邊緣和某元素的的左邊緣對齊
android:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對齊
android:layout_alignRight 本元素的右邊緣和某元素的的右邊緣對齊 -
第三類：屬性值為具體的像素值，如30dip，40px
android:layout_marginBottom 離某元素底邊緣的距離
android:layout_marginLeft 離某元素左邊緣的距離
android:layout_marginRight 離某元素右邊緣的距離
android:layout_marginTop 離某元素上邊緣的距離
EditText的android:hint 設置EditText為空時輸入框內的提示信息。
android:gravity
android:gravity屬性是對該view 內容的限定．比如一個button 上面的text. 你可以設置該text 在view的靠左，靠右等位置．以button為例，android:gravity="right"則button上面的文字靠右
android:layout_gravity
android:layout_gravity是用來設置該view相對與起父view 的位置．比如一個button 在linearlayout里，你想把該button放在靠左、靠右等位置就可以通過該屬性設置．以button為例，android:layout_gravity="right"則button靠右
android:scaleType：
android:scaleType是控制圖片如何resized/moved來匹對ImageView的size。ImageView.ScaleType / android:scaleType值的意義區別：
CENTER /center 按圖片的原來size居中顯示，當圖片長/寬超過View的長/寬，則截取圖片的居中部分顯示
CENTER_CROP / centerCrop 按比例擴大圖片的size居中顯示，使得圖片長(寬)等於或大於View的長(寬)
CENTER_INSIDE / centerInside 將圖片的內容完整居中顯示，通過按比例縮小或原來的size使得圖片長/寬等於或小於View的長/寬
FIT_CENTER / fitCenter 把圖片按比例擴大/縮小到View的寬度，居中顯示
FIT_END / fitEnd 把圖片按比例擴大/縮小到View的寬度，顯示在View的下部分位置
FIT_START / fitStart 把圖片按比例擴大/縮小到View的寬度，顯示在View的上部分位置
FIT_XY / fitXY 把圖片不按比例擴大/縮小到View的大小顯示
MATRIX / matrix 用矩陣來繪制，動態縮小放大圖片來顯示。
** 要注意一點，Drawable文件夾里面的圖片命名是不能大寫的。
android:id 為控件指定相應的ID
android:text 指定控件當中顯示的文字，需要注意的是，這里盡量使用strings.xml文件當中的字符串
android:gravity 指定View組件的對齊方式，比如說居中，居右等位置 這里指的是控件中的文本位置並不是控件本身
android:layout_gravity 指定Container組件的對齊方式．比如一個button 在linearlayout里，你想把該button放在靠左、靠右等位置就可以通過該屬性設置．以button為 例，android:layout_gravity="right"則button靠右
android:textSize 指定控件當中字體的大小
android:background 指定該控件所使用的背景色，RGB命名法
android:width 指定控件的寬度
android:height 指定控件的高度
android:layout_width 指定Container組件的寬度
android:layout_height 指定Container組件的高度
android:layout_weight View中很重要的屬性，按比例划分空間
android:padding* 指定控件的內邊距，也就是說控件當中的內容
android:sigleLine 如果設置為真的話，則控件的內容在同一行中進行顯示
android:scaleType 是控制圖片如何resized/moved來匹對ImageView的siz
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相對於父元素完全居中
android:layout_alignParentBottom 貼緊父元素的下邊緣
android:layout_alignParentLeft 貼緊父元素的左邊緣
android:layout_alignParentRight 貼緊父元素的右邊緣
android:layout_alignParentTop 貼緊父元素的上邊緣
android:layout_alignWithParentIfMissing 如果對應的兄弟元素找不到的話就以父元素做參照物
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左邊
android:layout_toRightOf 在某元素的右邊
android:layout_alignTop 本元素的上邊緣和某元素的的上邊緣對齊
android:layout_alignLeft 本元素的左邊緣和某元素的的左邊緣對齊
android:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對齊
android:layout_alignRight 本元素的右邊緣和某元素的的右邊緣對齊
android:layout_marginBottom 離某元素底邊緣的距離
android:layout_marginLeft 離某元素左邊緣的距離
android:layout_marginRight 離某元素右邊緣的距離
android:layout_marginTop 離某元素上邊緣的距離
android:paddingLeft 本元素內容離本元素右邊緣的距離
android:paddingRight 本元素內容離本元素上邊緣的距離
android:hint 設置EditText為空時輸入框內的提示信息
android:LinearLayout 它確定了LinearLayout的方向，其值可以為vertical，表示垂直布局horizontal， 表示水平布局
android:interpolator
可能有很多人不理解它的用法，文檔里說的也不太清楚，其實很簡單，看下面：interpolator定義一個動畫的變化率（the rate of change）。這使得基本的動畫效果(alpha, scale, translate, rotate）得以加速，減速，重復等。用通俗的一點的話理解就是：動畫的進度使用 Interpolator 控制。interpolator 定義了動畫的變化速度，可以實現勻速、正加速、負加速、無規則變加速等。Interpolator 是基類，封裝了所有 Interpolator 的共同方法，它只有一個方法，即 getInterpolation (float input)，該方法 maps a point on the timeline to a multiplier to be applied to the transformations of an animation。Android 提供了幾個 Interpolator 子類，實現了不同的速度曲線，如下：
AccelerateDecelerateInterpolator 在動畫開始與介紹的地方速率改變比較慢，在中間的時侯加速
AccelerateInterpolator 在動畫開始的地方速率改變比較慢，然后開始加速
CycleInterpolator 動畫循環播放特定的次數，速率改變沿着正弦曲線
DecelerateInterpolator 在動畫開始的地方速率改變比較慢，然后開始減速
LinearInterpolator 在動畫的以均勻的速率改變
對於 LinearInterpolator ，變化率是個常數，即 f (x) = x.
public float getInterpolation(float input) {
return input;
}
Interpolator其他的幾個子類，也都是按照特定的算法，實現了對變化率。還可以定義自己的 Interpolator 子類，實現拋物線、自由落體等物理效果
更多文章鏈接： 安卓app開發
- 本筆記不允許任何個人和組織轉載