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

最近在项目中需要实现类似于新浪微博等的“长图”预览效果，即宽度填充屏幕的宽度，高度根据原图的宽高比自动拉伸，然后可以上下滑动查看，并且可以放大缩小。

注意此处长图的定义是：宽度填充屏幕宽度，高度按比例拉伸之后，如果高度大于当前设备屏幕的高度即认为是长图。

实现：采用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

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

猜你喜欢