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>