Question

有没有办法让布局有4个方形按钮。按钮应根据屏幕宽度进行缩放。我可能已经遇到过在代码中动态执行此操作的一些方法，但有没有办法直接在xml布局中执行此操作？

我是Android新ConstraintLayout的新用户，但如果有可能使用它，我很高兴被指向正确的方向来试用它。感谢。

Answer 1

看看这些

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

创建不同的值文件夹（如values-small，values-large）并在相应的文件夹放置大小（如100dp for small）中创建dimens.xml文件，并在我使用150dp作为按钮大小的地方使用它。

Answer 2

使用android:layout_weight这可以根据需要划分布局大小

Answer 3

我能够通过ConstraintLayout找出解决方案。其他布局缺少一些元素，这将迫使我使用代码动态检查屏幕宽度并进行计算。

需要注意的一些要点/步骤是：

我使用了一组4条垂直指南，我可以约束按钮
中间（不可见）视图，用于约束顶部的下两个按钮
1个水平参考线，用于设置屏幕中的水平位置。我无法将基线的中间视图设置为指南（可能这是不可能的），但必须将视图的顶部设置为指南。
将所有按钮的layout_constraintDimensionRatio设置为1

希望这有助于某人。我发布了下面的图片和代码：

<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似乎非常强大，并且可能还有其他方法可以做到这一点。

布局有4个方形按钮，间距相等，并根据屏幕宽度进行缩放

3 个答案: