Layout with 4 square buttons equally spaced and scale based on width of the screen

问题

Is there a way to have a layout with the 4 square buttons. The buttons should scale based on the width of the screen. I might have come across some ways of doing this dynamically in code, but is there a way to do it in the xml layout directly?

I'm new to the new ConstraintLayout in Android, but if it is possible using that, I'd appreciate being pointed to in the right direction to try it out. Thanks.

回答1:

Take a look on these

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="2">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <Button
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:text="Button 1"
            android:textAllCaps="false"/>

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <Button
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:text="Button 2"
            android:textAllCaps="false"/>

    </RelativeLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="2">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <Button
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:text="Button 3"
            android:textAllCaps="false"/>

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <Button
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:text="Button 4"
            android:textAllCaps="false"/>

    </RelativeLayout>

</LinearLayout>

Create different values folder (like values-small, values-large) and create dimens.xml file in appropriate folder put size (like 100dp for small) and use it where I used 150dp for button size.

回答2:

Use android:layout_weight this can divide the size of layout as you want

回答3:

I was able to figure out the solution with ConstraintLayout. The other layouts had some element missing which would have forced me to use code to dynamically check the screen width and make calculations.

Some of the points/steps to note are:

I used a set of 4 vertical guidelines against which I could constrain the buttons
A middle (invisible) view to constrain the lower two buttons from the top
1 horizontal guideline to set the horizontal placement in the screen. I wasn't able to set the middle view baselined to the guideline (maybe this is not possible), but had to set the top of the view to the guideline.
set the layout_constraintDimensionRatio of all the buttons to 1

Hope this helps someone. I've posted the images and code below:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    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">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.90"
        tools:layout_editor_absoluteX="528dp"
        tools:layout_editor_absoluteY="0dp"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.60"
        tools:layout_editor_absoluteX="324dp"
        tools:layout_editor_absoluteY="0dp"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.40"
        tools:layout_editor_absoluteX="276dp"
        tools:layout_editor_absoluteY="0dp"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.1"
        tools:layout_editor_absoluteX="72dp"
        tools:layout_editor_absoluteY="0dp"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.4"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/buttonMiddle"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="@+id/guideline3"
        app:layout_constraintRight_toLeftOf="@+id/guideline5"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/buttonMiddle"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="@+id/guideline4"
        app:layout_constraintRight_toLeftOf="@+id/guideline"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="@+id/guideline3"
        app:layout_constraintRight_toLeftOf="@+id/guideline5"
        app:layout_constraintTop_toBottomOf="@+id/buttonMiddle"/>

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="@+id/guideline4"
        app:layout_constraintRight_toLeftOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/buttonMiddle"/>

    <Button
        android:id="@+id/buttonMiddle"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="invisible"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="@+id/guideline5"
        app:layout_constraintRight_toLeftOf="@+id/guideline4"
        app:layout_constraintTop_toTopOf="@+id/guideline7"/>

</android.support.constraint.ConstraintLayout>

ConstraintLayout seems quite powerful, and there may be other ways to do it as well.

来源：https://stackoverflow.com/questions/44256083/layout-with-4-square-buttons-equally-spaced-and-scale-based-on-width-of-the-scre

标签

android

android-layout

android-constraintlayout