Apa itu FlowLayout
FlowLayout adalah sebuah layout yang memiliki behaviour seperti ini:
- Semua child otomatis align rigt atau align left.
- Semua child auto wrap menyesuaikan ukuran parent-nya
Lebih jelasnya seperti gambar dibawah.
Screenshot
Membuat kelas FlowLayout
Kelas FlowLayout bisa diturunkan dari ViewGroup, kemudian ditambahkan custom behaviour pada beberapa Override methodnya.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
package com.research.hangga.autoalign; import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup; /** * Created by hangga on 21/01/16. */ public class FlowLayout extends ViewGroup { private int paddingHorizontal; private int paddingVertical; public FlowLayout(Context context) { super(context); init(); } public FlowLayout(Context context, AttributeSet attrs) { this(context, attrs, 0); init(); } public FlowLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } private void init() { paddingHorizontal = this.getPaddingLeft(); paddingVertical = this.getPaddingTop(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int mHeight = 0; int childLeft = getPaddingLeft(); int childTop = getPaddingTop(); int myWidth = resolveSize(getWidth(), widthMeasureSpec); int wantedHeight = 0; for (int i = 0; i < getChildCount(); i++) { final View thisChild = getChildAt(i); if (thisChild.getVisibility() == View.GONE) { continue; } thisChild.measure(getChildMeasureSpec(widthMeasureSpec, 0, thisChild.getLayoutParams().width), getChildMeasureSpec(heightMeasureSpec, 0, thisChild.getLayoutParams().height)); int childWidth = thisChild.getMeasuredWidth(); int childHeight = thisChild.getMeasuredHeight(); mHeight = Math.max(childHeight, mHeight); if (childWidth + childLeft + getPaddingRight() > myWidth) { childLeft = getPaddingLeft(); childTop += paddingVertical + mHeight; mHeight = childHeight; } childLeft += childWidth + paddingHorizontal; } wantedHeight += childTop + mHeight + getPaddingBottom(); setMeasuredDimension(myWidth, resolveSize(wantedHeight, heightMeasureSpec)); } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { int childLeft = getPaddingLeft(); int childTop = getPaddingTop(); int lineHeight = 0; int myWidth = right - left; for (int i = 0; i < getChildCount(); i++) { final View child = getChildAt(i); if (child.getVisibility() == View.GONE) { continue; } int childWidth = child.getMeasuredWidth(); int childHeight = child.getMeasuredHeight(); lineHeight = Math.max(childHeight, lineHeight); if (childWidth + childLeft + getPaddingRight() > myWidth) { childLeft = getPaddingLeft(); childTop += paddingVertical + lineHeight; lineHeight = childHeight; } child.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight); childLeft += childWidth + paddingHorizontal; } } } |
How to use
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context="com.research.hangga.autoalign.MainActivity"> <com.research.hangga.autoalign.FlowLayout android:layout_width="fill_parent" android:layout_height="match_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="kungfu"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Pechak Silat"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Krav Maga"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Shaolin Kungfu"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cimande"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Mixed Martial Art"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="American Kick Boxing"/> </com.research.hangga.autoalign.FlowLayout> </RelativeLayout> |