固定纵横比视图

Question

我将如何实现固定宽高比View？我希望在 GridView 中包含宽高比为 1:1 的项目。我认为子类化子类比 GridView 更好？

编辑：我认为这需要以编程方式完成，这没问题。另外，我不想限制大小，只想限制宽高比。

Answer 1

我实现了FixedAspectRatioFrameLayout，因此我可以重用它并使任何托管视图具有固定的宽高比：

public class FixedAspectRatioFrameLayout extends FrameLayout
{
    private int mAspectRatioWidth;
    private int mAspectRatioHeight;

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

    public FixedAspectRatioFrameLayout(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        init(context, attrs);
    }

    public FixedAspectRatioFrameLayout(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);

        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs)
    {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.FixedAspectRatioFrameLayout);

        mAspectRatioWidth = a.getInt(R.styleable.FixedAspectRatioFrameLayout_aspectRatioWidth, 4);
        mAspectRatioHeight = a.getInt(R.styleable.FixedAspectRatioFrameLayout_aspectRatioHeight, 3);

        a.recycle();
    }
    // **overrides**

    @Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)
    {
        int originalWidth = MeasureSpec.getSize(widthMeasureSpec);

        int originalHeight = MeasureSpec.getSize(heightMeasureSpec);

        int calculatedHeight = originalWidth * mAspectRatioHeight / mAspectRatioWidth;

        int finalWidth, finalHeight;

        if (calculatedHeight > originalHeight)
        {
            finalWidth = originalHeight * mAspectRatioWidth / mAspectRatioHeight; 
            finalHeight = originalHeight;
        }
        else
        {
            finalWidth = originalWidth;
            finalHeight = calculatedHeight;
        }

        super.onMeasure(
                MeasureSpec.makeMeasureSpec(finalWidth, MeasureSpec.EXACTLY), 
                MeasureSpec.makeMeasureSpec(finalHeight, MeasureSpec.EXACTLY));
    }
}

Answer 2

为了不使用第三方解决方案，并考虑到 PercentFrameLayout 和 PercentRelativeLayout 在 26.0.0 中已被弃用，我建议您考虑使用 ConstraintLayout 作为网格项的根布局。

您的 item_grid.xml 可能如下所示：

<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="wrap_content">

    <ImageView
        android:id="@+id/imageview_item"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintDimensionRatio="H,1:1" />

</android.support.constraint.ConstraintLayout>

因此，您会得到如下所示的内容：

< img src="https://i.sstatic.net/Pbb2E.png" alt="固定比例大小的网格项目">

Answer 3

对于新用户，这里有一个更好的非代码解决方案：

一个名为 的新支持库百分比支持库在Android SDK v22中可用（MinAPI是7，我认为，不确定）：

src：android-developers.blogspot.in< /a>

百分比支持库提供基于百分比的尺寸和边距，并且是此版本的新增功能，能够通过 app:aspectRatio 设置自定义宽高比。通过仅设置单个宽度或高度并使用aspectRatio，PercentFrameLayout或PercentRelativeLayout将自动调整其他尺寸，以便布局使用设置的宽高比。

要包含此内容，请将其添加到您的build.gradle em> ：

compile 'com.android.support:percent:23.1.1'

现在用 PercentRelativeLayout / PercentFrameLayout ：

<android.support.percent.PercentRelativeLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content">
     <ImageView
         app:layout_aspectRatio="100%"
         app:layout_widthPercent="100%"/>
 </android.support.percent.PercentRelativeLayout>

您可以查看示例 这里。

Answer 4

我最近为这个问题创建了一个辅助类，并编写了

代码的主要内容如下：

/**
 * Measure with a specific aspect ratio<br />
 * <br />
 * @param widthMeasureSpec The width <tt>MeasureSpec</tt> passed in your <tt>View.onMeasure()</tt> method
 * @param heightMeasureSpec The height <tt>MeasureSpec</tt> passed in your <tt>View.onMeasure()</tt> method
 * @param aspectRatio The aspect ratio to calculate measurements in respect to 
 */
public void measure(int widthMeasureSpec, int heightMeasureSpec, double aspectRatio) {
    int widthMode = MeasureSpec.getMode( widthMeasureSpec );
    int widthSize = widthMode == MeasureSpec.UNSPECIFIED ? Integer.MAX_VALUE : MeasureSpec.getSize( widthMeasureSpec );
    int heightMode = MeasureSpec.getMode( heightMeasureSpec );
    int heightSize = heightMode == MeasureSpec.UNSPECIFIED ? Integer.MAX_VALUE : MeasureSpec.getSize( heightMeasureSpec );

    if ( heightMode == MeasureSpec.EXACTLY && widthMode == MeasureSpec.EXACTLY ) {
        /* 
         * Possibility 1: Both width and height fixed
         */
        measuredWidth = widthSize;
        measuredHeight = heightSize;

    } else if ( heightMode == MeasureSpec.EXACTLY ) {
        /*
         * Possibility 2: Width dynamic, height fixed
         */
        measuredWidth = (int) Math.min( widthSize, heightSize * aspectRatio );
        measuredHeight = (int) (measuredWidth / aspectRatio);

    } else if ( widthMode == MeasureSpec.EXACTLY ) {
        /*
         * Possibility 3: Width fixed, height dynamic
         */
        measuredHeight = (int) Math.min( heightSize, widthSize / aspectRatio );
        measuredWidth = (int) (measuredHeight * aspectRatio);

    } else {
        /* 
         * Possibility 4: Both width and height dynamic
         */
        if ( widthSize > heightSize * aspectRatio ) {
            measuredHeight = heightSize;
            measuredWidth = (int)( measuredHeight * aspectRatio );
        } else {
            measuredWidth = widthSize;
            measuredHeight = (int) (measuredWidth / aspectRatio);
        }

    }
}

Answer 5

我使用 TalL 的答案创建了一个布局库。请随意使用它。

RatioLayouts

安装

将其添加到文件顶部

repositories {
    maven {
        url  "http://dl.bintray.com/riteshakya037/maven" 
    }
}


dependencies {
    compile 'com.ritesh:ratiolayout:1.0.0'
}

用法

在布局中的根视图上定义“app”命名空间

xmlns:app="http://schemas.android.com/apk/res-auto"

将此库包含在您的布局

<com.ritesh.ratiolayout.RatioRelativeLayout
        android:id="@+id/activity_main_ratio_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fixed_attribute="WIDTH" // Fix one side of the layout 
        app:horizontal_ratio="2" // ratio of 2:3
        app:vertical_ratio="3">

更新

中，引入 ConstraintLayout 您不必编写一行代码或使用第三方或依赖于 26.0.0 中已弃用的 PercentFrameLayout。

以下示例展示了如何使用 ConstraintLayout 保持布局的宽高比为 1:1：

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:layout_marginTop="0dp"
        android:background="@android:color/black"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </LinearLayout>

</android.support.constraint.ConstraintLayout>

Answer 6

我使用并喜欢 Jake Wharton 的 ImageView 实现（其他视图也应该类似），其他人可能也会喜欢它：

AspectRatioImageView.java - 尊重应用于特定测量的宽高比的 ImageView

很好，它可以在 xml 中设置样式 已经。

Answer 7

您可能会找到第三方库。不要使用它们，而是使用约束布局。
下面的代码将 ImageView 的宽高比设置为 16:9，无论屏幕尺寸和方向如何。

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/mat3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintDimensionRatio="H,16:9"/>

</androidx.constraintlayout.widget.ConstraintLayout>

app:layout_constraintDimensionRatio="H,16:9"。这里，高度是相对于布局的宽度设置的。

对于您的问题，请设置 android:layout_width="match_parent" 并使用 < code>app:layout_constraintDimensionRatio="H,1:1" 在您的视图中。

Answer 8

只需覆盖 onSizeChanged 并计算比率即可。

长宽比的公式是：

newHeight =  original_height / original_width x new_width

这会给你类似的东西：

 @Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    //3:5 ratio
    float RATIO = 5/3;
    setLayoutParams(new LayoutParams((int)RATIO * w, w));

}

希望这有帮助！

Answer 9

Google 的 ExoPlayer 附带 AspectRatioFrameLayout< /code>如下所示：

<com.google.android.exoplayer2.ui.AspectRatioFrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:resize_mode="fixed_width">
    <!-- https://exoplayer.dev/doc/reference/com/google/android/exoplayer2/ui/AspectRatioFrameLayout.html#RESIZE_MODE_FIXED_WIDTH -->

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</com.google.android.exoplayer2.ui.AspectRatioFrameLayout>

然后，您必须以编程方式设置宽高比：

aspectRatioFrameLayout.setAspectRatio(16f/9f)

请注意，您还可以使用 setResizeMode< /a>.

---

由于您显然不会获取这个类的整个 ExoPlayer 库，因此您可以简单地将文件从 GitHub 复制粘贴到您的项目（它是开源的）：

https://github.com/google/ExoPlayer/blob/release-v2/library/ui/src/main/java/com/google/android/exoplayer2/ui/AspectRatioFrameLayout.java

不要忘记也获取属性 resize_mode：

https： //github.com/google/ExoPlayer/blob/release-v2/library/ui/src/main/res/values/attrs.xml#L18-L25

<attr name="resize_mode" format="enum">
  <enum name="fit" value="0"/>
  <enum name="fixed_width" value="1"/>
  <enum name="fixed_height" value="2"/>
  <enum name="fill" value="3"/>
  <enum name="zoom" value="4"/>
</attr>

Answer 10

我曾经用过这种方式。

                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <ImageView
                        android:id="@+id/imageView_home_one"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:scaleType="centerCrop"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintDimensionRatio="H,4:3"
                        android:layout_marginTop="@dimen/_5sdp"
                        android:visibility="gone"
                        tools:ignore="MissingConstraints" />
                </androidx.constraintlayout.widget.ConstraintLayout>