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>