ConstraintLayout:无法缩放图像以适合RecyclerView中的比例 [英] ConstraintLayout: Unable to scale image to fit a ratio in RecyclerView

问题描述

• 我有一个使用StaggeredGridLayoutManager的回收站视图.
• 我里面有自定义项目/视图.
• 每个项目均被定义为ConstraintLayout，其中存在一幅应该具有恒定长宽比的图像.
• 但是图像仍要能够缩放以适合每个跨度的宽度.
• 然后应根据比例调整高度.

但是图像不能保持长宽比.

以下是用于创建回收站视图的xml文件和代码:

item.xml

 <?xml version ="1.0" encoding ="utf-8"?>< android.support.constraint.ConstraintLayout 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"xmlns:app ="http://schemas.android.com/apk/res-auto"android:padding ="10dp">< ImageViewandroid:id ="@ + id/image"android:layout_width ="0dp"android:layout_height ="0dp"android:adjustViewBounds ="true"android:scaleType ="centerCrop"app:layout_constraintBottom_toBottomOf ="parent"app:layout_constraintLeft_toLeftOf ="parent"app:layout_constraintRight_toRightOf ="parent"app:layout_constraintTop_toTopOf ="parent"app:layout_constraintDimensionRatio ="16:9"工具:src ="@ drawable/ic_logo"/>< TextViewandroid:id ="@ + id/title"android:layout_width ="wrap_content"android:layout_height ="wrap_content"app:layout_constraintLeft_toLeftOf ="parent"app:layout_constraintRight_toRightOf ="parent"app:layout_constraintBottom_toBottomOf ="@ + id/image"android:textColor ="@ color/white"tools:text ="SAMPLE"android:paddingBottom ="10dp"android:layout_margin ="5dp"/></android.support.constraint.ConstraintLayout> 

activity.xml

 < 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"android:layout_margin ="10dp">< android.support.v7.widget.RecyclerViewandroid:id ="@ + id/recycler_view"android:layout_marginTop ="5dp"android:layout_width ="match_parent"android:layout_height ="match_parent"android:layout_alignParentStart ="true"/></RelativeLayout> 

生成整个视图的代码:

  adapter = new SampleAdapter(列表);StaggeredGridLayoutManager管理器=新的StaggeredGridLayoutManager(3，StaggeredGridLayoutManager.VERTICAL);sampleRecyclerView.setLayoutManager(manager);sampleRecyclerView.setAdapter(adapter); 

将每个项目的宽度设置为合适，并适合每个列跨度的宽度.但是高度不能保持并且很小.

有人可以帮忙吗?

谢谢

解决方案

对于您的图像，您可以指定哪个尺寸应与约束条件匹配，而另一个尺寸经调整以满足比率.有关尺寸限制，请参见文档中标题为比率"的部分.a>.

如果两个尺寸都设置为MATCH_CONSTRAINT(0dp)，则也可以使用比率.在这种情况下，系统设置最大尺寸以满足所有约束并保持指定的宽高比.根据另一侧的尺寸来约束另一侧.您可以预先附加W，"或H，以分别约束宽度或高度.例如，如果一个尺寸受两个目标约束(例如，宽度为0dp且以父对象居中)，则可以通过添加来指示应约束哪一侧比率前面的字母W(用于限制宽度)或H(用于限制高度)，以逗号分隔:

 < Button android:layout_width ="0dp"android:layout_height ="0dp"app:layout_constraintDimensionRatio ="H，16:9"app:layout_constraintBottom_toBottomOf ="parent"app:layout_constraintTop_toTopOf ="parent"/> 

因此，在您的情况下，我会尝试 app:layout_constraintDimensionRatio ="H，16:9" .

此外，我认为您不需要 android:scaleType ="centerCrop" 或 adjustViewBounds ，但您必须尝试一下才能看到./p>

• I have a recycler view with StaggeredGridLayoutManager.
• Within in I have custom items/views.
• Each item is defined as a ConstraintLayout where there is an image which is supposed to have a constant aspect ratio.
• But the image is to still be able to scale to fit the width of each span.
• And then the height should be adjusted according to the ratio.

But somehow the images are not maintaining the aspect ratio.

Here are the xml files and code to create the recycler view:

item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="10dp">


    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="16:9"
        tools:src="@drawable/ic_logo" />


    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/image"
        android:textColor="@color/white"
        tools:text="SAMPLE"
        android:paddingBottom="10dp"
        android:layout_margin="5dp"/>

</android.support.constraint.ConstraintLayout>

activity.xml

<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"
    android:layout_margin="10dp">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true" />

</RelativeLayout>

Code to generate the whole view:

adapter = new SampleAdapter(list);
        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
        sampleRecyclerView.setLayoutManager(manager);
        sampleRecyclerView.setAdapter(adapter);

The width of each item is set fine and fits the width of each column span. But the height is not maintained and is very little.

Could someone please help?

Thanks

解决方案

For your image, you can specify which dimension should match constraints while the other dimension is adjusted to satisfy the ratio. See the section entitled "Ratio" in the documentation for Dimensions constraints.

You can also use ratio if both dimensions are set to MATCH_CONSTRAINT (0dp). In this case the system sets the largest dimensions the satisfies all constraints and maintains the aspect ratio specified. To constrain one specific side based on the dimensions of another. You can pre append W," or H, to constrain the width or height respectively. For example, If one dimension is constrained by two targets (e.g. width is 0dp and centered on parent) you can indicate which side should be constrained, by adding the letter W (for constraining the width) or H (for constraining the height) in front of the ratio, separated by a comma:

     <Button android:layout_width="0dp"
               android:layout_height="0dp"
               app:layout_constraintDimensionRatio="H,16:9"
               app:layout_constraintBottom_toBottomOf="parent"
               app:layout_constraintTop_toTopOf="parent"/>

So, in your case, I would try app:layout_constraintDimensionRatio="H,16:9".

In addition, I don't think that you will need android:scaleType="centerCrop" or adjustViewBounds but you will have to try it out to see.

这篇关于ConstraintLayout:无法缩放图像以适合RecyclerView中的比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！