Skip to content

A beautiful UI gem that displays view composites in a box/tetris shape adding some magic with a tasteful curve all around

License

Notifications You must be signed in to change notification settings

zealbell/TetrisView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JitPack Project Status: Active - Initial development has started, usable release; work hasn't been stopped

TetrisView

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.

Synopsis

This Library consists of two Major views:

  1. 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
  2. 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.

Quick Start

   dependencies {
      compile 'com.github.54LiNKeR:TetrisView:1.2.3.4'
   }

Code Example

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

simple-tetris

    <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).

Activity

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);
    }
}

Complex Tetrises

1. Complex Shapes Here is a complex shape TetrisView containing an imageview

complex-shape-tetris0

          <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

complex-shape-tetris1

    <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

complex-shape-tetris2

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 (*_*)

complex-shape-tetris3

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:

complex-arrangement-tetris

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).

Motivation

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.

Installation

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.

Contributors

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.

NOTE

  • 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(-_-)

License

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!!!!!!!!!!!!!!!!!!!!!!!!!!!!

LiNKeR

About

A beautiful UI gem that displays view composites in a box/tetris shape adding some magic with a tasteful curve all around

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages