RecyclerView<第四篇>：高度自适应

很多时候，我们会发现，只要Item里面加入图片就很容易出现图片占满整个屏幕的问题，为了解决这个问题，我将单独拉出一篇文章来讲解。

首先，看一下Recyclerview Item的布局，您可能会发现LinearLayout的高度是“wrap_content”，ImageView的高度也是“wrap_content”，也就是说，这个Item的高度是包裹内容的。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linear"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:scaleType="centerCrop"
        android:layout_gravity="center_horizontal" />

</LinearLayout>

但是，运行效果却是这样的，如图：

65.gif

图片占满整个屏幕了。

如果，您删除android:scaleType="centerCrop"这句话会返现，图片没有占满整个屏幕，如图：

66.gif

那么scaleType是什么呢？为什么会影响图片的Item的高度？

此时，您可能需要了解一下scaleType，请看这篇博客：Android ImageView 的scaleType 属性图解

看完之后，您就会恍然大物语，原来图片占满整个屏幕和图片加载的scaleType有关啊。

有些scaleType需要ImageView容器固定宽高才能设置，比如centerCrop。

scaleType有很多种，根据不同的需求，选择对应的值，本文不关心scaleType哪些数据需要高度自适应，本文关心的是，如果一旦遇到图片全屏的情况，Recyclerview的Item该怎么自适应？

下面开始描述各种解决方案，您可以根据需求自主选择最适合的一个方法。

【方法一】

查了一下网上的资料，有人说设置setAutoMeasureEnabled为true可以解决高度自适应的问题，如果您相信这句话真的就能解决问题的话，那就洗洗睡吧。

图片.png

看到这张截图了吗，在高SDK版本中，setAutoMeasureEnabled已被弃用。

因此，方法一不可取。

【方法二】

比较容易想到的办法就是固定图片高度

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linear"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:visibility="visible"
        android:scaleType="centerCrop"
        android:layout_gravity="center_horizontal" />

</LinearLayout> 

67.gif

如上图，这就是固定图片为300dp的效果，但是Android手机的屏幕大小不一，有些手机的效果看起来有点怪异，那么如果让图片宽高等比，这样不管什么手机效果都很好了吧。

下面，我来写一个自定义ImageView，来实现图片宽高等比的效果。

public class MyImageView extends AppCompatImageView {

    public MyImageView(Context context) {
        this(context, null);
    }

    public MyImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}

为了方便查看效果，左右两边都缩进的100dp

<com.xxx.ooo.recycleview.MyImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="100dp"
    android:layout_marginRight="100dp"
    android:visibility="visible"
    android:scaleType="centerCrop"
    android:layout_gravity="center_horizontal" />

效果如下：

68.gif

自定义ImageView是不是很简单，只需要把

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

改成

        super.onMeasure(widthMeasureSpec, widthMeasureSpec);

即可。

这里需要说明的是，onMeasure是自定义view三大方法之一，onMeasure负责布局的测量工作，所以如果需要调整布局，那么就在这个方法里面调整即可。

【方法三】

固定图片父布局高度同样可以实现。

public class MyLinearLayout extends LinearLayout {
    public MyLinearLayout(Context context) {
        this(context, null);
    }

    public MyLinearLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public MyLinearLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<com.xxx.ooo.recycleview.MyLinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linear"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:scaleType="centerCrop"
        android:layout_gravity="center_horizontal" />

</com.xxx.ooo.recycleview.MyLinearLayout>

效果如下：

69.gif

【方法四】

【方法二】和【方法三】都是在宽度固定的情况计算图片高度的固定值，这些方案其实有其中的缺陷，那么需求要求图片不变形展示该如何做呢？

有一个属性也许需要您了解一下：adjustViewBounds

<ImageView
    android:id="@+id/iv_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"/>

将adjustViewBounds设置为true也许就会达到图片宽度和高度自适应。

以下资料我在网上找的，您可以了解一下：

【Android】ImageView一个值得注意的属性adjustViewBounds

声明：

以上举例暂时就这么多了，具体情况还要看需求，如果大家遇到困难可以给我留言。

[本章完...]