很多时候,我们会发现,只要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>
但是,运行效果却是这样的,如图:
图片占满整个屏幕了。
如果,您删除android:scaleType="centerCrop"
这句话会返现,图片没有占满整个屏幕,如图:
那么scaleType是什么呢?为什么会影响图片的Item的高度?
此时,您可能需要了解一下scaleType,请看这篇博客:Android ImageView 的scaleType 属性图解
看完之后,您就会恍然大物语,原来图片占满整个屏幕和图片加载的scaleType有关啊。
有些scaleType需要ImageView容器固定宽高才能设置,比如centerCrop。
scaleType有很多种,根据不同的需求,选择对应的值,本文不关心scaleType哪些数据需要高度自适应,本文关心的是,如果一旦遇到图片全屏的情况,Recyclerview的Item该怎么自适应?
下面开始描述各种解决方案,您可以根据需求自主选择最适合的一个方法。
【方法一】
查了一下网上的资料,有人说设置setAutoMeasureEnabled为true可以解决高度自适应的问题,如果您相信这句话真的就能解决问题的话,那就洗洗睡吧。
看到这张截图了吗,在高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>
如上图,这就是固定图片为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" />
效果如下:
自定义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>
效果如下:
【方法四】
【方法二】
和【方法三】
都是在宽度固定的情况计算图片高度的固定值,这些方案其实有其中的缺陷,那么需求要求图片不变形展示该如何做呢?
有一个属性也许需要您了解一下: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
声明:
以上举例暂时就这么多了,具体情况还要看需求,如果大家遇到困难可以给我留言。
[本章完...]