设置按钮内联和换行以适应不同的设备

Question

我想在一行中添加一些按钮，并在它们到达屏幕末尾时换行：

如果你知道CSS，我需要的是类似于display: inline-block规则。

我只是在寻找 XML 解决方案，我想避免使用 java 测量屏幕和按钮以编程方式将它们放置在下方。

这是我当前的代码，下面的按钮在 ConstraintLayout:

    <Button
        android:id="@+id/boton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:text="Imagen"        />
    <Button
        android:id="@+id/boton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/boton1"
        android:text="Play"        />
    <Button
        android:id="@+id/boton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/boton2"
        android:text="Audio"        />
    <Button
        android:id="@+id/boton4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/boton3"
        android:text="Play"
        android:onClick="playVideo"        />
    <Button
        android:id="@+id/boton5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/boton4"
        android:text="Youtube"        />
    <Button
        android:id="@+id/boton6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/boton5"
        android:text="Raw"        />

Answer 1

您尝试过使用 gridLayout 吗？

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4">

    <Button
        android:id="@+id/boton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Imagen"        
        />
    <Button
        android:id="@+id/boton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Play"
        />
    <Button
        android:id="@+id/boton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Audio"
        />
    <Button
        android:id="@+id/boton4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Play"
        android:onClick="playVideo"
        />
    <Button
        android:id="@+id/boton5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Youtube"
        />
    <Button
        android:id="@+id/boton6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Raw"
        />

</GridLayout>`

Answer 2

自上次以来，我发现了这个你应该喜欢的图书馆！ github.com/google/flexbox-layout

在您的情况下，您应该使用 flexWrap 属性：

该属性控制flex容器是单行还是多行，以及横轴的方向。可能的值是：

nowrap（默认）
包装（使用这个）
wrap_reverse

您将能够包裹您的按钮。

安装

将以下依赖项添加到您的 build.gradle 文件中：

dependencies {
    implementation 'com.google.android:flexbox:2.0.1'
}

用法

像LinearLayout和RelativeLayout一样扩展ViewGroup的FlexboxLayout。您可以从布局 XML 中指定属性，例如：

<com.google.android.flexbox.FlexboxLayout
    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="match_parent"
    app:flexWrap="wrap"
    app:alignItems="stretch"
    app:alignContent="stretch" >

    <TextView
        android:id="@+id/textview1"
        android:layout_width="120dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="50%"
        />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_alignSelf="center"
        />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="160dp"
        android:layout_height="80dp"
        app:layout_alignSelf="flex_end"
        />
</com.google.android.flexbox.FlexboxLayout>

设置按钮内联和换行以适应不同的设备

Set buttons inline and break line to fit different devices

android

android-layout

android-xml