• 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);
        }
    }
  • 相关阅读:
    文件比较运算符
    中山慧海人才市场9月份 现场招聘会预告
    80后智能科技公司诚聘业务人员
    元豪路灯厂诚聘
    对Discuz的简单认识
    discuz阅读权限的设置作用
    个人对织梦系统的认识
    awvs的用法
    cain使用方法
    CCNA笔记(1)
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/7441222.html
Copyright © 2020-2023  润新知