问题
I want to add some buttons in a line and break it in a new line when they reach the end of the screen:
If you know CSS, what I need is similar to display: inline-block
rule.
I am looking for a XML solution only, I want to avoid measuring the screen and buttons using java to emplace them below programatically.
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" />
回答1:
since last time, I found this library that you should enjoy ! github.com/google/flexbox-layout
In your case, you should use the flexWrap attribute :
This attribute controls whether the flex container is single-line or multi-line, and the direction of the cross axis. Possible values are:
- nowrap (default)
- wrap (use this)
- wrap_reverse
You will be able to wrap your buttons.
Installation
Add the following dependency to your build.gradle file:
dependencies {
implementation 'com.google.android:flexbox:1.1.0'
}
Usage
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>
回答2:
Have you tried using 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>`
来源:https://stackoverflow.com/questions/56463442/set-buttons-inline-and-break-line-to-fit-different-devices