用于RecyclerView的GridLayoutManager上的方形布局

Question

我尝试使用方形图像制作网格布局.我认为必须有可能GridLayoutManager通过操纵onMeasure来操纵

super.onMeasure(recycler, state, widthSpec, widthSpec); 

代替

super.onMeasure(recycler, state, widthSpec, heightSpec);

但不幸的是,这没有用.

有任何想法吗？

Answer 1

为了在我的RecyclerView中使用方形元素,我为我的根视图元素提供了一个简单的包装器; 我使用以下SquareRelativeLayout代替RelativeLayout.

package net.simplyadvanced.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.RelativeLayout;

/** A RelativeLayout that will always be square -- same width and height,
 * where the height is based off the width. */
public class SquareRelativeLayout extends RelativeLayout {

    public SquareRelativeLayout(Context context) {
        super(context);
    }

    public SquareRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    @TargetApi(VERSION_CODES.LOLLIPOP)
    public SquareRelativeLayout(Context context, AttributeSet attrs,         int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // Set a square layout.
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }

}

然后,在我的适配器的XML布局中,我刚刚引用了自定义视图,如下所示.不过,您也可以通过编程方式执行此操作.

<?xml version="1.0" encoding="utf-8"?>
<net.simplyadvanced.widget.SquareRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/elementRootView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <!-- More widgets here. -->

</net.simplyadvanced.widget.SquareRelativeLayout>

注意:根据网格的方向,您可能希望宽度基于height(GridLayoutManager.HORIZONTAL)而不是基于width(GridLayoutManager.VERTICAL)的高度.

Answer 2

约束布局解决了这个问题.使用app:layout_constraintDimensionRatio="H,1:1"

recyclerview_grid_layout.xml

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,1:1"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

Answer 3

如果有人想以不同方式扩展视图 - 这是你如何做到的:

private static final double WIDTH_RATIO = 3;
private static final double HEIGHT_RATIO = 4;
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = (int) (HEIGHT_RATIO / WIDTH_RATIO * widthSize);
    int newHeightSpec = MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY);
    super.onMeasure(widthMeasureSpec, newHeightSpec);
}

Answer 4

androidx 的 ConstraintLayout 的一个小更新。

将此行包含到您的 build.gradle 中：

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'

我想获得一个带有 GridLayoutManager 和方形 CardViews 的 RecycleView，并且我对项目使用了这样的布局：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:layout_width="match_parent"  
    android:layout_height="wrap_content"
    android:padding="8dp"
    >

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        card_view:cardElevation="4dp"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        >

关于约束布局

• layout_width=" match_parent " 对于让项目填充 RecyclerView 提供的尽可能多的空间很重要
• layout_height =“ wrap_content ”不让项目填充RecyclerView给出的所有高度，而是使用ConstraintLayout提供的约束高度。就我而言，当我使用 FrameLayout 或 LinearLayout 时，项目是“高”的。

在子节点上，在我的例子中 CardView

• 将大小限制为零很重要：layout_width =“0dp”和layout_height =“0dp”这意味着宽度和高度受到限制
• layout_constraintDimensionRatio ="H,1:1" 可以达到所需的效果，通过设置 H 可以定义要约束的高度 1:1 是比例。

请参阅场外的一些详细解释。

Answer 5

启动API 26(支持库26.0),可以使用公开宽高比属性的ConstraintLayout强制视图平方:https: //developer.android.com/training/constraint-layout/index.htm

android {
    compileSdkVersion 26
    buildToolsVersion '26.0.2'
    ...
}
...
dependencies {
    compile 'com.android.support:appcompat-v7:26.0.2'
    compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1' //use whatever version is current
}

我在GridLayoutManager中使用的布局示例:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/margin_small"
    android:background="@drawable/border_gray"
    android:gravity="center">

    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="h,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <!-- place your content here -->


    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

app:layout_constraintDimensionRatio="h,1:1" 是这里的关键属性