Code Monkey home page Code Monkey logo

flexlayout's Introduction

FlexLayout

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.

IMG

<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

Adding to project

Add dependencies in your build.gradle:

	dependencies {
	    compile 'com.github.mmin18:flexlayout:1.1.0'
	}

Or if you are using Eclipse, just copy FlexLayout.java and attrs.xml 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 android:layout_width
xmlns:app="http://schemas.android.com/apk/res-auto"

% Percentage

IMG

<Button
	app:layout_left="10%"
	app:layout_right="10%"
	app:centerY="50%"
	android:layout_height="wrap_content"
	../>

or

<Button
	app:layout_width="80%"
	app:centerX="50%"
	app:centerY="50%"
	android:layout_height="wrap_content"
	../>

Reference other views

Reference previous view using prev, next view using next

IMG

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

Reference a specific view using view's id

IMG

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

You can also use parent to reference the FlexLayout and this to reference the child view itself. Use screen to reference screen size. (screen, parent, this only support width and height property.)

Properties
left top
right bottom
centerX centerY
width height
visible gone
*tag

view.visible: view.getVisibility() == View.VISIBLE

view.gone: view.getVisibility() == View.GONE

view.tag: view.getTag(). Use View.setTag() to set a Number or Boolean and call View.requestLayout() to trigger layout. Types other than Number and Boolean returns 0.

Expression

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)

flexlayout's People

Contributors

mmin18 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.