21 2월 2017
FlexboxLayout
is particularly effective.FlexboxLayout
can be interpreted as an advanced LinearLayout
because both layouts align their child views sequentially. The significant
difference between LinearLayout and FlexboxLayout
is that
FlexboxLayout
has a feature for wrapping.
FlexboxLayout
puts a view to a new line if there is not enough
space left in the current line as shown in the picture below.LinearLayout
or RelativeLayout
. But
the dialog above is built with a single FlexboxLayout
.
flexWrap="wrap"
as
explained above,
<com .google.android.flexbox.flexboxlayout android:layout_width="match_parent" android:layout_height="wrap_content" app:flexwrap="wrap">then you can get the following layout where child views are aligned to a new line instead of overflowing its parent.
layout_flexGrow
attribute to an individual child. This helps
improve the look of the final layout when free space is left over. The
layout_flexGrow
attribute works similar to the
layout_weight
attribute in LinearLayout
. That means
FlexboxLayout
will distribute the remaining space according to the
layout_flexGrow
value set to each child in the same line.
layout_flexGrow
attribute set to 1
, so free space will be evenly distributed to
each of them.
<android .support.design.widget.TextInputLayout android:layout_width="100dp" android:layout_height="wrap_content" app:layout_flexgrow="1">
FlexboxLayout
is that it can be integrated
with RecyclerView.
With the latest release of the alpha
version the new FlexboxLayoutManager
extends
RecyclerView.LayoutManager
, now you can make use of the Flexbox
functionalities in a scrollable container in much more memory-efficient way.
FlexboxLayout
wrapped with ScrollView
. But, you will
be likely to experience jankiness or even an OutOfMemoryError if the number of
items contained in the layout is large, as FlexboxLayout
doesn't
take view recycling into account for the views that go off the screen as the
user scrolls.
RecyclerView
integration is useful
is for apps like the Google Photos app or News apps, both expect large number of
items while needing to handle various width of items.
FlexboxLayout
repository. As you can see in
the repository, each image shown in RecyclerView
has a different
width. But by setting the flexWrap setting to wrap,
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(); layoutManager.setFlexWrap(FlexWrap.WRAP);and setting the
flexGrow
(as you can see, you can configure the
attributes through FlexboxLayoutManager
and
FlexboxLayoutManager.LayoutParams
for child attributes instead of
configuring it from xml) attribute to a positive value for each child,
void bindTo(Drawable drawable) { mImageView.setImageDrawable(drawable); ViewGroup.LayoutParams lp = mImageView.getLayoutParams(); if (lp instanceof FlexboxLayoutManager.LayoutParams) { FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams(); flexboxLp.setFlexGrow(1.0f); } }you can see every image fits within the layout nicely regardless of the screen orientation.
FlexboxLayout
and
FlexboxLayoutManager
.
FlexboxLayoutManager