{"id":13643083,"url":"https://github.com/mmin18/FlexLayout","last_synced_at":"2025-04-20T21:32:44.787Z","repository":{"id":147922734,"uuid":"53799401","full_name":"mmin18/FlexLayout","owner":"mmin18","description":"A powerful Android layout view that use java expression in layout params to describe relative positions.","archived":false,"fork":false,"pushed_at":"2017-10-28T12:58:17.000Z","size":511,"stargazers_count":1424,"open_issues_count":3,"forks_count":116,"subscribers_count":58,"default_branch":"master","last_synced_at":"2025-04-12T16:59:52.623Z","etag":null,"topics":["android","flex-layout","linearlayout","relativelayout"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmin18.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-03-13T18:00:50.000Z","updated_at":"2024-11-29T03:08:00.000Z","dependencies_parsed_at":"2023-05-27T23:58:12.569Z","dependency_job_id":null,"html_url":"https://github.com/mmin18/FlexLayout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmin18%2FFlexLayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmin18%2FFlexLayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmin18%2FFlexLayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmin18%2FFlexLayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmin18","download_url":"https://codeload.github.com/mmin18/FlexLayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249965547,"owners_count":21352925,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","flex-layout","linearlayout","relativelayout"],"created_at":"2024-08-02T01:01:41.228Z","updated_at":"2025-04-20T21:32:44.504Z","avatar_url":"https://github.com/mmin18.png","language":"Java","readme":"# FlexLayout\n\nThe 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.\n\n![IMG](imgs/s1.png)\n\n\t\u003cTextView\n\t\tapp:layout_left=\"icon.right+10dp\"\n\t\tapp:layout_right=\"100%-14dp\"\n\t\tapp:layout_centerY=\"icon.centerY\"\n\t\tandroid:layout_height=\"wrap_content\"\n\t\t.../\u003e\n\nTry the sample apk: [FlexLayout.apk](imgs/FlexLayout.apk)\n\n## Adding to project\n\nAdd dependencies in your `build.gradle`:\n\n```groovy\n\tdependencies {\n\t    compile 'com.github.mmin18:flexlayout:1.2.7'\n\t}\n```\n\nOr if you are using Eclipse, just copy [FlexLayout.java](library/src/com/github/mmin18/widget/FlexLayout.java) and [attrs.xml](library/res/values/attrs.xml) to your project.\n\n## Layout Params\n\n|   Horizontal   |    Vertical    |\n| -------------- | -------------- |\n| layout_left    | layout_top     |\n| layout_right   | layout_bottom  |\n| layout_centerX | layout_centerY |\n| layout_width   | layout_height  |\n\nRemember the `app:layout_width` is different from `android:layout_width`\u003cbr\u003e*xmlns:app=\"http://schemas.android.com/apk/res-auto\"*\n\n## % Percentage\n\n![IMG](imgs/s3.png)\n\n\t\u003cButton\n\t\tapp:layout_left=\"10%\"\n\t\tapp:layout_right=\"90%\"\n\t\tapp:layout_centerY=\"50%\"\n\t\tandroid:layout_height=\"wrap_content\"\n\t\t../\u003e\n\nor\n\n\t\u003cButton\n\t\tapp:layout_width=\"80%\"\n\t\tapp:layout_centerX=\"50%\"\n\t\tapp:layout_centerY=\"50%\"\n\t\tandroid:layout_height=\"wrap_content\"\n\t\t../\u003e\n\n## Reference other views\n\nReference previous view using `prev`, next view using `next` (Position in the XML layout file)\n\n![IMG](imgs/s4.png)\n\n\t\u003cView ../\u003e        // prev = Previous view in xml layout file\n\t\n\t\u003cView\n\t\tapp:layout_left=\"prev.right\"\n\t\tapp:layout_right=\"next.left\"\n\t\tapp:layout_top=\"prev.top\"\n\t\tapp:layout_bottom=\"next.bottom\" /\u003e\n\t\n\t\u003cView ../\u003e        // next = Next view in xml layout file\n\nReference a specific view using `view's id`\n\n![IMG](imgs/s5.png)\n\n\t\u003cView\n\t\tapp:layout_left=\"view1.right\"\n\t\tapp:layout_right=\"android:text1.left\"\n\t\tapp:layout_top=\"view1.top\"\n\t\tapp:layout_bottom=\"android:text1.bottom\" /\u003e\n\t\n\t\u003cView android:id=\"@+id/view1\"\n\t\t../\u003e\n\t\u003cView android:id=\"@android:id/text1\"\n\t\t../\u003e\n\nYou can also use `parent` to reference the FlexLayout and `this` to reference the child view itself. Use `screen` to reference screen size.\n\n| Keyword    | Target     |\n| ---------- | ---------- |\n| prev       | Previous view in XML layout |\n| next       | Next view in XML layout |\n| *view_id*  | *\u0026lt;View id=\"@+id/view_id\" /\u0026gt;* defined in the same layout |\n| this       | The view itself |\n| parent     | The parent FlexLayout, doesn't support *left* *top* *right* *bottom* *centerX* *centerY* |\n| screen     | Screen size (getResources().getDisplayMetrics(), only support *width* and *height*)|\n\n| Properties |            | Value |\n| ---------- | ---------- | ----- |\n| left       | top        | |\n| right      | bottom     | |\n| centerX    | centerY    | |\n| width      | height     | |\n| visible    |            | view.getVisibility() == View.VISIBLE |\n| gone       |            | view.getVisibility() == View.GONE |\n| tag        |            | view.getTag(), only support Number or Boolean. Other types or null returns 0 |\n\n(When use with `view.tag`, after View.setTag() you should call View.requestLayout() to trigger layout.)\n\n## Expression\n\nThe syntax is the same as Java or C. Numbers can have units like `10dp`, `15sp`\n\n\t(parent.height-view1.centerY)/2\n\t100%-80dp\n\tmax(view1.right, view2.right)\n\tscreen.width\u003cscreen.height ? 64dp : 48dp\n\tview1.visible \u0026\u0026 view2.visible ? max(view1.bottom, view2.bottom) : 0px\n\nOperators (Order in precedence)\n\n| Operator    | Associativity |\n| ----------- |:-------------:|\n| () sp dp dip px pt mm in | Right |\n| !           | Right         |\n| * / %       | Left          |\n| + -         | Left          |\n| \u003c= \u003c \u003e= \u003e   | Left          |\n| == !=       | Left          |\n| \u0026\u0026          | Left          |\n| ll          | Left          |\n| ?=          | Right         |\n\nFunctions\n\n| Name        |\n| ----------- |\n| max(a,b)    |\n| min(a,b)    |\n| round(a)    |\n| ceil(a)     |\n| floor(a)    |\n| abs(a)      |\n| mod(a)      |\n| pow(a)      |\n\n## dimens.xml\n\nOf course you can reference dimensions defined in `res/values/dimens.xml`\n\n\t\u003cView\n\t\tapp:left=\"@dimen/default_margin\"\n\t\tapp:bottom=\"50%-@dimen/default_margin\"\n\t\tapp:width=\"2*@android:dimen/app_icon_size\"\n\t\t../\u003e\n\n## wrap_content\n\nYou 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\"`.\n\nUsing 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:\n\n![IMG](imgs/s6.png)\n\n\t\u003cTextView\n\t\tapp:layout_width=\"min(wrap_content, 100%-next.width)\"\n\t\tandroid:layout_height=\"wrap_content\"\n\t\tandroid:text=\"Either short or long text\"\n\t\tandroid:singleLine=\"true\"\n\t\t... /\u003e\n\t\u003cImageView\n\t\tandroid:layout_width=\"wrap_content\"\n\t\tandroid:layout_height=\"wrap_content\"\n\t\tapp:layout_left=\"prev.right\"\n\t\tandroid:src=\"@drawable/info\"\n\t\t... /\u003e\n\n# Benchmark\n\nThe following benchmark is done by Piasy, and you can check the details [here](http://blog.piasy.com/2016/04/07/Layout-Perf/).\n\n### Simple Layout\n\n|                | inflate (ns) | measure (ns) | layout (ns) |\n| -------------- | ------------ | ------------ | ----------- |\n| RelativeLayout | 3325842      | 947464       | 108585      |\n| FrameLayout    | 3159841      | 879161       | 112988      |\n| FlexLayout     | 5278923      | 796837       | 111414      |\n\n### Complex Layout\n\n|                | inflate (ns) | measure (ns) | layout (ns) |\n| -------------- | ------------ | ------------ | ----------- |\n| RelativeLayout | 17479435     | 2268045      | 822163      |\n| GridLayout     | 20350271     | 3270156      | 1177185     |\n| FlexLayout     | 21698676     | 2703914      | 1001549     |\n\nYou can check the layout xml files [here](https://github.com/Piasy/AndroidPlayground/tree/4a3e49613764d4eec4b48b0eee29b1ea70a027c2/LayoutPerfDemo/src/main/res/layout)\n\nFlexLayout 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.\n\n# Changelog\n\n### 1.2.7 (2017-8-2)\n\nAvoid crash when layout is empty.\n\n### 1.2.6 (2016-9-28)\n\nSupport Arabic RTL (layoutDirection). Simply flip everything from right to left.\n\n### 1.2.5 (2016-9-25)\n\nAllow restriction conflict like both left, right and width is defined (width will be ignored)\n\n### 1.2.4 (2016-6-02)\n\nFix #8, TextView clipped issue with wrap_content expression.\n\n### 1.2.3 (2016-4-25)\n\nUse wrap_content and match_parent as a normal value in expression.\n\n### 1.2.2 (2016-4-17)\n\nSupport AndroidStudio Preview (Fix view reference in IDE preview)\n\n### 1.2.1 (2016-4-8)\n\nSupport parent.visible, parent.gone, parent.tag\n\n### 1.2.0 (2016-4-6)\n\nShow source code position in XML when throw Exceptions. (Syntax exception, Circular dependency, etc.)\n\n### 1.1.0 (2016-3-20)\n\nInitial release to jcenter. Including percentage, view reference, ?= expressions, logic operators.\n\n","funding_links":[],"categories":["布局","relativelayout"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmin18%2FFlexLayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmin18%2FFlexLayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmin18%2FFlexLayout/lists"}