Never been so amazing! Hello, SuperTextView

[[189231]]

【Quoted from CoorChice's blog】 Introduction

Welcome to SuperTextView. This document will show you how to use this control to improve the efficiency of your project construction.

SuperTextView inherits from TextView, which can greatly reduce the complexity of layout and make some common effects very easy to implement and efficient. At the same time, it has built-in animation driver. You only need to write Adjuster reasonably, and then startAnim() to see the expected animation effect. It is just a control, so you can integrate it in your project without any effort.

Features

1. You no longer have to write and manage numerous <shape> files for background images.
2. The re-optimized state diagram function allows you to precisely control the size of the state diagram and its position in SuperTextView.
3. Supports setting rounded corners and can precisely control the position of the rounded corners.
4. Can easily achieve control border effect.
5. Supports text stroke, which makes hollow text effect possible.
6. Built-in animation driver, you just need to use it properly with Adjuster.
7. The emergence of Adjuster gives you control over the drawing process of the control, and good design enables it to accurately achieve most of the effects in your mind.

Usage Guidelines

Supported properties

SuperTextView conveniently supports setting attributes directly in XML, and you can see the effect immediately. It is as convenient as using TextView normally.

 <SuperTextView
    android:layout_width= "50dp"  
    android:layout_height= "50dp"   
 
 //Set the rounded corners. This will apply to both the fill and the border (if any).
 //If you want to set it to a circle, just set the value to 1/2 of the width or length.
 app:corner= "25dp"    
 //Set the upper left corner radius
    app:left_top_corner= "true"  
 //Set the upper right corner rounded
    app:right_top_corner= "true"  
 //Set the lower left corner radius
    app:left_bottom_corner= "true"  
 //Set the bottom right corner rounded
    app:right_bottom_corner= "true"  
 //Set the fill color
 app:solid= "@color/red"    
 //Set the border color
    app:stroke_color= "@color/black"    
 //Set the border width.
 app:stroke_width= "2dp"   
 //Place a drawable on the background layer. It is centered by default.
 //And the default size is half of SuperTextView.
    app:state_drawable= "@drawable/emoji"    
 //Set the display mode of the drawable. The optional values ​​are as follows:
 // left , top , right , bottom, center (default value),
    //leftTop, rightTop, leftBottom, rightBottom,
 //fill (fill the entire SuperTextView, which will invalidate the size of the drawable)
    app:state_drawable_mode= "center"   
 //Set the height of the drawable
    app:state_drawable_height= "30dp"  
 //Set the width of the drawable
    app:state_drawable_width= "30dp"  
 //Set the distance of the drawable relative to the left of the base position
    app:state_drawable_padding_left= "10dp"  
 //Set the distance of drawable relative to the top of the base position
    app:state_drawable_padding_top= "10dp"  
 // Boolean type. Whether to display the drawable.
 //If you want the set drawable to be displayed, it must be set to true .
 //When you don't want it to be displayed, just set it to false .
 app:isShowState= "true"   
 //Whether to enable text stroke function.
 //Note that the color set by setTextColor() will be overwritten after enabling this mode.
 //You need to set the text color via text_fill_color.
 app:text_stroke= "true"   
 // The stroke color of the text. The default is Color.BLACK.
    app:text_stroke_color= "@color/black"  
 // The width of the text stroke.
    app:text_stroke_width= "1dp"  
 // The color of the text fill. The default value is Color.BLACK.
    app:text_fill_color= "@color/blue"   
 // Boolean type. Whether to enable the Adjuster function.
 //What to do specifically, you need to implement an Adjuster for SuperTextView in Java.
 //When you enable this feature without implementing your own Adjuster,
 //SuperTextView will enable the default Adjuster. It will adjust the text size according to certain rules.
 app:autoAdjust= "true"   
 />

All of the above properties can be set dynamically in Java. Their values ​​can also be obtained. For example:

 mSuperTextView.setCorner(10); 
 
 mSuperTextView.getCorner();

Circles and borders

To achieve the above effect, you usually need to write and manage a lot of <shape> files. Now you only need to set the SuperTextView directly in xml or code.

Not simple rounded corners

Different from simple rounded corners, SuperTextView supports precise control of the position of rounded corners. One, two, or three are all fine. Everything is under your control.

Magic text stroke

Text strokes have never been so easy!

Efficient Statechart

Different from native Drawable, SuperTextView provides more refined control over Drawable. You can easily specify the size and position of Drawable with just one attribute.

I believe you must have felt deeply that to achieve the effect in the above picture, you often need to nest multiple layers of layout (usually 3 layers?). SuperTextView only needs one control, and it can be achieved very simply and efficiently. It can greatly reduce the layout complexity in your App and reduce the drawing time of the view tree.

Exploding Adjuster

Adjuster is designed to insert some operations in the drawing process of SuperTextView. This is very important. For example, the default implementation of DefaultAdjuster can dynamically adjust the size of the text. Of course, you can use it to achieve a variety of effects.

To make the Adjuster take effect, you must call SuperTextView.setAutoAdjust(true) to enable the Adjuster function. Of course, you can stop it at your convenience by calling SuperTextView.setAutoAdjust(false). Also, you need to pay attention to the order of calls, because once SuperTextView.setAutoAdjust(true) is called and the Adjuster is not set, the default DefaultAdjuster (which can dynamically adjust the text size) will be enabled until you set your own Adjuster

Drawing of intervention controls

To implement an Adjuster, you need to inherit SuperTextView.Adjuster and implement the adjust(SuperTextView v, Canvas canvas) method. Adjuster.adjust() will be called during each drawing process, which means you can intervene in the drawing process of the control from the outside in an incredible way.

 public class YourAdjuster extends SuperTextView.Adjuster { 
 
 @Override
  protected void adjust(SuperTextView v, Canvas canvas) {
 //do your business.
 } 
 
 }

Note that if you enable animation, you must be very careful when writing the code in adjuster(). Because the animation will be drawn at 60 frames per second. This means that this method will be called 60 times per second! Therefore, do not repeatedly create objects in this method, or it will jam! The reason is that a large amount of objects in a short period of time will cause [memory jitter], resulting in frequent GC. For related knowledge, you can read my two articles:

• [Android Memory Basics - Memory Jitter http://www.jianshu.com/p/69e6f894c698]
• [Use two pictures to tell you why your app freezes? http://www.jianshu.com/p/df4d5ec779c8]

Responding to touch events

If you override the onTouch(SuperTextView v, MotionEvent event) method of Adjuster, you will be able to get the touch events of SuperTextView. This is an important point. If you want to continue to process the touch events of SuperTextView, you must make onTouch() return true. Otherwise, you can only receive an ACTION_DOWN event, not an event stream.

 public class YourAdjuster extends SuperTextView.Adjuster { 
 
 @Override
  protected void adjust(SuperTextView v, Canvas canvas) {
 //do your business.
 } 
 
 @Override
 public boolean onTouch(SuperTextView v, MotionEvent event) {
    //you can get the touch event.
    //If want to get a series of touch event, you must return   true here.
 } 
 
 }

Such a stunning effect

Thanks to the built-in animation driver of SuperTextView, you can combine Adjuster to achieve incredible animation effects. All you need to do is call startAnim() and stopAnim() to start/stop the animation after you have written the Adjuster properly.

As you can see, the above effect is achieved through Adjuster. And this plug-and-play design allows you to use a new Adjuster on the same SuperTextView at any time. All you need to do is create a new Adjuster and then call setAdjuster().

Previously, @Alex_Cin wanted to see the Ripple effect, so in RippleAdjuster.java, I demonstrated how to use Adjuster and animation driver to achieve the Ripple effect in the above picture. [RippleAdjuster.java link: https://github.com/chenBingX/SuperTextView/blob/master/app/src/main/java/com/coorchice/supertextview/SuperTextView/Adjuster/RippleAdjuster.java]

See, you can implement your own Ripple effect using Adjuster.

Specify the level of the Adjuster

Adjuster is thoughtfully designed with the function of controlling the effect level. You can specify the drawing level of Adjuster through Adjuster.setOpportunity(Opportunity opportunity).

In SuperTextView, the drawing layers are divided into three layers from bottom to top: background layer, Drawable layer, and text layer. Use Opportunity to specify which layer your Adjuster wants to be inserted into.

 public enum Opportunity {
 BEFORE_DRAWABLE, //Between the background layer and the Drawable layer
 BEFORE_TEXT, //Between the Drawable layer and the text layer
 AT_LAST //Top layer
 }

Diagram of three types of opportunities.

The default value is Opportunity.BEFORE_TEXT, which is the example in the second picture.

In fact, as long as you want, SuperTextView is equivalent to a canvas, you can freely express your creativity on it. It allows you to focus on creation without worrying about writing useless and troublesome codes.

How to get started

• If you like SuperTextView, I hope you can give it a star on Github!
• It takes motivation to take out spare time to write articles and share them. Please give me some encouragement by giving me a thumbs up.😄
• I have been creating new useful information from time to time. If you want to join the train, just go to my [Personal Homepage] and follow me.

Method 1

Add this to your build.gradle:

 allprojects {
 repositories {
 ...
        maven { url 'https://jitpack.io' }
 }
 } 
 
 dependencies {
    compile 'com.github.chenBingX:SuperTextView:v1.0'  
 }

Method 2

You can clone my [Github repository https://github.com/chenBingX/SuperTextView], then find SuperTextView and attrs.xml under the Library package and copy them to your project.

Now, you can start using SuperTextView.

Click here to jump to the SuperTextView project address. https://github.com/chenBingX/SuperTextView