将进酒

名不正则言不顺

仿微信点击图片放大,并可滑动浏览效果

前言

  我们在微信朋友圈看别人发的带图片说说时,点击某张图片,会放大全屏显示,并且左右滑动可以切换浏览多张图片。

  这种效果应用场景很多,尤其是购物和餐饮类app很常见。比如点餐软件,一般会向顾客使用列表方式整体展示所有菜品的缩略图、价格、原料、做法、营养功效、食客评价等,由于缩略图提供的直观信息不全不清晰,顾客还可以点击缩略图进一步查看菜品的多张实拍大图,效果就是点击缩略图弹出大图,左右滑动切换图片,屏幕底部小圆点指示当前图片索引,然后点击大图,大图消失会弹回去,回到缩略图界面。

  购物类app如淘宝在用户选择商品时,一般会点击商品缩略图,全屏展示商品多张高清实物图,也可以滑动浏览,点击实物图,又会回到之前页面。

  此时,我们可能会琢磨这种效果该如何实现。其实并不难,使用ViewPager配合Activity一些特性,再加上必要的过渡动画即可完成。

具体实现流程

一、定义一个专门用来显示弹出大图的Activity

  因为图片要全屏展示,所以我们要在onCreate生命周期的方法里加上这样一句

// 设置为全屏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

注意:上面这句代码一定要在setContentView()被调用前执行,否则会报错。

二、Activity布局

  我们需要定义一个ViewPager以及显示在屏幕底部的小圆点指示控件。因为这个小圆点个数是根据页数来确定的,也即根据图片显示个数确定,所以我们需要动态创建,可以先在xml文件里定义好它的父布局,这里我们采用线性布局,根据android:layout_weight属性设定权值,确立图片与小圆点显示比例。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/show_origin_pic_vp"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="18" />

    <LinearLayout
        android:id="@+id/show_origin_pic_dot"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" />

</LinearLayout>

三、 获取所有展示的大图,绘制小圆点

  大图获取涉及到加载网络图片,网上有很多教程,这里就不赘述。

  我们定义一个方法动态绘制圆点,并且监听ViewPager页面切换事件,实现通过改变圆点亮暗色显示指示当前页面索引。

/**
 * 设置圆点
 */
public void setOvalLayout() {
    if(mPageCount <= 0) {
        return;
    }

    mPageDotLl.removeAllViews();
    for (int i = 0; i < mPageCount; i++) {
        mPageDotLl.addView(LayoutInflater.from(this).inflate(R.layout.vp_dot, mPageDotLl, false));
    }
    mPageDotLl.getChildAt(mCurPageIndex).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.shape_circle_white);

    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageSelected(int position) {
            // 取消圆点选中
            mPageDotLl.getChildAt(mCurPageIndex).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.shape_circle_gray);
            // 圆点选中
            mPageDotLl.getChildAt(position).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.shape_circle_white);
            mCurPageIndex = position;
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    });
}

四、页面跳转过渡动画实现

  我们点击缩略图弹出大图,以及点击大图弹回之前页面需要有一个过渡动画,也就是要自定义实现Activity打开和关闭动画。

打开动画activity_zoom_open.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/accelerate_interpolator" >

    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="@android:integer/config_shortAnimTime" />

    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="@android:integer/config_shortAnimTime" />

</set>

关闭动画activity_zoom_close.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/decelerate_interpolator" >

    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="@android:integer/config_shortAnimTime" />

    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:duration="@android:integer/config_shortAnimTime"/>

</set>

在Activity跳转方法里添加打开动画

public static void navigateTo(Activity activity, String imgUrl) {
    Intent intent = new Intent(activity, ShowOriginPicActivity.class);
    intent.putExtra(EXTRA_KEY_ITEM_IMAGE_URL, imgUrl);
    activity.startActivity(intent);
    activity.overridePendingTransition(R.anim.activity_zoom_open, 0);
}

在Activity关闭方法里添加关闭动画

@Override
public void finishShowPic() {
    finish();
    overridePendingTransition(0, R.anim.activity_zoom_close);
}

因为关闭大图操作需要在我们定义的Viewpager适配器ImageAdapter里实现用来显示图片的每一个ImageView监听事件:

iv.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if(mOnFinishCallBack != null) {
            mOnFinishCallBack.finishShowPic();
        }
    }
});

所以我们要在Activity里面implements ImageAdapter.OnFinishCallBack,使用回调接口形式,在创建ImageAdapter对象时实例化mOnFinishCallBack,也即:

imageAdapter.setOnFinishCallBack(this);

五、最终实现效果

这里写图片描述

六、示例代码下载(ZJGallery)

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/johnWcheung/article/details/60881605
个人分类: Android基础 Android UI
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

仿微信点击图片放大,并可滑动浏览效果

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭