Android que el diseño a utilizar para desbordar objetos a la siguiente línea

No estoy seguro de qué tipo de diseño utilizar para este escenario determinado.

Básicamente quiero tener un diseño lineal horizontal que puedo añadir vistas. En este caso los botones (que muestran las etiquetas en una aplicación) Pero cada vista tendrá una base de ancho diferente en el nombre de la etiqueta que está mostrando, por lo que quiero añadir decir 10 etiquetas, necesito un diseño que se ajuste a tantos como Puede en la 1ª línea, y luego si no encaja, desborda automáticamente a la siguiente línea.

Básicamente, como una vista de texto funciona con texto, si el texto es más largo que el ancho va a la línea siguiente, excepto que quiero hacer esto con los botones que no se pueden hacer clic.

Pensé en un diseño de cuadrícula, pero luego tendría el mismo número de "etiquetas" en cada línea cuando podría tener 2 etiquetas con un nombre largo en la primera línea y 7 con un nombre corto en la segunda línea.

Algo que se parece un poco a esto: Introduzca aquí la descripción de la imagen

Quiero básicamente la mirada de cómo el desbordamiento de la pila lo hace abajo aquí.

Respuesta: Su propio Layout personalizado 🙂

Sé que esta es una respuesta tardía a esta pregunta. Pero podría ayudar al OP o alguien seguro.

Puede ampliar ViewGroup para crear un diseño personalizado como éste a continuación. La ventaja de esto es que consigue mantener la jerarquía de vista plana .

Android Studio es super inteligente para hacer un diseño personalizado como cualquier otro diseño!

MyFlowLayout

 public class MyFlowLayout extends ViewGroup { public MyFlowLayout(Context context) { super(context); } public MyFlowLayout(Context context, AttributeSet attrs) { this(context,attrs,0); } public MyFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int realWidth = MeasureSpec.getSize(widthMeasureSpec); int currentHeight = 0; int currentWidth = 0; int currentChildHookPointx = 0; int currentChildHookPointy = 0; int childCount = this.getChildCount(); for(int i = 0; i < childCount; i++) { View child = getChildAt(i); this.measureChild(child, widthMeasureSpec, heightMeasureSpec); int childWidth = child.getMeasuredWidth(); int childHeight = child.getMeasuredHeight(); //check if child can be placed in the current row, else go to next line if(currentChildHookPointx + childWidth > realWidth) { //new line currentWidth = Math.max(currentWidth, currentChildHookPointx); //reset for new line currentChildHookPointx = 0; currentChildHookPointy += childHeight; } int nextChildHookPointx; int nextChildHookPointy; nextChildHookPointx = currentChildHookPointx + childWidth; nextChildHookPointy = currentChildHookPointy; currentHeight = Math.max(currentHeight, currentChildHookPointy + childHeight); LayoutParams lp = (LayoutParams) child.getLayoutParams(); lp.x = currentChildHookPointx; lp.y = currentChildHookPointy; currentChildHookPointx = nextChildHookPointx; currentChildHookPointy = nextChildHookPointy; } currentWidth = Math.max(currentChildHookPointx, currentWidth); setMeasuredDimension(resolveSize(currentWidth, widthMeasureSpec), resolveSize(currentHeight, heightMeasureSpec)); } @Override protected void onLayout(boolean b, int left, int top, int right, int bottom) { //call layout on children int childCount = this.getChildCount(); for(int i = 0; i < childCount; i++) { View child = this.getChildAt(i); LayoutParams lp = (LayoutParams) child.getLayoutParams(); child.layout(lp.x, lp.y, lp.x + child.getMeasuredWidth(), lp.y + child.getMeasuredHeight()); } } @Override public LayoutParams generateLayoutParams(AttributeSet attrs) { return new MyFlowLayout.LayoutParams(getContext(), attrs); } @Override protected LayoutParams generateDefaultLayoutParams() { return new MyFlowLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); } @Override protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) { return new MyFlowLayout.LayoutParams(p); } @Override protected boolean checkLayoutParams(ViewGroup.LayoutParams p) { return p instanceof MyFlowLayout.LayoutParams; } public static class LayoutParams extends ViewGroup.MarginLayoutParams { int spacing = -1; int x = 0; int y = 0; LayoutParams(Context c, AttributeSet attrs) { super(c, attrs); TypedArray t = c.obtainStyledAttributes(attrs, R.styleable.FlowLayout_Layout); spacing = t.getDimensionPixelSize(R.styleable.FlowLayout_Layout_layout_space, 0); t.recycle(); } LayoutParams(int width, int height) { super(width, height); spacing = 0; } public LayoutParams(MarginLayoutParams source) { super(source); } LayoutParams(ViewGroup.LayoutParams source) { super(source); } } } 

Uso en un archivo layout.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:cl="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.merryapps.customlayout.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /> <com.merryapps.customlayout.MyFlowLayout android:id="@+id/flw1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FF0000"> <Button android:id="@+id/b1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello" cl:layout_space="20dp"/> <Button android:id="@+id/b2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/world"/> <Button android:id="@+id/b4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/world"/> <Button android:id="@+id/b5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/world"/> <Button android:id="@+id/b6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/world"/> </com.merryapps.customlayout.MyFlowLayout> <Button android:id="@+id/b3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/world" android:textAllCaps="false"/> </LinearLayout> 

Para mostrar el tipo de vista uno debe ir para el diseño de flujo: – Hay muchas bibliotecas disponibles en Git A continuación se muestra el ejemplo de, blazsolar / FlowLayout

Añadir esta línea en app.gradle

 compile "com.wefika:flowlayout:<version>" 

Uso:-

 <com.wefika.flowlayout.FlowLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="start|top"> <View android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Lorem ipsum" /> </com.wefika.flowlayout.FlowLayout> 

Para la implementación de detalle, siga abajo enlace-

https://github.com/blazsolar/FlowLayout

También puedes probar estos enlaces: – https://github.com/xiaofeng-han/AndroidLibs/tree/master/flowlayoutmanager (prueba esto) https://github.com/ApmeM/android-flowlayout https: // gist. Github.com/hzqtc/7940858

  • ¿Es posible iniciar una aplicación cuando se escanea una etiqueta NFC?
  • Lea la etiqueta NFC sin aplicación específica?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.