仿新浪微博,qq,微信等的"长图"预览

本文介绍如何使用Glide和PhotoView实现移动端长图预览功能,包括自动填充屏幕宽度并保持图片宽高比,支持上下滑动及缩放操作。
最近在项目中需要实现类似于新浪微博等的“长图”预览效果,即宽度填充屏幕的宽度,高度根据原图的宽高比自动拉伸,然后可以上下滑动查看,并且可以放大缩小。
注意此处长图的定义是:宽度填充屏幕宽度,高度按比例拉伸之后,如果高度大于当前设备屏幕的高度即认为是长图。
实现:采用Glide+PhotoView来实现,代码主要包含两部分,布局文件和activity中设置,如下:
1.布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.admin.mytet.MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content">
        <uk.co.senab.photoview.PhotoView
            android:id="@+id/ivImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:adjustViewBounds="true"
        />
    </ScrollView>
</RelativeLayout>
注意:scaleType和adjustViewBounds属性的设置。
2.activity类:
public class MainActivity extends AppCompatActivity {

    PhotoView ivImage;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ivImage = (PhotoView) findViewById(R.id.ivImage);
        initData();
    }

    private void initData() {
//        Glide.with(this).load("http://p7.qhimg.com/dr/200__/t01de92ee9e0075448c.jpg").asBitmap()
        Glide.with(this).load("https://f10.baidu.com/it/u=3221056985,906277269&fm=72").asBitmap()
                .into(new SimpleTarget<Bitmap>(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL) {
                    @Override
                    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                        // 获取到屏幕的宽度
                        DisplayMetrics dm = new DisplayMetrics();
                        getWindowManager().getDefaultDisplay().getMetrics(dm); // 获取手机屏幕的大小
                        int imageWidth = resource.getWidth(); // 获取到图片的宽度
                        int imageHeight = resource.getHeight(); // 获取到图片的高度
//                    Log.d("test","原始图片的宽度为:"+imageWidth);
//                    Log.d("test","原始图片的高度为:"+imageHeight);
                        ViewGroup.LayoutParams para = ivImage.getLayoutParams();
                        // 动态设置PhotoView的宽高,然后再加载图片
                        para.height = dm.widthPixels / imageWidth * imageHeight;
                        para.width = dm.widthPixels;
                        ivImage.setLayoutParams(para);
                        ivImage.setImageBitmap(resource);
                    }
                });
    }
}

局限性:Glide加载图片,最大高度为4096像素,如果超过该长度可能会不显示或者图片加载模糊,对于此种情况可以看看另外一个大图加载库:subsampling-scale-image-view



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

智玲君

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值