Encapsulation and implementation of common category controls (CollectionView + Swift3.0 +) and swiftcollectionview for information apps developed by iOS

Encapsulation and implementation of common category controls (CollectionView + Swift3.0 +) and swiftcollectionview for information apps developed by iOS

In today's blog, we will implement the encapsulation of controls that are commonly used in common messaging apps for classification selection. This blog does not use any new technical points. If you have to say what new technical points are used, you can barely say, some new features added by UICollectionView after iOS9 are used. The main technical points involved in this blog are Cell movement of UICollectionView, gesture recognition, control encapsulation, closure callback, interface-oriented programming, and generics in Swift. These technical points have been used many times in previous blogs, but this blog uses these technical points to fulfill our specific needs.

 

I. instance running effect

The effect below is the running effect of the Demo involved in this blog. Of course, the effect below is commonly used in some information apps when selecting categories. It is mainly used for UICollectionView. Of course, there are also some instances online for the implementation of the following results. Although the effects of this blog are similar to those of others, the code design and structure implementation are still different. The following figure shows how to update the Cell only supported by UICollectionView after iOS9. We will introduce it in detail later. Of course, this blog is still implemented using Swift3.0.

In our previous blog, we introduced various callbacks of UICollectionView, how to customize the layout of CollectionView, and how to use CollectionView to customize waterfall streams. For more information about the previous blog, go to the UICollectionView detail series.

　　

 

We can use Reveal to view the hierarchical relationship of the above results. The following figure shows the effect of Reveal. The following results show that the implementation of the page is not complex. It is mainly used for UICollectionView.

　　

 

 

The above effect is what we achieved in our blog today. The following two effects are the Demo we provided when talking about UICollectionView and custom layout, the source code of the Demo below is also shared on Gitbub. In other words, the content of today's blog is still the application of UICollectionView.

The UICollectionView control is very powerful. It is highly customizable and flexible.

 

 

 

2. Call controls

We encapsulate the control selected for the above classification. Next, we will provide the initialization and calling methods. Below is the call method of the encapsulated control. The two-dimensional array dataSource below is the data source in CollectionView of the encapsulated control. The data items in the data source must follow the CEThemeDataSourceProtocal protocol we specified. We will give the corresponding content in the Protocol later.

The createDataSource () method in the DataSourceTools class is responsible for creating the required test data. After the data source is created, pass the corresponding data source to our control when instantiating the CESelectThemeController object. Then, set the update data source closure callback for the control object. That is to say, when we use the encapsulated control to complete the DataSource operation, the closure callback below will be executed, send the updated data source to the caller. As follows:

　　

 

The CEThemeDataSourceProtocal Protocol regulates the methods that must be implemented for data items in the data source. The following is the implementation code of the CEThemeDataSourceProtocal protocol. Of course, the code implementation of this protocol is relatively simple. For a menuItemName () method, the return value of this method is a string. This string is the name of the Menu to be displayed on the Cell.

　　

 

Below is the test data code for creating our data items. The MeteData class below is the data we want to display in the above control test Cell. This class implements the CEThemeDataSourceProtocal protocol and provides the menuItemName () method.

The createDataSource () method in DataSourceTools is used to create test data, instantiate MeteData cyclically, store the data in a two-dimensional array, and return the two-dimensional data group. The two-dimensional array returned by this method is the data source we need.

　　

 

 

 

Iii. Core Control Code

The call method of the control is briefly introduced above. Next, let's take a look at the implementation of the core code of the control. Let's just put it down. It's just the movement of Cell for Long-pressed Gesture Recognition and CollectionView. The following describes in detail the implementation of the core code of the control.

 

1. UICollectionViewDataSource

Below is the proxy method for using the DataSource of UICollectionView in this control. The previous Several proxy methods we have discussed earlier will not be described too much. The following two frames are the main character of this blog, and one is the proxy method for enabling Cell Mobile, the other method is to update the data source after moving, as shown below.

　　

 

2. Add a long-pressed gesture for CollectionView

Add LongPressGestureRecognize to CollectionView. The addGestureRecognizer () method is used to add a long-pressed gesture to our CollectionView. The longPress () method is the method triggered by this long-pressed gesture. At the beginning of the gesture, we call the longPressBegin () method. When the gesture changes, we call the longPressChange () method. At the end of the gesture, we call longPressEnd (). These three methods are the key to this blog, and the implementation method is shown below.

　　

 

3. longPressBegin () method implementation

Below is the method triggered when the long-pressed gesture starts. First, the IndexPath of the cell where the point is located is obtained based on the touch point. If the Cell is not the Cell in the first Section, the start event of the gesture is not triggered, because we stipulate that only the Cell in the first Section has the long-pressed drag gesture.

If the Cell meets our requirements, call the beginInteractiveMovementForItem () method of UICollectionView to start the mobile Item function. Of course, this method is added after iOS9. After starting, we will hide the current Cell, and then generate a snapshot of the current Cell, so that the snapshot can be moved with our fingers. The Code is as follows:

　　

 

4. longPressChange () method implementation

The following method is triggered when the finger moves. The code of this method is relatively simple. It mainly changes the coordinates of our snapshots and allows the Cell snapshots to move as the finger moves. Call updateInteractiveMovementTargetPosition (). When this method is called, the proxy method for updating the data source in the DataSource proxy is executed, that is, the last method for updating the data source in the DataSource proxy method above.

　　

 

5. longPressEnd () method implementation

The main function of this method is to do some aftercare after the gesture ends, such as moving, removing the Cell snapshot and displaying the hidden cell. The details are as follows:

　　

 

Today's blog will be introduced here first. The above is only a small part of the Demo code involved in this blog. The complete code can be found at the github sharing link below.

Github code share link: https://github.com/lizelu/CESelectThemes