A very creative UI, that displays a simple/compound view in any tetris-shape adding some magic with a tasteful curve all around. and as the name implies you can construct your views to be arranged just like in any tetris game.
This Library consists of two Major views:
-
TetrisView(ViewGroup$FrameLayout) which throws a
BastardException
if more than a child is added.- a simple example is a TetrisView with a single view such as an imageview,
- a composite example is a TetrisView with a single framelayout containing an imageview and a textview
-
TetrisClick(ViewGroup$FrameLayout) which can contain TetrisView kids/children at the same time and handles click listeners according to the shape of each TetrisView-shape rather than by its default bounding box/rectangle.
Also - Each TetrisView is made up of blocks which have equal dimensions.
dependencies {
compile 'com.github.54LiNKeR:TetrisView:1.2.3.4'
}
Spoiler-Alert: You don't want to read through except you encounter problems testing(...trust me you really don't want to read most especially the license!!!). also feel free to twitch the examples as much as possible to your taste in order to better understand how the API works. Here is a simple TetrisView containing an imageview in an horizontal manner
<linkersoft.blackpanther.blacktetris.TetrisView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:radius="4dp"
app:tetris="[vert-tetris]2#0"
app:blocksize="50dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/blackpanther"/>
</linkersoft.blackpanther.blacktetris.TetrisView>
Here is an example of a compound TetrisView containing an imageview and a basic view in a framelayout(it's a simple modification to the above)
<linkersoft.blackpanther.blacktetris.TetrisView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:radius="4dp"
app:tetris="[vert-tetris:0,0,0,0]2#0" //N.B => [vert-tetris:0,0,0,0] is the same as [vert-tetris]
app:blocksize="100px">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/blackpanther"/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#ff0000"
android:layout_gravity="center"/>
</FrameLayout>
</linkersoft.blackpanther.blacktetris.TetrisView>
XML Attributes Syntax
- blocksize: "the size to be used for each block that makes up the tetris"
- if value is in % the size is whatever percentage of the device screenwidth(p.o.sw).
- if value is in dp the size is exactly.
- if value is in px the size is exactly.
- radius: "radius of your choice in dp/px"
- tetris: "[type-of-tetris:left-pad,top-pad,right-pad,bottom-pad]block-size#topMargin in terms of block-size"
if block-size is in % xml-view might not be rendered in Android-Studio but running on a device/emulator will draw the view(this is due to the fact that the screen-width of the device is queried from the DisplayMetrics in it's constructor)
XML Attributes Butchered
- explaining further
- type-of-tetris => can either be 'vert-tetris' or 'horz-tetris' since tetris components can either be classified horizontal or vertical.
- padd => the padds take the dimension of the radius(dp/px) hence only numeric values are required.
- tetris => can be have more than a combination of vertical and horizontal tetrises(jump down for examples). furthermore
app:radius="4dp"
app:tetris="[vert-tetris:4,2,2,2]2#0"
app:blocksize="25%"
in the example above,implies
- tetris has a round edged curve of radius 4dp,
- tetris is vertical and has a height of 2x25%[block-size x (p.o.sw)] = 50%,
- tetris has topMargin in terms of block-size equal-to 0,
- tetris is further padded by 4dp,2dp,2dp and 2dp (left,top,bottom,right). similarly
app:radius="8dp"
app:tetris="[vert-tetris:0,0,2,2]2#3"
app:blocksize="25dp"
implies
- tetris has a round edged curve of radius 8dp,
- tetris is vertical and has a height of 25dp[block-size],
- tetris has topMargin in terms of block-size equal-to 3x25dp = 75dp,
- tetris is further padded by 0dp,0dp,2dp and 2dp (left,top,bottom,right).
Incase you want to change the Tetris @runtime in your Activity here's how:
public class THANOS extends AppCompatActivity {
String pMarginLeft="0%";
String pMarginTop="0%";
boolean paddDistortion=false;
String tetris="[horz-tetris]2#1";
String blocksizes="20%";
String radius="8dp";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.TonyStark);
TetrisView blackpanther = (TetrisView) findViewById(R.id.Tchalla);
blackpanther.resetTetris(pMarginLeft, pMarginTop, paddDistortion, tetris, blocksizes, radius);
}
}
1. Complex Shapes Here is a complex shape TetrisView containing an imageview
<linkersoft.blackpanther.blacktetris.TetrisView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:radius="4dp"
app:tetris="[horz-tetris:4,2,-2,2]2#1~[vert-tetris:2,2,2,2]3#0~[horz-tetris:-2,2,4,2]1#0"
app:blocksize="25%">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/blackpanther"/>
</linkersoft.blackpanther.blacktetris.TetrisView>
in case you were wondering why the topMargin in terms of block-size was needed, this example explicitly indicates why.(try twitching its values to better understand). The only special thing added here is the '~' found in the tetris-attribute value, which indicates separation between each tetris-types to be fused together as a single shape for the TetrisView i.e. the example above is made up of a horizontal-tetris + vertical-tetris + horizontal-tetris.
expantiating further
- the first tetris-type(horizontal-tetris) = 2blocks wide(i.e. 2x25% wide),
- the second tetris-type(vertical-tetris) = 3blocks tall(i.e. 3x25% tall),
- the last tetris-type(horizontal-tetris) = 1block wide(i.e. 1x25% wide).
confused? => take a quick glance above. still confused?? try playing with the code.
- Here is Another one
<linkersoft.blackpanther.blacktetris.TetrisView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="@+id/D"
app:radius="4dp"
app:tetris="[horz-tetris:2,2,-2,2]1#1~[vert-tetris:2,2,2,2]2#0~[vert-tetris:-2,2,2,2]3#1~[vert-tetris:-2,2,2,2]2#1"
app:blocksize="50dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/blackpanther"/>
</linkersoft.blackpanther.blacktetris.TetrisView>
Another one
app:tetris="[horz-tetris:2,2,-2,2]1#1~[vert-tetris:2,2,2,2]2#0~[horz-tetris:-2,2,2,2]1#1~[vert-tetris:-2,2,2,2]2#0"
Another one (*_*)
app:tetris="[horz-tetris:2,2,-2,2]1#2~[vert-tetris:2,2,2,2]2#1~[horz-tetris:-2,2,2,2]1#1~[vert-tetris:-2,2,2,2]3#0"
Ok so enough with DJ-Khaleding Another One, basically you get the idea. You are in charge of what tetrisables you would like to create.
2. Complex Arrangements and Shapes In situations you really want to stack up your TetrisViews like a real TetrisLock as per the way the Game is aimed at locking/plugging the right objects into one another correctly. I mean something like this:
that's where the TetrisClick(ViewGroup$FrameLayout) comes in. so that the clicks are handled correctly for TetrisViews whose bounding rectangles/boxes overlap also for positioning too.
please
Have Another one(>_<)
NOTE
app:GlobalBlockSize="200dp"
app:percentWidth="100%"
app:percentHeight="100%"
in <..TetrisClicker>..</..>
@Another one(>_<)
specifies that
- GlobalBlockSize for the TetrisClicker = 200dp
- Width of the TetrisClicker = 100% of 200dp(100% of GlobalBlockSize),
- Height of the TetrisClicker = 100% of 200dp(100% of GlobalBlockSize).
ALSO Automatically any TetrisView placed in the TetrisClicker inherits the GlobalBlockSize as it's blocksize reference instead of the screen-width of the device thus
app:blocksize="25%"
app:percentMarginTop="50%"
app:percentMarginLeft="75%"
in any <..TetrisView>..</..>
@Another one(>_<)
specifies that
- blocksize = 25% of 200dp(TetrisClicker's GlobalBlockSize),
- MarginTop of the TetrisView = 50% of 200dp(50% of TetrisClicker's GlobalBlockSize),
- MarginLeft of the TetrisView = 75% of 200dp(75% of TetrisClicker's GlobalBlockSize).
This project takes it's major motivation from the likes of Michael Jackson, Eminem, Chris-Brown, Chris-Hemsworth and Kevin Hart plus all other great programmers out there who only kept grinding and doing their thing.
If the compile link provided above @Quick Start fails to work you may try other alternatives such as installing with an empty Coca-Cola bottle after drinking. pull the bottle's repo or oper before forking the bottle and should this fail search on google for the key phrase '2.39 niosrev ?siht od I did yhw' 3-times and see what happens.
LiNKeR
,me
,myself
and finally I
. all graciousness to this four-musketeers who reside on planet Git. we appreciate ourselves once again for all wisdom imparted and efforts made therein to this library.
- Do not forget to add different Id/Tags TetrisViews before assigning click-listeners the normal way
- Do not add too many and/ large TetrisViews simultaneously as it could lead to an OutOfMemory Error
- Call invalidate to TetrisView if Items inside update and drawing doesn't render updates/Fork the project and improve[ ANY CONTRIBUTION TO THIS PROJECT WOULD BE WARMLY APPRECIATED ]
- please add your name to the README.md as a contributor before making commits to the project
- try playing around with the paddDistortion attribute(via the xml) in order to fully understand what it does,although in my opinion it's just a useless feature just to make the 'xml-view' way bulkier.(well if you don't think so... It's gr8 we don't think alike).
Have Aother one(-_-)
The MA License (The Mission-Accomplished License)
Copyright (c) 2044 MAC-44 OFAP C.V.S RPL SPARK ETL REVISION BUILD 45.34BL
Permission is granted and free as Fork, to any one stealing and obtaining a copy
of this software and associated documentation files (the "Softworn"), to deal
in the Software without aggressions, agitations, hesitations, including with
2-Chainz on the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Sheet, and to permit any Trump persons to whom the Softworn is
furnished and addressed to do so, subject to the following conditions:
THE SOFTWORN IS PROVIDED "AS IF" AND BY USING,MODIFYING OR DISTRIBUTING
YOU HAVE TOTALLY AGREED THAT "AT ONCE" UPON A TIME THERE WAS A PRINCE CALLED
CINDER-BRELLA, WHO IN TURN MARRIED CINDER-RELLA DUE TO YOUR USE OF THIS LIBRARY
AND BORE A MR MEXICO AND AN ENTITY NAMED TRUMP-HEMSWORTH-THE-GREAT-WALL-BUILDER-
WHO-BUILT-A-WALL-STRAIGHT-OUTTA-MAMAS-WOMB-BEFORE-FINALLY-FARTING-ALL-THROUGH PRESIDENCY.
WITH NO LOOSE CHAINS AND ICE, EVERY COMMIT TO THE PROJECT OTHER THAN FROM THE FOUR-MUSKETEERS
MUST BE SLIPPERY AND FRESH, WITH NO DRIPS AND DABS (NAE NAES ARE ALLOWED).
THAT IN YOUR USE OF THIS LIBRARY YOU ARE OF THE HIGH OPINION THAT THE AUTHOR
OF THIS LIBRARY IS FAR STUPID BUT SANER THAN WALL BUILDERS.
!!!!!!!!!!!!!!!!!!!!!!!!!!!!Another one!!!!!!!!!!!!!!!!!!!!!!!!!!!!