android - Create a staggered grid like the given image -
i trying achieve view:
this partial view , can have view vertically merged 2 cells or horizontally merged 2 cells or single small view.
this view can scroll vertically
please me this.
you can create layout using nested linearlayout
attribute layout_weight
, weightsum
. make layout scrollable
, use scrollview
root layout.
here working example:
<?xml version="1.0" encoding="utf-8"?> <scrollview xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <linearlayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="8dp" android:orientation="vertical"> <!-- row1 --> <linearlayout android:layout_width="match_parent" android:layout_height="100dp" android:background="#ff0000"> </linearlayout> <!-- row2 --> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margintop="8dp" android:orientation="horizontal" android:weightsum="2"> <!-- row2 col1--> <linearlayout android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginright="4dp" android:layout_weight="1" android:background="#00ff00"> </linearlayout> <!-- row2 col2--> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginleft="4dp" android:orientation="vertical" android:layout_weight="1" android:weightsum="2"> <!-- row2 col2 child1--> <linearlayout android:layout_width="match_parent" android:layout_height="96dp" android:layout_marginbottom="4dp" android:layout_weight="1" android:background="#0000ff"> </linearlayout> <!-- row2 col2 child2--> <linearlayout android:layout_width="match_parent" android:layout_height="96dp" android:layout_margintop="4dp" android:layout_weight="1" android:background="#0000ff"> </linearlayout> </linearlayout> </linearlayout> <!-- row3 --> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margintop="8dp" android:orientation="horizontal" android:weightsum="2"> <!-- row3 col1--> <linearlayout android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginright="4dp" android:layout_weight="1" android:background="#fff000"> </linearlayout> <!-- row3 col2--> <linearlayout android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginleft="4dp" android:layout_weight="1" android:background="#fff000"> </linearlayout> </linearlayout> <!-- row4 --> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margintop="8dp" android:orientation="horizontal" android:weightsum="2"> <!-- row4 col1--> <linearlayout android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginright="4dp" android:layout_weight="1" android:background="#ff00ff"> </linearlayout> <!-- row4 col2--> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginleft="4dp" android:orientation="vertical" android:layout_weight="1" android:weightsum="2"> <!-- row4 col2 child1--> <linearlayout android:layout_width="match_parent" android:layout_height="96dp" android:layout_marginbottom="4dp" android:layout_weight="1" android:background="#00ffff"> </linearlayout> <!-- row4 col2 child2--> <linearlayout android:layout_width="match_parent" android:layout_height="96dp" android:layout_margintop="4dp" android:layout_weight="1" android:background="#00ffff"> </linearlayout> </linearlayout> </linearlayout> </linearlayout> </scrollview>
output:
you can use gridlayout
achieve view.
here tutorial gridlayout
, stackoverflow answers.
hope help~
Comments
Post a Comment