Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yasharpm/SequenceLayout

Layout Sherlock! or Yashout!!
https://github.com/yasharpm/SequenceLayout

Last synced: 9 days ago
JSON representation

Layout Sherlock! or Yashout!!

Awesome Lists containing this project

README 

        
[![Android Arsenal]( https://img.shields.io/badge/Android%20Arsenal-Sequence%20Layout-green.svg?style=flat )]( https://android-arsenal.com/details/1/7609 )

# Sequence Layout

SequenceLayout is a new solution to layout problem. Taken account the strenghts and weaknesses of ConstraintLayout, this new layout is much more flexible and also very much simpler to understand and define.



While being more light weight than ConstraintLayout, SequenceLayout makes it possible to support a wider range of screen sizes.



## Sample

This sample layout is defined by about 170 lines of XML. It is consisted of 22 views which took about 200 lines to define.

The following animations display the extend of the flexibily available.






## Usage



Add the dependency:

```Groovy

dependencies {

	implementation 'com.yashoid:sequencelayout:2.0.0'

}

```



## How to use this library

SequenceLayout is based on two core concepts:

- `Span`: Is an extend definition. In contrast to other layouts, margins and spaces are treated as sizing entities same as view dimensions. Each Span has a `size`, optional `min` and `max` for size limits, optional `id` to assign it to a view's horizontal or vertical extend, and an optional `visibilityElement` which means the size should be resolved to zero if the visibility element's visibility is set to `View.GONE`.

- Sequence: Is a sequence of spans that resolves the extends (Spans) to actual positions on the screen. For `Vertical` sequences the first span is positioned from 0 to the span's resolved size. The next span's position starts after the previous span end position. Same is valid for `Horizontal` sequences from left to right (from x equal to zero).



Hint: Sequences also have optional `start` and `end` properties that are defined relative to other views or the container. The default value for `start` is `0@` meaning zero percent of the parent and default value for `end` is subsequently `100@`.



### Hello SequenceLayout

layout/activity_main.xml

```XML



    

 



```

`pgSize` is an adaptive size that allows you to define your `Span` sizes relative to available width using `pg` unit.

`sequences` refers to an XML file that defines the positioning of sequence layout's children. Note that `android:layout_width` and `android:layout_height` are virtually ignored.



xml/sequences_main

```XML



  

  

    

    

    

  

                

  

    

    

    

  

  



```

This resolves to putting the view in the center of the screen as a square of `40pg` size. Which means `width = 40 / 360 * total_width`.



### Span properties

- `size` Is the size of the span. Multiple types of metrics can be used here.

- `id` Relates the span size to setting the target view - horizontal or vertical - size.

- `min` Minimum size for the span. It can have any metric except for weighed sizes.

- `max` Maximum size for the span. It can have any metric except for weighed sizes.

- `visibilityElement` Link this spans visibility (size equal to zero) to a view's visibility (being GONE).



### Span sizes cheat sheet

- `%` Size relative to sequence's total size. Examples: `30%`, `100%`, `-10.5%`, `150%`

- `px` Size in pixels. Examples: `12px`, `60px`, `-8.5px`

- `dp` Size in dip. Examples: `8dp`, `12dp`, `36dp`

- `sp` Size in sp. Examples: `11sp`, `16sp`, `18sp`

- `@dimen` Size as a reference to dimens. Examples: `@dimen/default_margin`, `@dimen/icon_size`

- `mm` Size in millimeters. Examples: `10mm`, `1mm`, `0.85mm`

- `wrap` Wrapping size. Specific to use for views. Is equivalent for the known `wrap_content` behaviour.

- `%w [view_id]` Size percentage relative to another horizontal span's size. Examples: `30%w view`, `100%w text_title`, `-10%w image_profile`

- `%h [view_id]` Size percentage relative to another vertical span's size. Examples: `30%h view`, `100%h text_title`, `-10%h image_profile`

- `%[view_id]` Size percentage relative to another span's size. If a span width the same id exists in both orientations, the on in the same orientation in prioritized. Examples: `30%view`, `100%text_title`, `-10%image_profile`

- `align@[view_id]` Set the size so that the Span would end at the start of the given id's view. Examples: `align@text_title`, `align@image_profile`

- `pw` Relative to the `pageWidth` defined for the SequenceLayout. Meant to be the main sizing unit and to replace `dp` sizes. This allows you to define your layout solely by following the sizes that are given to you by the designers. Examples: `12pw`, `1.5pw`, `-4pw`

- `ph` Relative to the `pageHeight` defined for the SequenceLayout. Works similar to `pw` but allows you to better adjust the height of your views.  Examples: `12ph`, `1.5ph`, `-4ph`

- `w` Weighted size inside of each sequence's scope. After all other sizes have resolved. The remaining space is divided between the weighed spans relative to their weight. If the SequenceLayout is set to horizontal or vertical wrapping, all weighted sizes will be resolved to zero. Examples: `1w`, `20w`, `4.5w`, `-3w`

- `@MAX(span_size,...)` Resolves to the maximum value of the given span sizes. Note that weighted and aligned sizes are not valid. Examples: `@MAX(48pg,100%text_title,25%image_profile)`, `@MAX(100%view,20%)`