设置按钮内联和换行以适应不同的设备 [英] Set buttons inline and break line to fit different devices

查看:100
本文介绍了设置按钮内联和换行以适应不同的设备的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在一行中添加一些按钮,并在到达屏幕末尾时将其换行:

I want to add some buttons in a line and break it in a new line when they reach the end of the screen:

如果您了解CSS,那么我需要的是类似于display: inline-block规则.

If you know CSS, what I need is similar to display: inline-block rule.

我只是在寻找XML解决方案,我想避免使用Java来测量屏幕和按钮,从而以编程方式将它们放置在下面.

I am looking for a XML solution only, I want to avoid measuring the screen and buttons using java to emplace them below programatically.

这是我当前的代码,ConstraintLayout中有以下按钮:

This is my current code, the following buttons are inside a 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"        />

推荐答案

自上次以来,我发现了您应该喜欢的这个库! github.com/google/flexbox-layout

since last time, I found this library that you should enjoy ! github.com/google/flexbox-layout

在这种情况下,您应该使用 flexWrap 属性:

In your case, you should use the flexWrap attribute :

此属性控制flex容器是单行还是多行,以及横轴的方向.可能的值是:

This attribute controls whether the flex container is single-line or multi-line, and the direction of the cross axis. Possible values are:

  • nowrap(默认)
  • 包装(使用此)
  • wrap_reverse

您将可以包装按钮.

安装

在您的build.gradle文件中添加以下依赖项:

Add the following dependency to your build.gradle file:

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

用法

FlexboxLayout,用于扩展ViewGroup,如LinearLayout和RelativeLayout.您可以从布局XML中指定属性,例如:

FlexboxLayout that extends the ViewGroup like LinearLayout and RelativeLayout. You can specify the attributes from a layout XML like:

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

这篇关于设置按钮内联和换行以适应不同的设备的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆