蓝桉云顶

Android实现长图展开与收起

一、基本概念与效果

功能介绍

在Android应用中，长图的展示是一个常见的需求，为了提升用户体验，通常会对长图进行展开和收起的功能设计，这种设计允许用户通过点击按钮或视图区域来控制图片的显示高度，从而在有限的屏幕空间内查看完整的图片内容。

实现目标

默认情况下，只显示长图的一部分。

用户可以通过点击按钮或图片区域将长图完全展开。

再次点击可以收起长图，恢复到初始状态。

二、基本思路与步骤

1. 使用ImageView和Matrix属性

利用ImageView控件的scaleType属性，特别是matrix类型，可以实现图片的局部绘制，当设置adjustViewBounds为true时，ImageView会根据Drawable的实际大小调整自己的边界，这样可以确保图片完整显示而不会被裁剪。

动态改变图片高度

通过修改ImageView的布局参数（LayoutParams），可以动态地改变图片的高度，从而实现展开和收起的效果，可以在点击事件中切换图片的高度值。

三、具体实现

布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/iv_long_picture"
        android:layout_width="match_parent"
        android:layout_height="150dp"  <!-初始高度 -->
        android:layout_below="@id/tv_main_content_question"
        android:adjustViewBounds="true"
        android:scaleType="matrix"
        android:src="@color/color_333333" />
    <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_marginBottom="16dp"
        android:layout_marginTop="10dp"
        android:drawableEnd="@drawable/down_icon"
        android:drawablePadding="7dp"
        android:text="展开全部"
        android:textColor="@color/color_99"
        android:textSize="14sp"
        android:textStyle="bold"
        android:visibility="gone" />
</RelativeLayout>

加载图片

使用Glide库加载图片，并处理不同版本的兼容性问题，对于Glide版本4.0及以上，如果图片宽度超过手机宽度，则会等比例缩小图片以适应屏幕。

Glide.with(this)
    .load(mainContentBean.getAccessory().get(0))
    .into(ivLongPicture);

点击事件

通过设置ImageView的高度来实现图片的展开与收起。

tvExpandCollapse.setOnClickListener(new View.OnClickListener() {
    boolean expanded = false;
    @Override
    public void onClick(View v) {
        if (expanded) {
            // 收起图片
            ViewGroup.LayoutParams params = ivLongPicture.getLayoutParams();
            params.height = DensityUtil.dip2px(MainContentActivity.this, 150); // 恢复初始高度
            ivLongPicture.setLayoutParams(params);
            expanded = false;
            tvExpandCollapse.setText(R.string.expand_all);
            tvExpandCollapse.setCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, R.drawable.down_icon, 0);
            scMainContent.smoothScrollTo(0, 0);
        } else {
            // 展开图片
            ViewGroup.LayoutParams params = ivLongPicture.getLayoutParams();
            params.height = RelativeLayout.LayoutParams.WRAP_CONTENT; // 设置为WRAP_CONTENT以适应内容高度
            ivLongPicture.setLayoutParams(params);
            expanded = true;
            tvExpandCollapse.setText(R.string.collapse_all);
            tvExpandCollapse.setCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, R.drawable.upper_icon, 0);
        }
    }
});

四、注意事项与优化建议

性能考虑：频繁改变视图的高度可能会影响性能，尤其是在大量数据的情况下，可以考虑使用动画过渡效果来平滑高度变化。

用户体验：提供视觉反馈，如按钮图标的变化或加载指示器，让用户知道当前状态。

异常处理：确保代码能够处理可能出现的异常情况，例如图片加载失败或内存不足等问题。

适配不同设备：考虑到不同设备的屏幕尺寸和分辨率差异，可能需要进一步调整布局参数以确保最佳显示效果。

以上内容就是解答有关“Android实现长图展开与收起”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。