The idea is simple, use java expressions in layout params like layout_left="view1.right+10dp". It is helpful when LinearLayout and RelativeLayout is not enough for you.
<TextView
app:layout_left="icon.right+10dp"
app:layout_right="100%-14dp"
app:layout_centerY="icon.centerY"
android:layout_height="wrap_content"
.../>
Try the sample apk: FlexLayout.apk
Add dependencies in your build.gradle:
dependencies {
compile 'com.github.mmin18:flexlayout:1.2.7'
}Or if you are using Eclipse, just copy FlexLayout.java and attrs.xml to your project.
| Horizontal | Vertical |
|---|---|
| layout_left | layout_top |
| layout_right | layout_bottom |
| layout_centerX | layout_centerY |
| layout_width | layout_height |
Remember the app:layout_width is different from android:layout_width
xmlns:app="http://schemas.android.com/apk/res-auto"
<Button
app:layout_left="10%"
app:layout_right="90%"
app:layout_centerY="50%"
android:layout_height="wrap_content"
../>
or
<Button
app:layout_width="80%"
app:layout_centerX="50%"
app:layout_centerY="50%"
android:layout_height="wrap_content"
../>
Reference previous view using prev, next view using next (Position in the XML layout file)
<View ../> // prev = Previous view in xml layout file
<View
app:layout_left="prev.right"
app:layout_right="next.left"
app:layout_top="prev.top"
app:layout_bottom="next.bottom" />
<View ../> // next = Next view in xml layout file
Reference a specific view using view's id
<View
app:layout_left="view1.right"
app:layout_right="android:text1.left"
app:layout_top="view1.top"
app:layout_bottom="android:text1.bottom" />
<View android:id="@+id/view1"
../>
<View android:id="@android:id/text1"
../>
You can also use parent to reference the FlexLayout and this to reference the child view itself. Use screen to reference screen size.
| Keyword | Target |
|---|---|
| prev | Previous view in XML layout |
| next | Next view in XML layout |
| view_id | <View id="@+id/view_id" /> defined in the same layout |
| this | The view itself |
| parent | The parent FlexLayout, doesn't support left top right bottom centerX centerY |
| screen | Screen size (getResources().getDisplayMetrics(), only support width and height) |
| Properties | Value | |
|---|---|---|
| left | top | |
| right | bottom | |
| centerX | centerY | |
| width | height | |
| visible | view.getVisibility() == View.VISIBLE | |
| gone | view.getVisibility() == View.GONE | |
| tag | view.getTag(), only support Number or Boolean. Other types or null returns 0 |
(When use with view.tag, after View.setTag() you should call View.requestLayout() to trigger layout.)
The syntax is the same as Java or C. Numbers can have units like 10dp, 15sp
(parent.height-view1.centerY)/2
100%-80dp
max(view1.right, view2.right)
screen.width<screen.height ? 64dp : 48dp
view1.visible && view2.visible ? max(view1.bottom, view2.bottom) : 0px
Operators (Order in precedence)
| Operator | Associativity |
|---|---|
| () sp dp dip px pt mm in | Right |
| ! | Right |
| * / % | Left |
| + - | Left |
| <= < >= > | Left |
| == != | Left |
| && | Left |
| ll | Left |
| ?= | Right |
Functions
| Name |
|---|
| max(a,b) |
| min(a,b) |
| round(a) |
| ceil(a) |
| floor(a) |
| abs(a) |
| mod(a) |
| pow(a) |
Of course you can reference dimensions defined in res/values/dimens.xml
<View
app:left="@dimen/default_margin"
app:bottom="50%-@dimen/default_margin"
app:width="2*@android:dimen/app_icon_size"
../>
You can use wrap_content and match_parent as a normal value in expression, like app:layout_width="min(wrap_content, 80dp)" which is equievalent to android:maxWidth="80dp".
Using wrap_content in expression is more flexable than using android:maxWidth / android:minWidth. For example, you want to put an icon to the right of a TextView:
<TextView
app:layout_width="min(wrap_content, 100%-next.width)"
android:layout_height="wrap_content"
android:text="Either short or long text"
android:singleLine="true"
... />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_left="prev.right"
android:src="@drawable/info"
... />
The following benchmark is done by Piasy, and you can check the details here.
| inflate (ns) | measure (ns) | layout (ns) | |
|---|---|---|---|
| RelativeLayout | 3325842 | 947464 | 108585 |
| FrameLayout | 3159841 | 879161 | 112988 |
| FlexLayout | 5278923 | 796837 | 111414 |
| inflate (ns) | measure (ns) | layout (ns) | |
|---|---|---|---|
| RelativeLayout | 17479435 | 2268045 | 822163 |
| GridLayout | 20350271 | 3270156 | 1177185 |
| FlexLayout | 21698676 | 2703914 | 1001549 |
You can check the layout xml files here
FlexLayout usually takes longer to inflate, but it's equally fast in measure and layout. Normally you use less hierarchy and views than RelativeLayout or LinearLayout, so the overall time spend is competitively, especially when comes to complex layouts.
Avoid crash when layout is empty.
Support Arabic RTL (layoutDirection). Simply flip everything from right to left.
Allow restriction conflict like both left, right and width is defined (width will be ignored)
Fix #8, TextView clipped issue with wrap_content expression.
Use wrap_content and match_parent as a normal value in expression.
Support AndroidStudio Preview (Fix view reference in IDE preview)
Support parent.visible, parent.gone, parent.tag
Show source code position in XML when throw Exceptions. (Syntax exception, Circular dependency, etc.)
Initial release to jcenter. Including percentage, view reference, ?= expressions, logic operators.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent