Android实现滑动图片(ViewPager)学习之一：布局

最新推荐文章于 2021-05-29 04:39:43 发布

神奇的老王

最新推荐文章于 2021-05-29 04:39:43 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android 漫漫Android路文章标签： android 布局滑动图片 ViewPager

本文链接：https://blog.youkuaiyun.com/xiapinnong/article/details/22306239

Android 同时被 2 个专栏收录

22 篇文章

订阅专栏

漫漫Android路

15 篇文章

订阅专栏

这篇博客详细解读了一个Android滑动图片的布局实现，涉及LinearLayout、RelativeLayout和FrameLayout的使用。LinearLayout提供水平和垂直布局，RelativeLayout依赖于其他控件定位，而FrameLayout则允许控件叠加。布局示例中，外层是垂直LinearLayout，包含一个RelativeLayout（用于标题栏）和一个FrameLayout（内含ViewPager和底部控件）。ViewPager占据整个FrameLayout显示滑动图片，底部是LinearLayout，展示文本和控制按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们来解读一下布局文件，这个布局文件对于初学来说是个相对比较复杂的布局

在这个布局文件中主要用到了三种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>