Android 自定义小图查看大图

实现这一功能方法是使用ViewPager来实现的,支持左右滑动、双击变大或变小、返回退出预览、当前查看到第几张、一共几张等功能,功能先简要描述这么多,下面来看下效果图,效果图是最直接的是吧

图片列表
查看第二张
查看第九张

双击放大第九张
效果图呢大概就是这样,下面我们说一下怎么实现的。没有代码相信也很少人来看你的博客,那么我们直接上代码
1、activity布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.android.infantschool.ui.imageloader.PhotoViewPager
        android:id="@+id/vpGallery"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#151920" />

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="30dp"
        android:gravity="center"
        android:textColor="@color/write"
        android:textSize="16sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:layout_marginBottom="30dp"
        android:gravity="center">

        <ImageView
            android:id="@+id/img_dismess"
            android:layout_width="50dp"
            android:padding="10dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:src="@mipmap/icon_filed" />
    </LinearLayout>
</FrameLayout>
     界面上关闭按钮的X素材我就不上传了,那个是在阿里矢量图库里面找的一张图片,大家也可以去下载一张自己喜欢的关闭按钮素材复制过去

2、PhotoViewPager.java

public class PhotoViewPager extends ViewPager {

    public PhotoViewPager(Context context) {
        super(context);
    }

    public PhotoViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        try {
            return super.onInterceptTouchEvent(ev);
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
            return false;
        }
    }
}

3、ImageAdapter.java

public class ImageAdapter extends PagerAdapter {
    public static final String TAG = ImageAdapter.class.getSimpleName();
    private List<String> imageUrls;
    private Activity activity;

    public ImageAdapter(List<String> imageUrls, Activity activity) {
        this.imageUrls = imageUrls;
        this.activity = activity;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        String url = imageUrls.get(position);
        PhotoView photoView = new PhotoView(activity);
        photoView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        Glide.with(activity)
                .load(url)
                .into(photoView);
        container.addView(photoView);
        return photoView;
    }

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

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

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

    @Override
    public int getItemPosition(Object object) {
        return POSITION_NONE;
    }
}

4、ImageActivity.java

public class ImageActivity extends BaseActivity {

    private int position;
    private List<String> list;
    @BindView(R.id.tvTitle)
    public TextView tvTitle;
    @BindView(R.id.vpGallery)
    public PhotoViewPager mPhoto;
    @BindView(R.id.img_dismess)
    public ImageView mImgDismess;

    private String title;

    public static Intent newIntent(Context context, int position, List<String> list) {
        Intent intent = new Intent(context, ImageActivity.class);
        intent.putExtra("position", position);
        intent.putExtra("IMG_LIST", (Serializable) list);
        return intent;
    }

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image);
        ButterKnife.bind(this);
        position = getIntent().getIntExtra("position", 0);
        list = getIntent().getStringArrayListExtra("IMG_LIST");
        initView();
    }

    public void initView() {
        title = "%1$d/%2$d";
        mImgDismess.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ImageActivity.this.finish();
            }
        });
        tvTitle.setText(String.format(title, position + 1, list.size()));
        mPhoto.setAdapter(new ImageAdapter(list, ImageActivity.this));
        mPhoto.setCurrentItem(position);
        mPhoto.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int pos) {
                super.onPageSelected(pos);
                position = pos;
                tvTitle.setText(String.format(title, position + 1, list.size()));
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (list != null) {
            list.clear();
        }
    }
}

5、AndroidManifest.xml配置activity

<activity android:name=".ui.activity.ImageActivity" />

6、具体如何使用
在图片列表那个界面

//参数1:上下文,参数2:当前点击的图片的position,参数3:图片列表
startActivity(ImageActivity.newIntent(this, position2, list));

7、最后再配置3个远程仓库

implementation 'com.jakewharton:butterknife:8.8.1'//依赖注解
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
implementation 'com.github.chrisbanes:PhotoView:1.2.6'//查看图
implementation 'com.github.bumptech.glide:glide:3.7.0'//图片加载

致辞就结束了!

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

落魄的Android开发

感谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值