Простой способ сделать динамическое, но квадратное расположение

Question

Простой способ сделать динамическое, но квадратное расположение

Я использую GridView отображать кучу взглядов, которые по сути LinearLayouts, Я хочу LinearLayouts чтобы все было квадратным, но я также хочу, чтобы они были динамического размера - то есть, есть два столбца, и я хочу, чтобы LinearLayouts растягивать в зависимости от размера экрана, но оставаться квадратным. Есть ли способ сделать это через xml макет или я должен установить высоту и ширину программно?

92

android

Источник

user856906 24 янв '12 в 01:31

14 ответов

Другие вопросы по тегам android

user896980 14 апр '12 в 21:38 2012-04-14 21:38 · Answer 1 · 2012-04-14 21:38

Аккуратное решение для квадрата GridView предметы для продления RelativeLayout или же LinearLayout и переопределить onMeasure вот так:

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}

116

Источник

user896980 14 апр '12 в 21:38

user5570217 27 май '17 в 14:27 2017-05-27 14:27 · Answer 2 · 2017-05-27 14:27

Возможно, уже поздно отвечать, но все же это поможет новым посетителям.

С новым ConstraintLayout, представленным в Android Studio 2.3, теперь довольно легко создавать адаптивные макеты.

В родительском ConstraintLayout, чтобы сделать любое из его дочерних представлений / макетов динамически квадратным, добавьте этот атрибут

app:layout_constraintDimensionRatio="w,1:1"

w задает ограничения по ширине, а соотношение 1:1 обеспечивает квадратное расположение.

user1140713 15 апр '13 в 15:02 2013-04-15 15:02 · Answer 3 · 2013-04-15 15:02

Я сделал так:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    int size;
    if(widthMode == MeasureSpec.EXACTLY && widthSize > 0){
        size = widthSize;
    }
    else if(heightMode == MeasureSpec.EXACTLY && heightSize > 0){
        size = heightSize;
    }
    else{
        size = widthSize < heightSize ? widthSize : heightSize;
    }

    int finalMeasureSpec = MeasureSpec.makeMeasureSpec(size, MeasureSpec.EXACTLY);
    super.onMeasure(finalMeasureSpec, finalMeasureSpec);
}

С этой реализацией ваш макет будет квадратным, предполагая меньший размер между шириной и высотой. И это может даже быть установлено с динамическими значениями, такими как использование веса внутри LinearLayout.

user1106671 24 янв '12 в 02:53 2012-01-24 02:53 · Answer 4 · 2012-01-24 02:53

В xml нет ничего, что позволило бы вам связать свойства width и height. Вероятно, самая простая вещь, которую нужно сделать, это создать подкласс LinearLayout и переопределить onMeasure

@Override public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
    int size = width > height ? height : width;
    setMeasuredDimension(size, size);
}

Я использовал это для создания представлений, которые всегда были квадратными. Это все еще должно работать для LinearLayout,

Дополнительная информация, которая поможет сделать это: http://developer.android.com/guide/topics/ui/custom-components.html http://developer.android.com/reference/android/view/View.MeasureSpec.html

user4626382 26 июл '15 в 09:14 2015-07-26 09:14 · Answer 5 · 2015-07-26 09:14

Мы можем сделать это очень простым способом - просто позвоните super.onMeasure() дважды.

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int width = getMeasuredWidth();
    int height = getMeasuredHeight();
    int squareLen = Math.min(width, height);

    super.onMeasure(
        MeasureSpec.makeMeasureSpec(squareLen, MeasureSpec.EXACTLY), 
        MeasureSpec.makeMeasureSpec(squareLen, MeasureSpec.EXACTLY));
}

По телефону super.onMeasure() во-вторых, это менее эффективно с точки зрения процесса рисования, но это простой способ исправить проблемы макета, которые могут возникнуть в других ответах.

user3570517 11 июн '17 в 10:44 2017-06-11 10:44 · Answer 6 · 2017-06-11 10:44

Это так просто, как:

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
    {
        if (widthMeasureSpec < heightMeasureSpec) 
            super.onMeasure(widthMeasureSpec, widthMeasureSpec);
        else
            super.onMeasure(heightMeasureSpec, heightMeasureSpec);
    }
}

user10500330 01 окт '20 в 12:17 2020-10-01 12:17 · Answer 7 · 2020-10-01 12:17

Добавьте следующую строку в XML:

app:layout_constraintDimensionRatio="1:1"

4

Источник

user10500330 01 окт '20 в 12:17

user871043 25 авг '12 в 06:56 2012-08-25 06:56 · Answer 8 · 2012-08-25 06:56

Вот решение, которое работает для всех параметров макета, которые можно установить для представления или группы просмотра:

    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
    int widthDesc = MeasureSpec.getMode(widthMeasureSpec);
    int heightDesc = MeasureSpec.getMode(heightMeasureSpec);
    int size = 0;
    if (widthDesc == MeasureSpec.UNSPECIFIED
            && heightDesc == MeasureSpec.UNSPECIFIED) {
        size = DP(defaultSize); // Use your own default size, in our case
                                // it's 125dp
    } else if ((widthDesc == MeasureSpec.UNSPECIFIED || heightDesc == MeasureSpec.UNSPECIFIED)
            && !(widthDesc == MeasureSpec.UNSPECIFIED && heightDesc == MeasureSpec.UNSPECIFIED)) {
                    //Only one of the dimensions has been specified so we choose the dimension that has a value (in the case of unspecified, the value assigned is 0)
        size = width > height ? width : height;
    } else {
                    //In all other cases both dimensions have been specified so we choose the smaller of the two
        size = width > height ? height : width;
    }
    setMeasuredDimension(size, size);

ура

user64140 29 дек '16 в 18:04 2016-12-29 18:04 · Answer 9 · 2016-12-29 18:04

Я предлагаю создать пользовательский класс макета, который наследуется от FrameLayout. Переопределите метод OnMeasure() и поместите любой элемент управления, который вы хотите, чтобы он был квадратным, внутри этого SquareFrameLayout.

Вот как это делается в Xamarin.Android:

public class SquareFrameLayout : FrameLayout
{
    private const string _tag = "SquareFrameLayout";

    public SquareFrameLayout(Android.Content.Context context):base(context) {}
    public SquareFrameLayout(IntPtr javaReference, Android.Runtime.JniHandleOwnership transfer):base(javaReference, transfer) {}
    public SquareFrameLayout(Android.Content.Context context, IAttributeSet attrs):base(context, attrs) {}
    public SquareFrameLayout(Android.Content.Context context, IAttributeSet attrs, int defStyleAttr):base(context, attrs, defStyleAttr) {}
    public SquareFrameLayout(Android.Content.Context context, IAttributeSet attrs, int defStyleAttr, int defStyleRes):base(context, attrs, defStyleAttr, defStyleRes) {}

    protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        var widthMode = MeasureSpec.GetMode(widthMeasureSpec);
        int widthSize = MeasureSpec.GetSize(widthMeasureSpec);
        var heightMode = MeasureSpec.GetMode(heightMeasureSpec);
        int heightSize = MeasureSpec.GetSize(heightMeasureSpec);

        int width, height;

        switch (widthMode)
        {
            case MeasureSpecMode.Exactly:
                width = widthSize;
                break;
            case MeasureSpecMode.AtMost:
                width = Math.Min(widthSize, heightSize);
                break;
            default:
                width = 100;
                break;
        }

        switch (heightMode)
        {
            case MeasureSpecMode.Exactly:
                height = heightSize;
                break;
            case MeasureSpecMode.AtMost:
                height = Math.Min(widthSize, heightSize);
                break;
            default:
                height = 100;
                break;
        }

        Log.Debug(_tag, $"OnMeasure({widthMeasureSpec}, {heightMeasureSpec}) => Width mode: {widthMode}, Width: {widthSize}/{width}, Height mode: {heightMode}, Height: {heightSize}/{height}");
        var size = Math.Min(width, height);
        var newMeasureSpec = MeasureSpec.MakeMeasureSpec(size, MeasureSpecMode.Exactly);
        base.OnMeasure(newMeasureSpec, newMeasureSpec);
    }
}

Если вы хотите, чтобы представление (или любой другой элемент управления) было квадратным (и центрированным), просто добавьте его в макет следующим образом:

<your.namespace.SquareFrameLayout
    android:id="@+id/squareContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center">
    <View
        android:id="@+id/squareContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</your.namespace.SquareFrameLayout>

user5312371 08 мар '21 в 18:15 2021-03-08 18:15 · Answer 10 · 2021-03-08 18:15

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

                            <ImageView
                                android:id="@+id/imageView"
                                android:layout_width="match_parent"
                                android:layout_height="0dp"
                                android:layout_gravity="center_horizontal"
                                android:scaleType="fitCenter"
                                app:layout_constraintBottom_toBottomOf="parent"
                                app:layout_constraintDimensionRatio="w,1:1"
                                app:layout_constraintEnd_toEndOf="parent"
                                app:layout_constraintStart_toStartOf="parent"
                                app:layout_constraintTop_toTopOf="parent"
                                tools:src="@tools:sample/avatars" />


                        </androidx.constraintlayout.widget.ConstraintLayout>

user7550472 10 сен '17 в 16:44 2017-09-10 16:44 · Answer 11 · 2017-09-10 16:44

Ознакомьтесь с SquareLayout, библиотекой Android, которая предоставляет класс-оболочку для различных макетов, предоставляя им квадратные размеры без потери каких-либо основных функциональных возможностей.

Размеры рассчитываются непосредственно перед рендерингом макета, следовательно, нет повторного рендеринга или чего-либо подобного для настройки после получения вида.

Чтобы использовать библиотеку, добавьте это в свой build.gradle:

repositories {
    maven {
        url "https://maven.google.com"
    }
}

dependencies {
    compile 'com.github.kaushikthedeveloper:squarelayout:0.0.3'
}

То, что вам нужно, это SquareLinearLayout.

user4225163 03 июл '19 в 03:47 2019-07-03 03:47 · Answer 12 · 2019-07-03 03:47

Для тех, кто хочет решения С Kotlin, вот что я сделал с FrameLayout,

package your.package.name

import android.content.Context
import android.util.AttributeSet
import android.widget.FrameLayout

class SquareLayout: FrameLayout {

    constructor(ctx: Context) : super(ctx)
    constructor(ctx: Context, attrs: AttributeSet) : super(ctx, attrs)

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        if (widthMeasureSpec < heightMeasureSpec)
            super.onMeasure(widthMeasureSpec, widthMeasureSpec)
        else
            super.onMeasure(heightMeasureSpec, heightMeasureSpec)
    }
}

user3319132 10 дек '19 в 12:29 2019-12-10 12:29 · Answer 13 · 2019-12-10 12:29

Попробуйте этот код:

public class SquareRelativeLayout extends RelativeLayout {
    public SquareRelativeLayout(Context context) {
        super(context);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int size;
        if (widthMode == MeasureSpec.EXACTLY && widthSize > 0) {
            size = widthSize;
        } else if (heightMode == MeasureSpec.EXACTLY && heightSize > 0) {
            size = heightSize;
        } else {
            size = widthSize < heightSize ? widthSize : heightSize;
        }

        int finalMeasureSpec = MeasureSpec.makeMeasureSpec(size, MeasureSpec.EXACTLY);
        super.onMeasure(finalMeasureSpec, finalMeasureSpec);
    }
}

user10129273 23 июн '23 в 08:27 2023-06-23 08:27 · Answer 14 · 2023-06-23 08:27

Создайте индивидуальный макет

      import android.content.Context
import android.util.AttributeSet
import android.widget.LinearLayout

class SquareLayout : LinearLayout {
    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    )

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        val size = MeasureSpec.getSize(widthMeasureSpec)
        setMeasuredDimension(size, size)
    }
}