android - studio - Relación de aspecto fijo Ver

responsividad android studio

Question

¿Cómo implementaría una View relación de aspecto fija? Me gustaría tener elementos con relación de aspecto 1: 1 en un GridView . Creo que es mejor subclasificar a los niños que el GridView ?

EDITAR: Asumo que esto debe hacerse programáticamente, eso no es problema. Además, no quiero limitar el tamaño, solo la relación de aspecto.

Answer 1

Hace poco hice una clase de ayuda para este problema y escribí una buzzingandroid.com/2012/11/… .

La carne del código es la siguiente:

/**
 * 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 2

He utilizado y me gustó la implementación de ImageView de Jake Wharton (debería ser similar para otras vistas), otros podrían disfrutarla también:

AspectRatioImageView.java - ImageView que respeta una relación de aspecto aplicada a una medición específica

Es bueno que ya sea styleable en xml.

Answer 3

Implementé FixedAspectRatioFrameLayout, por lo que puedo reutilizarlo y hacer que cualquier vista alojada tenga una relación de aspecto fija:

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 4

Para los nuevos usuarios, aquí hay una mejor solución sin código:

Una nueva biblioteca de soporte llamada Percent Support Library está disponible en Android SDK v22 (MinAPI es 7 me piensa, no estoy seguro):

src: android-developers.blogspot.in

La biblioteca de soporte de porcentajes proporciona dimensiones y márgenes basados ​​en porcentajes y, nuevo en esta versión, la capacidad de establecer una relación de aspecto personalizada a través de la aplicación: aspectRatio. Al establecer solo un ancho o alto único y usar aspectRatio, PercentFrameLayout o PercentRelativeLayout ajustarán automáticamente la otra dimensión para que el diseño use una relación de aspecto establecida.

Para incluir agregar esto a su build.gradle :

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

Ahora ajuste su vista (la que debe ser cuadrada) con un 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>

Puedes ver un ejemplo here .

Answer 5

Para no utilizar una solución de terceros y teniendo en cuenta el hecho de que tanto PercentFrameLayout como PercentRelativeLayout quedaron obsoletos en 26.0.0, le sugiero que considere usar ConstraintLayout como un diseño de raíz para los elementos de su grilla.

Su item_grid.xml podría verse así:

<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>

Como resultado, obtienes algo como esto:

Answer 6

Simplemente anule onSizeChanged y calcule la relación allí.

La fórmula para la relación de aspecto es:

newHeight =  original_height / original_width x new_width

esto te daría algo así:

 @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));

}

¡espero que esto ayude!

Answer 7

una biblioteca de diseño usando la respuesta de . Sientase libre de usarlo.

RatioLayouts

Instalación

Agregar esto a la parte superior del archivo

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


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

Uso

Definir el espacio de nombres de la ''aplicación'' en la vista raíz en su diseño

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

Incluye esta biblioteca en tu diseño

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

Actualizar

Con la introducción de ConstraintLayout , no tiene que escribir ni una sola línea de código ni utilizar terceros, ni depender de PercentFrameLayout que quedó obsoleto en 26.0.0.

Aquí está el ejemplo de cómo mantener la relación de aspecto 1: 1 para su diseño usando ConstraintLayout :

<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>