ViewPager实现Gallery画廊效果——仿慕课网app-求职路线计划-效果（一）

关注

原创最新推荐文章于 2026-06-20 12:34:29 发布 6k 阅读 AI 写同款· GEO 优化 ›

Android ViewPager画廊效果详解及实例 Android ViewPager 画廊效果从上面的图片可以看到，当添加多张图片的时候，能够在下方形成一个画廊的效果，我们左右拉动图片来看我们添加进去的图片，效果是不是好了很多呢？下面来看看怎么实现吧！上面的效果类似Android里面ViewPage的效果，但是跟ViewPager有所不同，ViewPager每次只能显示一张图片。其实我们是利用到了View的clipChildren属性，我们在这里要把ViewPager以及它的父窗体都设置为false，如下: android:clipChildren=”false” 因为如果clipChildren属性设置为true,就表明我们要将ch 立即下载

效果图：

这里写图片描述

大体上就是这个样子，可能不太清楚但是大家知道是什么效果就好啦~
（PS: 图中没有加高斯模糊图，后边我会加上）

下面来分析一下这个布局

底层用一个ImageView 上层用一个定制的ViewPager然后用FramLayout来包裹

代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_bg_pic"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/expert_list_bg_default"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            android:text="求职路线计划"
            android:paddingTop="60dp"
            android:paddingBottom="45dp"
            android:textColor="#fff"
            android:textSize="18sp"/>

        <android.support.v4.view.ViewPager
            android:layout_below="@+id/tv_title"
            android:id="@+id/vp_pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="45dp"
            android:layout_marginRight="45dp"
            android:layout_marginBottom="30dp"
            android:clipChildren="false"/>
    </RelativeLayout>

</FrameLayout>

需要注意:

一屏显示多个ViewPager的子Item 主要是

android:clipChildren="false"

RelativeLayout和ViewPager都要设置否则没有效果。
关于这个问题详情见我另一篇博客
http://blog.youkuaiyun.com/codenoodles/article/details/50991793

那么下步就要写一下viewpager对应的item

先上代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@drawable/shape_bg_item">

    <!-- 设置参照物 -->
    <View
        android:id="@+id/strut"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerVertical="true"/>

    <com.upc.viewpagerGallery.View.RoundImageView
        android:id="@+id/iv_title_pic"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignBottom="@+id/strut"
        android:layout_alignParentTop="true"
        android:src="@drawable/expert_default"
        app:type="round"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignTop="@+id/strut"
        android:layout_below="@+id/iv_title_pic"
        android:background="#fff"
        android:orientation="vertical"
        android:paddingTop="45dp">

        <TextView
            android:id="@+id/tv_exper_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:ellipsize="end"
            android:paddingBottom="30dp"
            android:singleLine="true"
            android:text="Web前端工程师"
            android:textColor="@android:color/black"
            android:textSize="20sp"
            android:typeface="sans"/>

        <View
            android:id="@+id/v_line"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_below="@+id/tv_exper_name"
            android:background="#a000"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/v_line"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:orientation="horizontal"
            android:paddingTop="60dp">

            <TextView
                android:id="@+id/tv_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="388"
                android:textColor="#a000"
                android:textSize="12sp"/>

            <TextView
                android:id="@+id/tv_string"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="人学习"
                android:textColor="#a000"
                android:textSize="12sp"/>
        </LinearLayout>

    </RelativeLayout>
</RelativeLayout>

需要注意的几点：

首先一个ImageView和底部的RelativeLayout平分布局空间。不要问我为啥不直接用LinearLayout的layout_weight我在前面讲圆角布局的时候提到过，没看过的朋友可以先去看一下
http://blog.youkuaiyun.com/codenoodles/article/details/50990646
当然，咱们在item里也用到了圆角布局，还不会写的同学也可以先去上边的链接看一下。
显示职业的TextView和底部的View横线左右对齐，我的处理方式是在activity中根据textView的width动态设置View横线的宽度，后边会讲到。
学习人数的textview和显示”人学习” 的TextView整体居中问题。我用的一个LinearLayout包裹一下。(不要问为啥不用一个TextView，因为实际项目中肯定是从服务器过去数据的)

Activity逻辑

package com.upc.viewpagerGallery.Activity;

import android.annotation.TargetApi;
import android.app.Activity;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.upc.viewpagerGallery.R;

import java.util.LinkedList;

/**
 * Created by Explorer on 2016/3/27.
 */
public class ViewPagerGalleryActivity extends Activity {


    private ViewPager mViewPager;
    private ImageView ivBgPic;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            setTranslucentStatus(true);
            SystemBarTintManager tintManager = new SystemBarTintManager(this);
            tintManager.setStatusBarTintEnabled(true);
            tintManager.setStatusBarTintResource(R.color.statusbar_color);//通知栏所需颜色
        }

        setContentView(R.layout.main_activity);
        initViews();
    }

    @TargetApi(19)
    private void setTranslucentStatus(boolean on) {
        Window win = getWindow();
        WindowManager.LayoutParams winParams = win.getAttributes();
        final int bits = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
        if (on) {
            winParams.flags |= bits;
        } else {
            winParams.flags &= ~bits;
        }
        win.setAttributes(winParams);
    }

    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.vp_pager);
        ivBgPic = (ImageView) findViewById(R.id.iv_bg_pic);
        mViewPager.setOffscreenPageLimit(3);
        mViewPager.setPageTransformer(true, new com.upc.viewpagerGallery.View.ZoomOutPageTransformer());
        mViewPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin));

        MyViewPagerAdapter mAdapter = new MyViewPagerAdapter();
        mViewPager.setAdapter(mAdapter);
        mViewPager.setOffscreenPageLimit(mAdapter.getCount());
    }




    /**
     * Viewpager数据适配器
     */
    class MyViewPagerAdapter extends PagerAdapter {

        //view复用
        private LinkedList<View> mViewCache = null;

        public MyViewPagerAdapter() {
            mViewCache = new LinkedList<>();
        }

        @Override
        public int getCount() {
            return 6;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }


        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ViewHolder holder = null;
            View convertView = null;
            if (mViewCache.size() == 0) {
                convertView = View.inflate(ViewPagerGalleryActivity.this, R.layout.item_viewpager, null);
                holder = new ViewHolder();
                holder.ivPic = (ImageView) convertView.findViewById(R.id.iv_title_pic);
                holder.tvName = (TextView) convertView.findViewById(R.id.tv_exper_name);
                holder.tvNum = (TextView) convertView.findViewById(R.id.tv_num);
                holder.vLine = convertView.findViewById(R.id.v_line);

                convertView.setTag(holder);
            } else {
                convertView = mViewCache.removeFirst();
                holder = (ViewHolder) convertView.getTag();
            }


            holder.ivPic.setImageResource(R.drawable.expert_default);
            holder.tvName.setText("Android工程师");
            holder.tvNum.setText("39179");

            /* 动态设置view 横线 让它和上方的文字等宽*/
            holder.tvName.measure(0, 0);//要先measure一下，否则获得的宽度是0
            int measuredWidth = holder.tvName.getMeasuredWidth();
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(measuredWidth, 1);
            params.addRule(RelativeLayout.BELOW, R.id.tv_exper_name);
            params.addRule(RelativeLayout.CENTER_HORIZONTAL);

            holder.vLine.setLayoutParams(params);


            container.addView(convertView);
            return convertView;
        }


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
            mViewCache.add((View) object);
        }

        //View复用
        public final class ViewHolder {
            public TextView tvName;
            public TextView tvNum;
            public ImageView ivPic;
            public View vLine;
        }
    }
}

说明

用到了沉浸式状态栏，这里不再详细说明，有问题的可以看我另一篇讲沉浸状态栏的博文
http://blog.youkuaiyun.com/codenoodles/article/details/50636425
处理前边说的TextView和View横线等宽的问题，动态设置View的宽度。（实际项目中文字长度肯定是不一样的，所以要这么做）
viewpage数据源。我这里写死了，大家用的话可以自己写数据源。
Adapter中用到了view复用，之后一篇博文我会专门讲。也很简单，大家应该一看就明白。
viewpager的切换动画。详情见
http://blog.youkuaiyun.com/codenoodles/article/details/50991961

现在效果基本上和开始的效果图一样啦~~
先写到这里，之后我做一些调整，加上高斯模糊图再传demo 上来。

考虑了一下，还是先发一个Demo吧

http://download.youkuaiyun.com/detail/codenoodles/9473772

有问题的欢迎留言。推荐一下”Android开发经验交流群”（454430053）(1群满了请加【Android开发经验交流2群(537532956)】)，欢迎大家就加入

收录于