Android仿QQ空间图片查看(支持缩放)

先来看一下效果图(由于是gif看着有点卡顿,实际效果相当流畅):
在这里插入图片描述

实现思路:图片以Recyclerview瀑布流的形式展示,单击Item后传递图片url跳转到展示图片的Activity,该Activity中是一个ViewPager,ViewPager设置适配器加载布局引用一个photoview布局。

首先引入依赖,我采用的是glide加载图片:

implementation 'com.github.chrisbanes:PhotoView:2.1.3'
implementation 'com.github.bumptech.glide:glide:3.7.0'

单击Item事件就不展示代码了,非常简单。
这是单击后跳转到的Activity代码,给ViewPager设置适配器我直接写成在了setAdapter中,没有独立用个类去写。
java代码:

public class BigImageActivity extends BaseActivity {

    @BindView(R.id.vp_image)
    ViewPager vpImage;
    @BindView(R.id.pv_image)
    PhotoView icon;
    
	//接受Intent传递的参数
    private int position;
    private ArrayList<String> paths;//存放图片url的数组
    private ArrayList<String> title;
    @Override
    public int initLayout() {
        return R.layout.activity_big_image;
    }
    @Override
    public void initView() {
        ButterKnife.bind(this);
        getSupportActionBar().hide();
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);// 设置全屏
        //先接受传递的参数
        Intent intent = getIntent();
        position = intent.getIntExtra("position", 0);
        paths = intent.getStringArrayListExtra("paths");
        title = intent.getStringArrayListExtra("title");

        vpImage.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return paths == null ? 0 : paths.size();
            }
            @Override
            public boolean isViewFromObject(View view, Object o) {
                return view == o;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view = LayoutInflater.from(BigImageActivity.this).inflate(R.layout.vp_style_big, null);
                icon = (PhotoView) view.findViewById(R.id.pv_image);
                TextView tvTitle = view.findViewById(R.id.tv_title);
                TextView tvIndex = view.findViewById(R.id.tv_index);
                icon.setBackgroundColor(getResources().getColor(R.color.Black));
                tvTitle.setText(title.get(position));
                tvIndex.setText((position+1)+"/"+paths.size());
                final String url = paths.get(position);//图片的url
                Glide.with(BigImageActivity.this)
                        .load(paths.get(position))
                        .placeholder(R.mipmap.img_load)//加载等待图
                        .diskCacheStrategy(DiskCacheStrategy.ALL)//缓存模式
                        .into(icon);
                container.addView(view);
                return view;
            }
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((View) object);
            }
        });
        vpImage.setCurrentItem(position, true);
    }

    @Override
    public void initData() {

    }

xml布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_image"
        android:background="#000"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

ViewPager设置适配器时的加载的布局文件:

vp_style_big.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">

    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/pv_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/tv_index"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_30"
        android:layout_below="@id/pv_image"
        android:layout_alignTop="@id/pv_image"
        android:background="#8000"
        android:gravity="center"
        android:textSize="@dimen/dp_15"
        android:textColor="#fff"
        android:padding="@dimen/dp_5"
        />

    <TextView
        android:id="@+id/tv_title"
        android:layout_above="@id/pv_image"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_30"
        android:layout_alignBottom="@id/pv_image"
        android:background="#8000"
        android:textSize="@dimen/dp_15"
        android:textColor="#fff"
        android:padding="@dimen/dp_5"
        />
</RelativeLayout>

加入了显示文本说明和图片索引,这部分逻辑可以适当修改。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值