Android -- 使用ViewPager实现画廊效果

1，今天在微信推送文章看到实现画廊效果，感觉挺不错的，就来写写试试，先来看一下效果图：

上面的效果基本上可以用两个功能点来包含：ViewPager的切换动画、ImageView的倒影的实现

嗯，先来将我们主要的功能来实现，就是我们的ViewPager展示图片

主界面的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:clipChildren="false"
    android:layerType="software"
    android:orientation="vertical"
    tools:context="com.qianmo.gallerythreed.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="400dp"
        android:layout_gravity="center"
        android:clipChildren="false"
        >
    </android.support.v4.view.ViewPager>
</LinearLayout>

这里要注意以下 android:clipChildren="false" 这句代码的含义，就是不限制View的布局

自定义适配器，继承于PagerAdapter

package com.qianmo.gallerythreed.adapter;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.List;

/**
 * Created by Administrator on 2016/10/20 0020.
 */
public class MyViewPagerAdapter extends PagerAdapter {
    private List<ImageView> listViews;

    public MyViewPagerAdapter(List<ImageView> listViews) {
        this.listViews = listViews;
    }

    @Override
    public int getCount() {
        return listViews == null ? 0 : listViews.size();
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = listViews.get(position);
        container.addView(imageView);
        return imageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(listViews.get(position));
    }
}

这是最基本的框架，再来了解一下我们PageTransformer这个类 ，它是ViewPager的一个公共成员接口。当然，由于是通过属性动画来设置的，所以设置的pagetransformer在Android3.0以下会被忽略。这里普及一个常识，当我们ViewPager的当前Item在左右滑动的时候其实其position是在【-1,1】这个区间变换的，当View向做滑动时在【-1,0】之间滑动，当View向右滑动时在【0，1】之间变化，所以我们可以自定义PageTransformer类来实现我们滑动的切换动画

package com.qianmo.gallerythreed.pageTransformer;

import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;

/**
 * Created by wangjitao on 2016/10/20 0020.
 * 实现Viewpager的翻页效果
 */
public class GallyPageTransformer implements PageTransformer {
    private static final float min_scale = 0.85f;

    @Override
    public void transformPage(View page, float position) {
        float scaleFactor = Math.max(min_scale, 1 - Math.abs(position));
        float rotate = 20 * Math.abs(position);
        if (position < -1) {

        } else if (position < 0) {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
            page.setRotationY(rotate);
        } else if (position >= 0 && position < 1) {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
            page.setRotationY(-rotate);
        } else if (position >= 1) {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
            page.setRotationY(-rotate);
        }
    }
}

注意 viewpager设置setPageTransformer（）方法一定要在setAdapter（）方法之前，OK，这样的话我们就实现了第一个小的功能，再来实现图片倒影的效果，直接上代码

package com.qianmo.gallerythreed.utils;

/**
 * Created by Administrator on 2016/10/20 0020.
 */

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader;

/**
 * Created by Administrator on 2016/8/20.
 * 图片倒影工具类
 */

public class ImageUtil {
    public static Bitmap getReverseBitmapById(int resId, Context context){
        Bitmap sourceBitmap= BitmapFactory.decodeResource(context.getResources(),resId);
        //绘制原图的下一半图片
        Matrix matrix=new Matrix();
        //倒影翻转
        matrix.setScale(1,-1);

        Bitmap inverseBitmap=Bitmap.createBitmap(sourceBitmap,0,sourceBitmap.getHeight()/2,sourceBitmap.getWidth(),sourceBitmap.getHeight()/3,matrix,false);
        //合成图片
        Bitmap groupbBitmap=Bitmap.createBitmap(sourceBitmap.getWidth(),sourceBitmap.getHeight()+sourceBitmap.getHeight()/3+60,sourceBitmap.getConfig());
        //以合成图片为画布
        Canvas gCanvas=new Canvas(groupbBitmap);
        //将原图和倒影图片画在合成图片上
        gCanvas.drawBitmap(sourceBitmap,0,0,null);
        gCanvas.drawBitmap(inverseBitmap,0,sourceBitmap.getHeight()+50,null);
        //添加遮罩
        Paint paint=new Paint();
        Shader.TileMode tileMode= Shader.TileMode.CLAMP;
        LinearGradient shader=new LinearGradient(0,sourceBitmap.getHeight()+50,0,
                groupbBitmap.getHeight(), Color.BLACK,Color.TRANSPARENT,tileMode);
        paint.setShader(shader);
        //这里取矩形渐变区和图片的交集
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        gCanvas.drawRect(0,sourceBitmap.getHeight()+50,sourceBitmap.getWidth(),groupbBitmap.getHeight(),paint);
        return groupbBitmap;
    }
}

这个倒影的效果真心不推荐  ，一下子我图片就OOM了，这样我们就全都实现了  ，最后贴出MainActivity的代码

package com.qianmo.gallerythreed;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.qianmo.gallerythreed.adapter.MyViewPagerAdapter;
import com.qianmo.gallerythreed.pageTransformer.GallyPageTransformer;
import com.qianmo.gallerythreed.utils.ImageUtil;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private LinearLayout ll_main;
    private List<ImageView> imageViews;
    private int pagerWidth;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        ll_main = (LinearLayout) findViewById(R.id.activity_main);
        initData();

        mViewPager.setOffscreenPageLimit(3);
        pagerWidth = (int) (getResources().getDisplayMetrics().widthPixels * 3.0f / 5.0f);
        ViewGroup.LayoutParams lp = mViewPager.getLayoutParams();
        if (lp == null) {
            lp = new ViewGroup.LayoutParams(pagerWidth, ViewGroup.LayoutParams.MATCH_PARENT);
        } else {
            lp.width = pagerWidth;
        }
        mViewPager.setLayoutParams(lp);
        mViewPager.setPageMargin(-50);
        ll_main.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                return mViewPager.dispatchTouchEvent(motionEvent);
            }
        });
        mViewPager.setPageTransformer(true, new GallyPageTransformer());
        mViewPager.setAdapter(new MyViewPagerAdapter(imageViews));
    }

    private void initData() {
        imageViews = new ArrayList<>();
        ImageView first = new ImageView(MainActivity.this);
        first.setImageBitmap(ImageUtil.getReverseBitmapById(R.mipmap.first, MainActivity.this));
//        first.setImageResource(R.mipmap.first);
        ImageView second = new ImageView(MainActivity.this);
        second.setImageBitmap(ImageUtil.getReverseBitmapById(R.mipmap.second, MainActivity.this));
//        second.setImageResource(R.mipmap.second);
        ImageView third = new ImageView(MainActivity.this);
        third.setImageBitmap(ImageUtil.getReverseBitmapById(R.mipmap.third, MainActivity.this));
//        third.setImageResource(R.mipmap.third);
        ImageView fourth = new ImageView(MainActivity.this);
//        fourth.setImageBitmap(ImageUtil.getReverseBitmapById(R.mipmap.fourth,MainActivity.this));
        fourth.setImageResource(R.mipmap.fourth);
        ImageView fifth = new ImageView(MainActivity.this);
        fifth.setImageBitmap(ImageUtil.getReverseBitmapById(R.mipmap.fifth, MainActivity.this));
//        fifth.setImageResource(R.mipmap.fifth);
        imageViews.add(first);
        imageViews.add(second);
        imageViews.add(third);
        imageViews.add(fourth);
        imageViews.add(fifth);
    }
}

　　

　　

　　

　　

时间： 2024-10-14 04:30:42

Android -- 使用ViewPager实现画廊效果的相关文章

自定义View 之利用ViewPager 实现画廊效果（滑动放大缩小）

自定义View 之利用ViewPager 实现画廊效果(滑动放大缩小) 转载请标明出处: http://blog.csdn.net/lisdye2/article/details/52315008 本文出自:[Alex_MaHao的博客] 项目中的源码已经共享到github,有需要者请移步[Alex_MaHao的github] 基本介绍 画廊在很多的App设计中都有,如下图所示: 该例子是我没事的时候写的一个小项目,具体源码地址请访问https://github.com/AlexSmille/Y

Android照片墙加强版，使用ViewPager实现画廊效果

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/12646775 记得关于照片墙的文章我已经写过好几篇了,有最基本的照片墙,有瀑布流模式的照片墙,后来又在瀑布流的基础之上加入了查看大图和多点触控缩放的功能.总体来说,照片墙这个Demo在这几篇文章的改进中已经变得较为完善了,本想关于这个功能的系列到此为止,但有朋友跟我反应,觉得在查看大图的时候最好能通过左右滑动来浏览前后的图片.恩,确实,好像比较高端的一些应用都有这样的效果,那么本

android自定义ViewPager之——3D效果应用

今天在github里看到一个3D效果的ViewPager,感觉做出来的ViewPager滑动的时候效果十分的炫,就check out下来研究了一下如何实现的,以及如何使用,将整个ViewPager稍加修改后(主要是处理了一下与项目中其它控滑动控件的事件冲突)后,应用到了自己现在项目中.感觉这个效果真的非常的不错,现在把自己写的一个Demo分享出来. 下面是这个ViewPager嵌入到项目中的效果图: 修改以后,在切换ViewPager时会有立体感,会为自己的应用增色不少.下面把使用的Demo发出

android 自定义控件实现3D画廊效果

今天来实现一个3D画廊的效果,这个效果的难点在于计算旋转角度,当然里面会有好几个知识点要讲,针对Paint的2个方法,一个是setShader(),一个是setXfermode(),首先看下大概的效果, 大概是这种,这是我在网上随便找了一个类似的图片,因为我的效果还没写,没关系,这没啥影响,这个效果我准备分开写,然后后面合成起来,上面的效果可以分为如下几步 1:首先是怎么截取一张图片中的一部分 2:怎么把多张图片合成一张图片 3:怎么生成倒影效果, 4:怎么改变倒影中的图片透明度 5:最后一步是

Android 自定义 ViewPager 打造千变万化的图片切换效果

Android 自定义 ViewPager 打造千变万化的图片切换效果 标签: Android自定义ViewPagerJazzyViewPager 目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPa

android 为viewPager增加动画切换效果

在android应用开发中,viewPager可以实现很多炫丽的切换功能,如banner无限广告滚动条.新手引导等都用得到,使用频率不言而喻.依赖谷歌提供的辅助代码,viewPager的切换效果还可以更加出彩,实现过程也相当地简单. 先在浏览器中输入谷歌提供的网址,链接如:http://developer.android.com/training/animation/screen-slide.html ,如不能流畅打开,你最好准备一个翻墙工具,保留备需. 在网站中你可以看到viewPager的一

ScrollView + viewpager实现android的app主界面效果

ScrollView + viewpager实现android的app主界面效果 Android的主界面一般由两部分组成:导航栏,滑动的分屏(我自己这么叫的).其中滑动的分屏肯定是用的fragment,具体的承载的控件是viewpager.而导航分页栏用的控件就有很多了,tabhost,Scrollview或者自定义的都行. 个人认为tabhost和Scrollview都是比较好的,因为后期的可拓展性比较好,除非导航栏界面确实属于"自定义"范畴,基本上我们可以选择这两样就可以了. 其实

Android ：ViewPager+Fragment 实现顶部导航滑动效果

我还不会gif 所以连图表动态 可以滑动的 仔细看底下有滑动条的这是寒假做的一个APP的基本框架 将真啊 虽然效果都做出来了可是学长给了源码啊 所以最近做第二遍!!希望每一个控件都可以实现啊 下面是viewpager+fragment的效果 同样我们先写布局文件 思路就是一个Viewpager适配了五个fragment 底下的选择框是RadioGroup 里面有五个radiobutton activity_main里面就是由这些部分组成的的 代码如下 activity_main: <Linear

androidrecyclerview+GalleryLayoutManager 实现广告画廊效果

相信大家平常在项目中遇到过画廊的效果,网上也有多种方式,类似viewPager.recyclerview等等方式实现,今天推荐一个三方库GalleryLayoutManager,便于快速实现,以解燃眉之急. 依赖 gradle依赖 compile 'github.hellocsl:GalleryLayoutManager:1.0.6' 实现 布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeL