diff --git a/README.md b/README.md index f4b4c94e1b9755bd2b72cd2c4139c2335aa066b0..680ad9a3da767047d51c32b25d59400f65a3c8b3 100644 --- a/README.md +++ b/README.md @@ -8,12 +8,24 @@ FlexboxLayout is a library project which brings the similar capabilities of ## Installation Add the following dependency to your `build.gradle` file: +Stable ``` dependencies { compile 'com.google.android:flexbox:0.2.5' } ``` +OR + +Alpha including RecyclerView integration +``` +dependencies { + compile 'com.google.android:flexbox:0.3.0-alpha1' +} +``` +See the [RecyclerView integration](RecyclerView.md) page for more details about using Flexbox inside +the `RecyclerView`. + ## Usage FlexboxLayout extends the ViewGroup like LinearLayout and RelativeLayout. You can specify the attributes from a layout XML like: diff --git a/RecyclerView.md b/RecyclerView.md new file mode 100644 index 0000000000000000000000000000000000000000..892f77688cff6679a5142ef22b1fa284e1a53af3 --- /dev/null +++ b/RecyclerView.md @@ -0,0 +1,59 @@ +# RecyclerView integration + +With the latest alpha version of the release, Flexbox can now be used inside the `RecyclerView` +as a `LayoutManager` (`FlexboxLayoutManager`). +That means now you can use Flexbox with large number of items in a scrollable container! + +![FlexboxLayoutManager in action](/assets/flexbox-layoutmanager.gif) + + +## Supported attributes / features comparison +Due to some characteristics of the RecyclerView, some Flexbox attributes are not avaiable/not implemented +to the `FlexboxLayoutManager`. +Here is a quick overview of the attributes/features comparison between the two containers. + +|Attribute / Feature|FlexboxLayout| FlexboxLayoutManager (RecyclerView)| +| ------- |:-----------:|:----------------------------------:| +|flexDirection|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png)| +|flexWrap|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png) (except `wrap_reverse`)| +|justifyContent|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png)| +|alignItems|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png)| +|alignContent|![Check](/assets/pngs/check_green_small.png)| - | +|layout_order|![Check](/assets/pngs/check_green_small.png)| - | +|layout_flexGrow|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png)| +|layout_flexShrink|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png)| +|layout_alignSelf|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png)| +|layout_flexBasisPercent|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png)| +|layout_(min/max)Width|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png)| +|layout_(min/max)Height|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png)| +|layout_wrapBefore|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png)| +|Divider|![Check](/assets/pngs/check_green_small.png)|![Check](/assets/pngs/check_green_small.png)| +|View recycling| - |![Check](/assets/pngs/check_green_small.png)| +|Scrolling| *1 |![Check](/assets/pngs/check_green_small.png)| + +*1 Partially possible by wrapping it with `ScrollView`. But it isn't likely to work with large set + of views inside the layout. Because it doesn't consider view recycling. + + +## Backward-imcompatible changes from the 0.2.x versions +`FlexboxLayout` can still be used as the same way, but there are some backward-imcompatible +changes introduced. + +* Now Flexbox specific constants are now defined in each individual class such as: + * `FlexboxLayout.FLEX_DIRECTION_ROW` -> `FlexDirection.ROW` + * `FlexboxLayout.FLEX_WRAP_WRAP` -> `FlexWrap.WRAP` + * `FlexboxLayout.JUSTIFY_CONTENT_FLEX_START` -> `JustifyContent.FLEX_START` + * `FlexboxLayout.ALIGN_ITEMS_FLEX_START` -> `AlignItems.FLEX_START` + * `FlexboxLayout.ALIGN_CONTENT_FLEX_START` -> `AlignContent.FLEX_START` + + including other values (such as FLEX_END, STRETCH) are now moved to each individual class. + +## Sample code +The code for the new `FlexboxLayoutManager` hasn't merged to the master branch yet, since +it's not as stable as the existing `FlexboxLayout`. +But you can still reference some sample code using the `FlexboxLayoutManager` inside the +`RecyclerView` in the [dev_recyclerview](https://github.com/google/flexbox-layout/tree/dev_recyclerview) branch +such as: + - [Playground demo app](https://github.com/google/flexbox-layout/tree/dev_recyclerview/demo-playground) + - [Cat Gallery demo app](https://github.com/google/flexbox-layout/tree/dev_recyclerview/demo-cat-gallery) + diff --git a/assets/flexbox-layoutmanager.gif b/assets/flexbox-layoutmanager.gif new file mode 100644 index 0000000000000000000000000000000000000000..1df290862785289102e9c7bacbe6fa75034e27b6 Binary files /dev/null and b/assets/flexbox-layoutmanager.gif differ diff --git a/assets/pngs/check_green_small.png b/assets/pngs/check_green_small.png new file mode 100644 index 0000000000000000000000000000000000000000..f5fbfa9d26bf3ac698f963a4e491d5c02e783e15 Binary files /dev/null and b/assets/pngs/check_green_small.png differ