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);    }}

　　

　　

　　

　　

Android -- 使用ViewPager實現畫廊效果