天天看點
傳回

動手學Android之五——布局初步（二）

有些東西堅持下來，幾年後你會發現它的價值

         之前一節講了一些布局的基本知識，這節繼續。

         Android中的布局種類還是比較豐富多彩的，為了體驗一下各種布局，我們新開一個工程：ManyLayout。我們先弄出一個MainActivity，在裡面放一個Button，給Button綁定一個Listener，這些都是之前的，應該很熟了吧。

         然後我們再建立一個TestLinearActivity的Activity，給它一個testlinear.xml的布局檔案，下面我們要做一件事情，就是點選Button後，讓程式跳轉到我們的TestLinearActivity中來。我們在Listener中寫下如下代碼：

Intent intent = new Intent();
intent.setClass(MainActivity.this, TestLinearActivity.class);
startActivity(intent);

稍微解釋下，首先我們申明一個Intent，這個Intent可是android的重頭戲，但是這裡我們先買個官子，不說它，就知道它是在各個元件中傳遞資料的就行，然後我們調用它的setClass方法，将本身Activity的引用傳進去，再把要跳轉的Activity的class傳進去，然後調用startActivity就能實作啦，我們可以試一下，别忘了在AndroidManifest.xml中加入Activity的申明。

<activity
	android:name=".MainActivity"
	android:label="@string/app_name" 
	>
	<intent-filter>
		<action android:name="android.intent.action.MAIN" />
		<category android:name="android.intent.category.LAUNCHER" />
	</intent-filter>
</activity>

<activity
	android:name=".TestLinearActivity"
	android:label="@string/app_name" 
	></activity>

我已經成功了哦，你呢？

         下面我們來重點學習布局了。我們先在布局檔案中寫上：

<?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"
    android:orientation="vertical" >
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:layout_weight="1"
        android:background="@color/red"
        ></LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:layout_weight="1"
        android:background="@color/green"
        ></LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:layout_weight="1"
        android:background="@color/blue"
        ></LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:layout_weight="1"
        android:background="@color/black"
        ></LinearLayout>

</LinearLayout>

         不解釋，先看下結果：

動手學Android之五——布局初步（二）

         哈哈，是不是深切地感受到這就是線性布局呢？線性布局就是這樣按順序排列，這裡面有一個顔色要說下，我在res/values下建立了一個color.xml檔案，内容如下：

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <color name="red">#FF0000</color>
    <color name="green">#00FF00</color>
    <color name="blue">#0000FF</color>
    <color name="black">#000000</color>
</resources>

         是以我們可以引用顔色，下面我們把最後一個LinearLayout改一下：

<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="0dp" 
	android:layout_weight="1"
	android:orientation="horizontal"
	>
	<LinearLayout 
		android:layout_width="0dp"
		android:layout_height="match_parent" 
		android:layout_weight="1"
		android:background="@color/red"></LinearLayout>
	<LinearLayout 
		android:layout_width="0dp"
		android:layout_height="match_parent" 
		android:layout_weight="1"
		android:background="@color/green"></LinearLayout>
	<LinearLayout 
		android:layout_width="0dp"
		android:layout_height="match_parent" 
		android:layout_weight="1"
		android:background="@color/blue"></LinearLayout>
	<LinearLayout 
		android:layout_width="0dp"
		android:layout_height="match_parent" 
		android:layout_weight="1"
		android:background="@color/black"></LinearLayout>
</LinearLayout>

這下我們再來看下：

動手學Android之五——布局初步（二）

看到沒有，最有一列變成了什麼樣？是不是在意料之中，注意我們這裡改變了orientation，在使用LinearLayout的時候，不要忘記指定它的orientation。

         但是東西滿滿地填充了螢幕，我們希望上下左右都留點縫隙，這時我們可以設定父LinearLayout的padding，android:padding="10dp"，看看效果：

動手學Android之五——布局初步（二）

這時候，我們的Linearlayout就不是緊緊地貼着螢幕了，而是有一定間隙，還有一種方法，也能增加間隙，就是margin，但是它是用在子元素中的：android:layout_margin="10dp"，下面是我在第一個LinearLayout中設定margin的效果：

動手學Android之五——布局初步（二）

         請注意margin和padding的差別，padding是設定在父元素中的，讓它的子元素距離它的内邊框有一定距離，而margin是設定在子元素中，讓其他元素距離它的外邊框有一定距離。希望你能夠了解上圖效果的原因。

         下面我們來看看另外一種布局，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"
    android:orientation="vertical" >
    
    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@color/red" 
        ></LinearLayout>
    
    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/green" 
        ></LinearLayout>
    
    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/blue" 
        ></LinearLayout>

</FrameLayout>

         在FrameLayout中，我們有3個不同大小的LinearLayout，猜猜它們會怎麼顯示呢？

動手學Android之五——布局初步（二）

         哈哈，這就是FrameLayout，它會重疊地顯示裡面的子元素。FrameLayout真的很簡單啦，但是還是比較常用的，因為手機上的布局也不一定就很複雜嘛，有時候用FrameLayout還是很管用的。

         下面再來說一說RelativeLayout，相對布局，這可是比較複雜的一種布局了。比如我想弄一個樓梯：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="10dp" >
    
    <LinearLayout
        android:id="@+id/l1"
        android:layout_width="40dp"
        android:layout_height="20dp"
        android:background="@color/red" 
        android:orientation="horizontal"
        ></LinearLayout>
    
    <LinearLayout
        android:id="@+id/l2"
        android:layout_width="40dp"
        android:layout_height="20dp"
        android:background="@color/green" 
        android:orientation="horizontal"
        android:layout_toRightOf="@id/l1"
        android:layout_below="@id/l1"
        ></LinearLayout>
    
    <LinearLayout
        android:id="@+id/l3"
        android:layout_width="40dp"
        android:layout_height="20dp"
        android:background="@color/blue" 
        android:orientation="horizontal"
        android:layout_toRightOf="@id/l2"
        android:layout_below="@id/l2"
        ></LinearLayout>

</RelativeLayout>

         效果如下：

動手學Android之五——布局初步（二）

         這裡我們指定第二個LinearLayout在第一個的右下方，第三個LinearLayout在第二個的右下方，這裡關鍵是android:layout_toRightOf="@id/l1"和android:layout_below="@id/l1"。首先注意，要用相對布局，控件就要指定ID，不然怎麼知道相對誰呢？

         相對布局還有一個對齊的功能，請看：

<LinearLayout
	android:id="@+id/l4"
	android:layout_width="10dp"
	android:layout_height="20dp"
	android:background="@color/red" 
	android:orientation="horizontal"
	android:layout_alignRight="@id/l3"
	android:layout_below="@id/l3"
	></LinearLayout>

<LinearLayout
	android:id="@+id/l5"
	android:layout_width="10dp"
	android:layout_height="20dp"
	android:background="@color/red" 
	android:orientation="horizontal"
	android:layout_alignLeft="@id/l3"
	android:layout_below="@id/l3"
	></LinearLayout>

         效果如下：

動手學Android之五——布局初步（二）

         這裡的關鍵是android:layout_alignLeft="@id/l3"，它指定和某個控件左對齊等等，在相對布局中使用margin還可以控制控件之間距離。

         剛剛說的都是相對布局控件之間位置限制，其實還有子控件與父控件的限制，下面來看一看：

<LinearLayout
	android:id="@+id/l6"
	android:layout_width="10dp"
	android:layout_height="20dp"
	android:background="@color/black" 
	android:orientation="horizontal"
	android:layout_alignParentRight="true"
	android:layout_alignParentTop="true"
	></LinearLayout>

         運作看下效果：

動手學Android之五——布局初步（二）

看到右邊黑色的小塊了吧？這就是l6，但是我們明明是設定靠到右上端，為什麼上面還有一點空白呢？别忘了父控件設定了android:paddingTop="10dp"。還可以居中顯示，我們來看看：

<LinearLayout
	android:id="@+id/l7"
	android:layout_width="10dp"
	android:layout_height="20dp"
	android:background="@color/black" 
	android:orientation="horizontal"
	android:layout_centerHorizontal="true"
	android:layout_alignParentTop="true"
	></LinearLayout>

         效果是：

動手學Android之五——布局初步（二）

看到中間的方塊了吧？這就是android:layout_centerHorizontal="true"的效果了。

其他的一些參數大家自己試試吧，有些東西隻有自己動手試試才能體會到哦！

好了，我們來總結一下：

1、  Activity的跳轉

2、  LinearLayout、FrameLayout和RelativeLayout

3、  嵌套布局

4、  color.xml

5、  margin和padding

這節的例子在：http://download.csdn.net/detail/yeluoxiang/7299357。歡迎大家下載下傳，有什麼問題請大家在評論中回複，非常感謝！

android android開發 android應用
上一篇: Kafka 2.8 移除Zookeeper 叢集搭建
下一篇: 中間表同步方案(全量，增量)

繼續閱讀