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>