# FlexLayout

**Repository Path**: baijuncheng-open-source/flexlayout

## Basic Information

- **Project Name**: FlexLayout
- **Description**: A powerful ohos layout component that use java expression in layout params to describe relative positions
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-07
- **Last Updated**: 2024-05-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FlexLayout

The idea is simple, use java expressions in layout params like `layout_left="view1.right+10dp"`. It is helpful when DirectionalLayout and DependentLayout is not enough for you.

    <Text
		app:layout_left="icon.right+10dp"
		app:layout_right="100%-14vp"
		app:layout_centerY="icon.centerY"
		ohos:height="match_content"
		.../>
## Preview
![image](images/image.gif)
## Getting Started
##### Integration
remote maven repo integration

1.add mavenCentral dependency at repositories in your project build.gradle

```
allprojects {
    repositories {
        mavenCentral()
    }
}
```

2.add library dependency at your module build.gradle

```xml
implementation 'com.gitee.baijuncheng-open-source:FlexLayout:1.0.0'
```
##### Add FlexLayout to your project

    1.Copy the FlexLayout/library folder to the project directory

    2.Modify settings.gradle under the project and add the dependency on this module as follows:

    include ':entry', ':library'

    3. Introduce the dependency of the module under the project. Taking the entry module as an example, you need to modify the build.gradle file under the entry module to add the dependency:

    compile project(path: ':library') or implementation project(':library')

    Solution 2: local use of har package integration
    1. Compile this project, copy the har package generated in the build directory of the FlexLayout/library folder to the project lib folder:
    directory：\FlexLayout\library\build\outputs\har\debug\library-debug.har

    2. Add the following code in the entry's gradle
    implementation fileTree(dir:'libs', include: ['*.jar','*.har'])


More on the  configuration can be found in the Project.

Or just copy [FlexLayout.java](library/src/main/java/com/github/mmin18/widget/FlexLayout.java) and [ReflectUtil.java](library/src/main/java/com/github/mmin18/widget/ReflectUtil.java
) to your project.

## Layout Params

|   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 `    ohos:width`<br>*xmlns:app="http://schemas.huawei.com/res/ohos-auto"*

## % Percentage

	<Button
		app:layout_left="10%"
		app:layout_right="90%"
		app:layout_centerY="50%"
		ohos:height="match_content"
		../>

or

	<Button
		app:layout_width="80%"
		app:layout_centerX="50%"
		app:layout_centerY="50%"
		ohos:height="match_content"
		../>

## Reference other components

Reference previous component using `prev`, next component using `next` (Position in the XML layout file)


	<Component ../>        // prev = Previous component in xml layout file

	<Component
		app:layout_left="prev.right"
		app:layout_right="next.left"
		app:layout_top="prev.top"
		app:layout_bottom="next.bottom" />

	<Component ../>        // next = Next component in xml layout file

Reference a specific component using `component's id`

	<Component
		app:layout_left="view1.right"
		app:layout_right="text1.left"
		app:layout_top="view1.top"
		app:layout_bottom="text1.bottom" />

	<Component ohos:id="$+id:view1""
		../>
	<Component ohos:id="$+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*  | *&lt;View id=""$+id:view1" /&gt;* 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 (getDefaultDisplay(context).get().getAttributes(), only support *width* and *height*)|

| Properties |            | Value |
| ---------- | ---------- | ----- |
| left       | top        | |
| right      | bottom     | |
| centerX    | centerY    | |
| width      | height     | |
| visible    |            | component.getVisibility() == Component.VISIBLE |
| gone       |            | component.getVisibility() == Component.HIDE |
| tag        |            | component.getTag(), only support Number or Boolean. Other types or null returns 0 |

(When use with `component.tag`, after component.setTag() you should call component.postLayout(); to trigger layout.) <br>
Notice that view above means component in hanrmony os.

## Expression

The syntax is the same as Java or C. Numbers can have units like `10vp`, `15fp`

	(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(fp) dp(vp) 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)      |

## float.json

Of course you can reference dimensions defined in `resources/base/element/float.json`

	<Text
    	ohos:width="match_content"
		ohos:height="match_content"
		ohos:text_alignment="center"
		ohos:text_size="$float:dimension_1"
		ohos:text="2 * $float:dimension_1"
		ohos:text_color="$color:color8"
		app:layout_centerY="prev.centerY"
		app:layout_left="prev.right+$float:dimension_2"/>

## wrap_content

You can use wrap_content and match_parent as a normal value in expression, like `app:layout_width="min(wrap_content, 80vp)"` which is equievalent to `maxWidth="80vp"`.

Using wrap_content in expression is more flexable than using minWidth. For example, you want to put an icon to the right of a Text:

	<Text
		app:layout_width="min(wrap_content, 100%-next.width)"
		ohos:height="match_content"
		ohos:text="Either short or long text"
		... />
	<Image
		ohos:width="match_content"
		ohos:height="match_content"
		app:layout_left="prev.right"
		ohos:image_src="$media:ic_dialog_info"
		... />

# Benchmark

The following benchmark is done by Piasy, and you can check the details [here](http://blog.piasy.com/2016/04/07/Layout-Perf/).

### Simple Layout

|                 | inflate (ns) | measure (ns) | layout (ns) |
| --------------  | ------------ | ------------ | ----------- |
| DependentLayout | 3325842      | 947464       | 108585      |
| StackLayout     | 3159841      | 879161       | 112988      |
| FlexLayout      | 5278923      | 796837       | 111414      |

### Complex Layout

|                 | inflate (ns) | measure (ns) | layout (ns) |
| --------------  | ------------ | ------------ | ----------- |
| DependentLayout | 17479435     | 2268045      | 822163      |
| TableLayout     | 20350271     | 3270156      | 1177185     |
| FlexLayout      | 21698676     | 2703914      | 1001549     |

FlexLayout usually takes longer to inflate, but it's equally fast in measure and layout. Normally you use less hierarchy and views than DependentLayout or DirectionalLayout, so the overall time spend is competitively, especially when comes to complex layouts.

# Changes

### 1.2.8 (2021-4-2)

Add support for Harmony os

### 1.2.7 (2017-8-2)

Avoid crash when layout is empty.

### 1.2.6 (2016-9-28)

Support Arabic RTL (layoutDirection). Simply flip everything from right to left.

### 1.2.5 (2016-9-25)

Allow restriction conflict like both left, right and width is defined (width will be ignored)

### 1.2.4 (2016-6-02)

Fix #8, Text clipped issue with wrap_content expression.

### 1.2.3 (2016-4-25)

Use wrap_content and match_parent as a normal value in expression.


### 1.2.1 (2016-4-8)

Support parent.visible, parent.gone, parent.tag

### 1.2.0 (2016-4-6)

Show source code position in XML when throw Exceptions. (Syntax exception, Circular dependency, etc.)

### 1.1.0 (2016-3-20)

Initial release to jcenter. Including percentage, view reference, ?= expressions, logic operators.

# copyright

   Copyright 2016 Tu Yimin (http://github.com/mmin18)

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.