Never so amazing! Hello, SuperTextView

Time:2019-5-10

brief introduction

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

SuperTextViewInherited from TextView, it can greatly reduce the complexity of the layout, and make some common effects very easy to achieve and efficient. At the same time, it has built-in animation driver, you just need to write reasonably.AdjusterAnd thenstartAnim()You can see the expected animation effect. It’s just a control, so you can integrate it into your project with no effort.

Characteristic

  1. You don’t have to write and manage a lot of <shape> files for background maps anymore.

  2. Re-optimizedState Diagram FunctionIt allows you to precisely control the size of the state diagram, as well asSuperTextViewLocation in.

  3. It supports the setting of rounded corners and can accurately control the position of rounded corners.

  4. Can easily achieve control border effect.

  5. Support for text edge, which makes the hollow text effect possible.

  6. Built-in animation driver, you just need to cooperateAdjusterReasonable use is enough.

  7. AdjusterThe emergence of the control makes you have control over the drawing process, good design makes it perfect to achieve most of the effect in your mind.

Guide for use

Supported properties

SuperTextViewVery convenient support for setting properties directly in xml, and you can see the effect immediately. It’s as convenient as you usually use TextView.

<SuperTextView
    android:layout_width="50dp"
    android:layout_height="50dp"
    
    // Set rounded corners. It acts on both filling and border (if the border exists).
    // If you want to set it to a circle, you only need to set the value to 1/2 of the width or length. 
    app:corner="25dp"  
    // Set the upper left corner
    app:left_top_corner="true"
    // Set the upper right corner
    app:right_top_corner="true"
    // Set the lower left corner
    app:left_bottom_corner="true"
    // Set the lower right corner
    app:right_bottom_corner="true"
    // Setting Fill Colors
    app:solid="@color/red"  
    // Set border color
    app:stroke_color="@color/black"  
    // Set the width of the border.
    app:stroke_width="2dp" 
    // Place a drawable on the background layer. Default center display.
    // And the default size is half of SuperTextView.
    app:state_drawable="@drawable/emoji"  
    // Set the display mode of drawable. The optional values are as follows:
    // left, top, right, bottom, center (default value)
    //leftTop、rightTop、leftBottom、rightBottom、
    // fill (fills the entire SuperTextView, which invalidates the size of the settings drawable)
    app:state_drawable_mode="center" 
    // Setting height of drawable
    app:state_drawable_height="30dp"
    // Setting width of drawable
    app:state_drawable_width="30dp"
    // Set the distance of drawble to the left of the base position
    app:state_drawable_padding_left="10dp"
    // Set the distance of drawble relative to the top of the base position
    app:state_drawable_padding_top="10dp"
    // Boolean type. Whether to display drawable.
    // If the drawable you want to set is displayed, it must be set to true.
    // When you don't want it to be displayed, set it to false.
    app:isShowState="true" 
    // Whether to turn on the function of text edge drawing.
    // Note that the color set by setTextColor () will be overwritten when this mode is enabled.
    // You need to use text_fill_color to set the color of the text.
    app:text_stroke="true" 
    // Description color of text. The default is Color. BLACK.
    app:text_stroke_color="@color/black"
    // Width of text edge.
    app:text_stroke_width="1dp"
    // The color of text filling. The default is Color. BLACK.
    app:text_fill_color="@color/blue" 
    // Boolean type. Whether the Adjuster function is enabled or not.
    // Specifically, you need to implement an Adjuster for SuperTextView in Java.
    // When you enable this function without implementing your own Adjuster,
    // SuperTextView will enable the default Adjuster. It will adjust the text size according to certain rules.
    app:autoAdjust="true" 
    />

These attributes can be set dynamically in Java. At the same time, their values can be obtained. For example:

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

Round and border

In order to achieve the above effect, you usually need to write and manage a large number of < Shape > files. Now you just need to write in XML or codeSuperTextViewSet it directly.

Not simple rounded corners

Unlike simple rounded corners,SuperTextViewSupports precise control of the position of rounded corners. One, two, three are all right. You control everything.

Magical Character Description

Character margins have never been so simple!

Efficient State Diagram

Unlike native Drawable,SuperTextViewMore elaborate control operations are provided for Drawable. You can easily specify the size and location of a Drawable, and you can do it with just one attribute.

I’m sure you have a deep feeling. In order to achieve the effect in the picture above, you often need to nest multi-layer layout (3 layers in general, right? ) andSuperTextViewOnly one control, and very simple and efficient can be achieved. It can dramatically reduce the layout complexity of your App and the rendering time of the view tree.

Detonated Adjuster

AdjusterDesigned for use inSuperTextViewInsert some operations into the drawing process. This is of great significance. For example, the default implementationDefaultAdjusterCan dynamically adjust the size of the text. Of course, you can use it to achieve a variety of effects.

To make Adjuster effective, you must callSuperTextView.setAutoAdjust(true)To enable the Adjuster function. Of course, you can so easily stop by callingSuperTextView.setAutoAdjust(false)。 And you need to pay attention to the invocation order, because once invokedSuperTextView.setAutoAdjust(true)If Adjuster is not set, the default will be enabledDefaultAdjuster(It can dynamically resize text until you set up your own Adjuster)

Intervention Control Drawing

Implementing an Adjuster requires inheriting SuperTextView. Adjuster and implementing itadjust(SuperTextView v, Canvas canvas)Method. Adjuster. adjust () is called during each drawing process, which means you can incredibly interfere with the drawing process of the control from outside.

public class YourAdjuster extends SuperTextView.Adjuster {

  @Override
  protected void adjust(SuperTextView v, Canvas canvas) {
    //do your business。
  }

}

Note that if you turn on the animation, you must be very careful to write the code in adjuster (). Because animation is drawn at 60 frames per second. This means that this method will be called 60 times per second! So, don’t create objects repeatedly in this method, it will jam! The reason is that a large amount of time will cause [memory jitter], leading to frequent occurrence of GC. For more information, you can read my two articles:

  • [Android Memory Base – Memory Jitter http://www.jianshu.com/p/69e6f894c698]

  • [Tell you two pictures why your App gets stuck? Http://www.jianshu.com/p/df4d5ec779c8]

Response to Touch Events

If you overload Adjuster’sonTouch(SuperTextView v, MotionEvent event)Method, you will be able to obtainSuperTextViewTouch events. This is an important point if you want to continue to be right.SuperTextViewTo handle touch events, you must makeonTouch()Returns 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 an amazing effect

Benefit fromSuperTextViewBuilt-in animation drivers, you can combine Adjuster to achieve incredible animation effects. All you need to do is call after you have properly written the AdjusterstartAnim()andstopAnim()To start/stop animation.

Never so amazing! Hello, SuperTextView

As you can see, the above effect is achieved through Adjuster. And this kind ofPlug and playThe design allows you to be in the same place at any time.SuperTextViewWith the new Adjuster, all you need to do is create a new Adjuster and call itsetAdjuster()

before@Alex_CinWant to see Ripple ripple effect, so inRippleAdjuster.javaIn this article, I demonstrated how to use Adjuster and animation driver to achieve the Rippler ripple effect shown above. [RippleAdjuster.java link: https://github.com/chenBingX/SuperTextView/blob/master/app/src/main/java/com/coorchice/supertextview/SuperTextView/Adjuster/RippleAdjuster.java]

Look, you can use Adjuster to achieve your Ripple effect.

Specify the level of Adjuster

AdjusterThe function of control level is designed carefully. You can go through it.Adjuster.setOpportunity(Opportunity opportunity)To specify the drawing level of Adjuster.

staySuperTextViewThe drawing level is divided into three levels from bottom to top: background level, Drawable level and text level. Use Opportunity to specify that your Adjuster wants to be inserted between those levels.

public enum Opportunity {
      BEFORE_DRAWABLE, // Background and Drawable Layers
      BEFORE_TEXT, //Drawable Layer and Text Layer
      AT_LAST//Upper Layer
}

Three types of Opportunity sketches.

The default value isOpportunity.BEFORE_TEXT。 That is, an example of the second figure.

In fact, as long as you like,SuperTextViewIt’s like a canvas on which you can freely sprinkle your ideas. It allows you to concentrate on creating without worrying about writing code that doesn’t bother you.

How to Start Using

  • If you like itSuperTextViewI hope I can make a point in Github.starOh

  • It needs motivation to write articles and share them in spare time. What’s more, would you please give me some encouragement?

  • I’ve been creating new dry goods on a regular basis, and if I want to get on the bus, I just need to get a little attention from my home page. Departure time

Method 1

In yoursbuild.gradleChina:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    compile 'com.github.chenBingX:SuperTextView:v1.0'
}

Method two

You can Clone my [Github repository https://github.com/chenBingX/SuperTextView] and find it under the Library package.SuperTextViewandattrs.xmlCopy it to your project.

Now, you can start using it.SuperTextViewNow.

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