Click on the top of the blue word code eggs

I use wechat and Weibo

Author: r17171709

Blog: http://www.jianshu.com/u/470afcb80dc2

The article directories

  • Define the associated base properties

  • measurement

  • Click on the effect of

  • use

  • Animation effects

  • Initialization of animation parameters

  • Click on the switch

  • Reuse problem

Foldable TextView is a very common function, I believe we have experienced this scene in wechat moments: friends send jokes only half, the following is a piece of white, you have to expand the full text to know the final result.

It’s not exactly fancy stuff, and there are examples on the Internet, but it needs to be tweaked a little bit, A newbest should is Manabu – GT ExpandableTextView (https://github.com/Manabu-GT/ExpandableTextView). So let’s learn about it and masturbate ourselves

The project has been released in making (https://github.com/r17171709/android_demo/tree/master/ExpandableTextView)

Sina weibo

Let’s first implement a basic function, can click to put on the line, other effects regardless

0

Define the associated base properties

Take a closer look at the image above. In fact, this custom control is made up of two parts, one is the normal display text part, and the other is the retraction button, so we can achieve this by combining the layout form

This is because we are going to operate on the two TextViews in the combined layout, so the easiest way is to just grab the two objects and use them

Then there is the design of custom properties

What’s left is a very traditional initialization

OK, everyone will say, the following began to explain logic one by one

1

measurement

Needless to say, onMeasure is responsible for measuring the ViewGroup to understand the size of the overall ViewGroup. So we can use this method here to control the size of the combined layout retraction

First, if you do not change the text between setText and setText, or if the combined layout itself is not displayed, then we decisively terminate the calculation because the calculation process is meaningless

With that in mind, we can actually implement the function of folding a TextView

If the number of lines of text does not meet the minimum number of lines that can be folded and expanded, it terminates and is presented to us in its original state

By default we set it to fold. In fold, we set the current number of rows to the maximum number of rows that can be displayed, and the button is displayed

The measurement part is over. Remember another key point here, every time the UI changes, we have to remeasure it, otherwise we end up with something wrong

2

Click on the effect of

It’s just a retractable switch

3

use




Does not drive the drawing effect retraction function

4

Animation effects

We’ve done the basics, but we can’t stop there. By clicking on the transition switch, the effect of this experience will certainly be better

To continue adding our custom properties, here we add the animation execution time

The default is 500 ms

5

Initialization of animation parameters

Since height changes are involved, we must know the height values in the two different states of unfurl and unfurl, because the animation change range is within these two values. The height in the expanded state is the height of the ViewGroup with maxLines set to integer. Max, and the height in the folded state is the height of the ViewGroup with maxExpandLines set

Gets the height of the text


The height after retracting, this will not be available until the ViewGroup is finished rendering. Here lastHeight refers to the total height minus the height of the text portion, which is the height of the area occupied by the put and drop buttons

Clearly, the ViewGroup fully expanded is realTextViewHeigt+lastHeight, and fully collapsedHeight is collapsedHeight. There is no change of text in the whole process, so there is no relevant calculation, just modify the height

6

Click on the switch

Click the switch part is mainly the operation of animation

Of course, in order to prevent the toggle button from being hit again during the execution of the animation, you can intercept the click event directly like this


Drive the function of drawing effect retraction

7

Reuse problem

What you’ve just seen is a common scenario, so there’s usually no problem with this. But when it comes to list reuse, the problem is messy again, such as previously expanded closed, but the bottom text does not change and so on. In fact, the solution to this problem is also very simple, as long as we record the current state and each time reuse to set again

Take a look at some list entity beans, which are mainly text and state variables

Add a state-changing callback interface to the ViewGroup so that the click part can be called back to the data source in the Adapter without further details about setOnClickListener

Finally, and crucially, we extend the setText() method. We need to bring the retractable state back in, and one key thing, reset the height

Let’s see what the end result is

Use in lists

Messages have benefits, please see the specific rules

“Help you develop good habits”