Android pull-down refresh framework implementation code example

The pull-down refresh function was used in the project some time ago. Similar demos have been found on the Internet before, but the quality of these demos is uneven, the user experience is not good, and the interface design is not good. Zhang couldn't help it. He finally couldn't bear it. He wrote a drop-down refresh framework. This framework is a general framework. The effect and design feel are good. Now I'll share it with you.

1、 About drop-down refresh

The user interaction of pull-down refresh was first invented by Loren brichter, the founder of twitter. Some theories believe that pull-down refresh is an application suitable for arranging feeds in chronological order from new to old. In this application scenario, users will naturally pull down to find the updated content after reading the old content, so pull-down refresh is very reasonable. You can refer to this article: interesting drop-down refresh. Below I post an interesting case of drop-down refresh.

2、 Implementation principle

No matter how good-looking the above examples are, they are essentially the same, that is, a drop-down refresh control is usually composed of the following parts:

【1】Header

Header usually has drop-down arrow, text, progress bar and other elements. Its state can be changed according to the drop-down distance, so as to display different styles

【2】Content

This part is the content area. There are many examples on the Internet that add headers directly to the listview, but this has limitations, because in many cases, the listview is not necessarily used to display data. We put the view to display content in one of our containers. If you want to implement a drop-down refresh of displaying data with listview, you need to create a listview and rotate it into my container. We handle the events of this container (down, move, up). If we pull down, we will slide the whole layout down to display the header.

【3】Footer

Footer can be used to display upward arrows, automatically load more progress bars, etc.

The above three parts summarize the layout structure as shown in the figure below:

As for the above figure, several points need to be explained:

1. This layout is extended to LinearLayout and arranged vertically

2. The order from top to bottom is: header, content and footer

3. The parent control is filled with content, and the header and footer are invisible by setting the padding of top and bottom, that is, to make them beyond the screen

4. During the pull-down, call the scrollto method to slide the whole layout down to display the header. The pull-up is just the opposite of the pull-down.

5. The derived class needs to fill the content view into the parent container. For example, if you want to use it, you need to add listview, Scrollview, WebView, etc. to the container.

6. The red area in the figure above is the screen size (strictly speaking, the screen size here is not accurate, but the content area should be more accurate)

3、 Concrete implementation

After understanding the implementation principle and process, we try to implement it concretely. First, in order to better expand and design more reasonably in the future, we abstract the pull-down refresh function into an interface: 1. Ipulltorefresh < T extensions View >

Its specific definition method is as follows:

This interface is a generic type. It accepts the derived class of view. Isn't it a view that needs to be put into our container?

2、PullToRefreshBase<T extends View>

This class implements the ipulltorefresh interface, which is inherited from LinearLayout as an abstract base class for drop-down refresh. If you want to implement the drop-down refresh of listview, you only need to extend this class and implement some necessary methods. The responsibilities of this class mainly include the following:

3. Pulltorefreshbase < T extensions View > inheritance relationship

Here, I implement three derived classes of drop-down refresh, namely listview, Scrollview and WebView. Their inheritance relationship is as follows:

There are several points to note about pulltorefreshbase class and its derivatives and classes:

For listview, Scrollview and WebView, the implementation of whether they slide to the top or bottom is different. Therefore, two abstract methods need to be called in pulltorefreshbase class to judge whether the current position is at the top or bottom, and its derived classes must implement these two methods. For example, for listview, the condition for sliding to the top is that the first child is fully visible and the first position is 0. The two abstract methods are:

The abstract method to create a drop-down refreshable view (that is, content view) is

4、LoadingLayout

Loadinglayout is an abstraction of refresh layout, which is an abstract base class. Both header and footer extend to this class. This class provides two abstract methods:

getContentSize

This method returns the size of the current refresh layout. Usually, it returns the height of the layout. In order to expand to horizontal pull in the future, the method name is not taken as getlayoutheight(). This return value will be used as the critical value for whether it can be refreshed after letting go. If the drop-down offset value is greater than this value, it is considered that it can be refreshed, otherwise it will not be refreshed, This method must be implemented by a derived class.

setState

This method is used to set the current refresh layout status. Pulltorefreshbase class will call this method. This method will be called when entering pull-down, release and other actions. The derived class only needs to realize different interface display according to these statuses. For example, the arrow will be displayed in pull-down status, and the loading Icon will be displayed in refresh status.

Possible status values are: reset, pull_ TO_ REFRESH,RELEASE_ TO_ REFRESH,REFRESHING,NO_ MORE_ DATA

The inheritance relationship between loadinglayout and its derived classes is shown in the following figure:

We can make our own headers and footers at will. We can also implement the headers and footers in various drop-down refresh cases as shown in Figure 1 and Figure 2. Just rewrite the above two methods getcontentsize() and setstate(). Headerloadinglayout, which by default is a layout that displays an arrow style, while rotateloading layout is a layout that displays a rotation icon.

5. Event handling

We must override the two event related methods onintercepttouchevent() and ontouchevent() of the pulltorrefreshbase class. Listview, Scrollview and WebView are placed inside pulltorrefreshbase, and the event is first passed to the pulltorrefreshbase #onintercepttouchevent() method, so we should handle the action in this method_ Move event: judge whether the current listview, Scrollview and WebView are at the top or bottom. If so, start to truncate the event. Once the event is truncated, the subsequent events will be passed to the pulltorefreshbase#onintercepttouchevent() method, and then in action_ Move the entire layout in the move event to realize the pull-down or pull-up action.

6. Scroll layout (scrollto)

As can be seen from the layout structure in Figure 3, by default, the header and footer are placed at the top and bottom of the content view. Set padding to make them run out of the screen. If we scroll down the entire layout for a certain distance, the header will be displayed. Based on this situation, in my implementation, Finally, I called scrollto to implement the drop-down action.

Generally speaking, these are the important points of implementation. There will be a lot of specific details in implementation. You can refer to the code.

4、 How to use

The code for using the drop-down refresh is as follows

This is to initialize a drop-down refresh layout and call setcontentview to set it into the activity.

After the pull-down refresh is completed, we can call onpulldownrefreshcomplete() and onpulluprefreshcomplete() methods to stop the refresh and load

5、 Running effect the running effect diagram of the demo is listed here.

6、 Bug repair

The known bug fixes are as follows. The watcher who finds the code bug can also give me feedback. Thank you~~~

1. For the drop-down refresh of listview, when scrolling to the bottom is enabled and automatic loading is enabled, if the footer changes from hidden to displayed, the display exception occurs. This problem has been fixed. The corrected code is as follows:

Loadinglayout #show method, the modified code is as follows:

After changing LayoutParameter, call the requestLayout () method.

Image rotation compatible with 2. X system

What I thought before was that this system only needs to be compatible with more than 3. X, but I found that many netizens have encountered compatibility problems in the use process. This time, I took the time to realize this compatibility together.

Onpull is modified as follows:

Imageviewrotationhelper is mainly used to realize the rotation function of ImageView. Internal versions are distinguished. The implementation code is as follows:

The most important thing is that on the 2. X version, rotate the ImageView to use the matrix.

The pulltorrefreshbase constructor is compatible with 2. X

The construction method declaration of the three parameters is marked as follows:

@SuppressLint("NewApi")

@TargetApi(Build.VERSION_CODES.HONEYCOMB)

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.