วิธีง่ายๆในการสร้างเลย์เอาต์แบบไดนามิก แต่เป็นสี่เหลี่ยมจัตุรัส

ฉันใช้GridViewเพื่อแสดงจำนวนการดูซึ่งโดยพื้นฐานLinearLayoutsแล้ว ฉันต้องการLinearLayoutsให้ทั้งหมดเป็นสี่เหลี่ยมจัตุรัส แต่ฉันก็ต้องการให้มีขนาดแบบไดนามิกนั่นคือมีสองคอลัมน์และฉันต้องการLinearLayoutsให้ยืดออกโดยขึ้นอยู่กับขนาดของหน้าจอ แต่ยังคงเป็นสี่เหลี่ยมจัตุรัส มีวิธีทำผ่านxmlเค้าโครงหรือไม่หรือต้องตั้งค่าความสูงและความกว้างโดยใช้โปรแกรม

วิธีแก้ปัญหาอย่างเป็นระเบียบสำหรับGridViewรายการสี่เหลี่ยมจัตุรัสคือการขยายRelativeLayoutหรือLinearLayoutและแทนที่onMeasureดังนี้:

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

อาจจะตอบช้า แต่ก็ยังเป็นประโยชน์สำหรับผู้เยี่ยมชมใหม่

ด้วยConstraintLayoutใหม่ที่เปิดตัวใน Android Studio 2.3 ตอนนี้มันค่อนข้างง่ายในการสร้างเลย์เอาต์ที่ตอบสนอง

ในแม่แบบ ConstraintLayout หากต้องการสร้างมุมมอง / เลย์เอาต์ของลูก ๆ แบบไดนามิกให้เพิ่มแอตทริบิวต์นี้

app:layout_constraintDimensionRatio="w,1:1"

w คือการระบุข้อ จำกัด ด้านความกว้างและอัตราส่วน 1: 1 เพื่อให้แน่ใจว่าเค้าโครงสี่เหลี่ยมจัตุรัส

ไม่มีสิ่งใดใน xml ที่จะให้คุณเชื่อมโยงคุณสมบัติความกว้างและความสูง อาจเป็นสิ่งที่ง่ายที่สุดที่จะทำคือซับคลาส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

ฉันทำแบบนี้แล้ว:

@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

เราสามารถทำได้ด้วยวิธีง่ายๆเพียงโทรหา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()สองครั้งจะมีประสิทธิภาพน้อยกว่าในแง่ของกระบวนการวาดภาพ แต่เป็นวิธีง่ายๆในการแก้ไขปัญหาเค้าโครงที่คำตอบอื่น ๆ อาจทำให้เกิดได้

มันง่ายเหมือน:

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

เพิ่มบรรทัดต่อไปนี้ใน XML:

app:layout_constraintDimensionRatio="1:1"

นี่คือโซลูชันที่ใช้ได้กับพารามิเตอร์โครงร่างทั้งหมดที่สามารถตั้งค่าให้ดูหรือดูกลุ่ม:

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

ไชโย

คำแนะนำของฉันคือการสร้างคลาสเลย์เอาต์แบบกำหนดเองที่สืบทอดมาจาก 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>

ลองใช้SquareLayoutซึ่งเป็นไลบรารี Androidที่มีคลาส Wrapper สำหรับเลย์เอาต์ที่แตกต่างกันโดยแสดงผลแบบ Squared ที่มีขนาดโดยไม่สูญเสียฟังก์ชันหลักใด ๆ

มิติจะถูกคำนวณก่อนที่จะมีการแสดงเค้าโครงจึงไม่มีการแสดงผลใหม่หรืออะไรเช่นการปรับครั้งดูจะได้รับ

ในการใช้ไลบรารีให้เพิ่มสิ่งนี้ใน build.gradle ของคุณ:

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

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

คนที่คุณต้องการคือSquareLinearLayout

สำหรับทุกคนที่ต้องการแก้ปัญหาด้วย 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)
    }
}

ลองใช้รหัสนี้:

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