Android實現滑動圖片(ViewPager)學習之一：佈局

首先我們來解讀一下佈局文件，這個佈局文件對於初學來說是個相對比較複雜的佈局

在這個佈局文件中主要用到了三種layout，分別是LinearLayout、RelativeLayout、FrameLayout

簡單說一下，

LinearLayout是一個線性佈局，分爲水平和垂直兩種佈局，這種佈局方式就好像畫直線一樣

RelativeLayout是一個相對佈局，容器中的控件的位置依賴於其它控件或者父控件定位，佈局方式類似於web前端中css+div的佈局方式

FrameLayout佈局方式，有點像漢諾塔，佈局中的控件是一個疊着一個擺放的

 

下面是整個demo運行界面的截圖：

整個界面外層是一個垂直的LinearLayout，嵌套了一個RelativeLayout和一個FrameLayout

 

RelativeLayout主要是實現標題欄的佈局。

在這個佈局中ImageButton是個返回按鈕，緊接着是兩個寬爲1px的view用來繪製分割線，最右邊是一個居中顯示的TextView

 

 

  

FrameLayout中，下層是一個android.support.v4.view.ViewPager控件，這個控件佔滿整個FrameLayout，用於顯示滑動的圖片

上層是一個居下顯示（layout_gravity="bottom"）的LinearLayout用於盛放文本和控制按鈕

在這個LinearLayout中，有兩部分一部分是一個TextView控件，用於顯示文本；在這個控件下又是一個水平的Linearlayout，在這個水平的Linearlayout中並列排放了五個view（控制按鈕）

 

 這就是整個佈局文件的內容，下面附上佈局文件的代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFFFFF"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="40dip"
        android:background="@drawable/title_bk" >

        <ImageButton
            android:id="@+id/btn_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_back_selector"
            android:src="@drawable/btn_back" />

        <View
            android:id="@+id/line0"
            android:layout_width="1px"
            android:layout_height="fill_parent"
            android:layout_toRightOf="@id/btn_back"
            android:background="#aa11264f" />

        <View
            android:layout_width="1px"
            android:layout_height="fill_parent"
            android:layout_toRightOf="@id/line0"
            android:background="#009ad6" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="優酷客戶端"
            android:textColor="#FFFFFF"
            android:textSize="20sp" />
    </RelativeLayout>

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="140dip" >

        <android.support.v4.view.ViewPager
            android:id="@+id/vp"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="35dip"
            android:layout_gravity="bottom"
            android:background="#33000000"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中國家庭院校園區域名字體現"
                android:textColor="#ffffff" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dip"
                android:gravity="center" >

                <View
                    android:id="@+id/v_dot0"
                    style="@style/dot_style"
                    android:background="@drawable/dot_focused" />

                <View
                    android:id="@+id/v_dot1"
                    style="@style/dot_style" />

                <View
                    android:id="@+id/v_dot2"
                    style="@style/dot_style" />

                <View
                    android:id="@+id/v_dot3"
                    style="@style/dot_style" />

                <View
                    android:id="@+id/v_dot4"
                    style="@style/dot_style" />
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>

</LinearLayout>