如何在Android中实现长图展开与收起效果？

Android实现长图展开与收起效果

背景介绍

在Android应用程序中，经常需要在文章中展示一些特别长的图像（长图），这些长图通常包含大量的信息，用户可能需要滑动很久才能看到图片的全部内容，为了提升用户体验，我们通常只展示长图的一部分，并允许用户通过点击操作来展开或收起图片，本文将详细介绍如何在Android中实现这一功能。

基本思路

实现长图展开与收起的效果，可以通过以下步骤完成：

1、设置ImageView属性：利用scaleType的matrix属性以及直接改变图片的高度来实现图片的收起与展开。

2、使用Glide加载图片：Glide是一个高效的图片加载库，可以方便地加载和显示图片。

3、处理点击事件：通过监听点击事件来切换图片的展开与收起状态。

4、处理宽图问题：对于宽度超过屏幕的图片，需要进行等比例缩放处理。

详细实现步骤

设置ImageView属性

我们需要在布局文件中定义一个ImageView和一个用于展开/收起图片的按钮，以下是一个简单的布局示例：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/iv_long_picture"
        android:layout_width="match_parent"
        android:layout_height="150dp"  <!-初始高度 -->
        android:adjustViewBounds="true"
        android:scaleType="matrix"
        android:src="@color/colorGray"/>
    <TextView
        android:id="@+id/tv_expand_collapse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/iv_long_picture"
        android:layout_marginTop="10dp"
        android:text="展开图片"
        android:textColor="#999"
        android:textSize="14sp"
        android:textStyle="bold"/>
</RelativeLayout>

使用Glide加载图片

在Activity或Fragment中使用Glide加载图片：

import com.bumptech.glide.Glide;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;
import android.view.View;
import android.widget.RelativeLayout;
public class MainActivity extends AppCompatActivity {
    private ImageView ivLongPicture;
    private TextView tvExpandCollapse;
    private boolean isExpanded = false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ivLongPicture = findViewById(R.id.iv_long_picture);
        tvExpandCollapse = findViewById(R.id.tv_expand_collapse);
        // 使用Glide加载图片
        Glide.with(this)
                .load("图片URL")  // 替换为实际图片URL
                .into(ivLongPicture);
        // 设置点击事件
        tvExpandCollapse.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (isExpanded) {
                    collapseImage();
                } else {
                    expandImage();
                }
            }
        });
    }
    private void expandImage() {
        ivLongPicture.getLayoutParams().height = RelativeLayout.LayoutParams.WRAP_CONTENT;
        ivLongPicture.requestLayout();
        tvExpandCollapse.setText("收起图片");
        isExpanded = true;
    }
    private void collapseImage() {
        ivLongPicture.getLayoutParams().height = 150;  // 恢复到初始高度
        ivLongPicture.requestLayout();
        tvExpandCollapse.setText("展开图片");
        isExpanded = false;
    }
}

处理宽图问题

如果原图宽度超过手机屏幕宽度，需要对图片进行等比例缩放，可以在Glide加载图片时进行处理：

import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;
import com.bumptech.glide.load.resource.bitmap.TransformationUtils;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
public class ScaleDownTransformation implements BitmapTransformation {
    private static final String ID = "scale_down_transformation";
    private static final int MAX_WIDTH = 800;  // 最大宽度
    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        int width = toTransform.getWidth();
        int height = toTransform.getHeight();
        float scale = (float) MAX_WIDTH / width;
        int newWidth = Math.round(width * scale);
        int newHeight = Math.round(height * scale);
        Bitmap scaledBitmap = pool.get(newWidth, newHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(scaledBitmap);
        RectF srcRect = new RectF(0, 0, width, height);
        RectF dstRect = new RectF(0, 0, newWidth, newHeight);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        canvas.drawBitmap(toTransform, srcRect, dstRect, paint);
        toTransform.recycle();  // 回收原始位图
        return scaledBitmap;
    }
    @Override
    public String getId() {
        return ID;
    }
}

然后在加载图片时应用这个Transformation：

Glide.with(this)
        .load("图片URL")  // 替换为实际图片URL
        .bitmapTransform(new ScaleDownTransformation())
        .into(ivLongPicture);

通过以上步骤，我们可以在Android应用中实现长图的展开与收起效果，同时处理宽图的显示问题，关键在于合理设置ImageView的属性和使用Glide库高效加载图片，还可以根据具体需求进一步优化，例如添加动画效果、支持多点触控缩放等，希望本文能对你有所帮助，如有更多问题，欢迎交流讨论。

各位小伙伴们，我刚刚为大家分享了有关“Android实现长图展开与收起效果”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！