IOS development-full case study of classification presentation and editing of common messaging apps (Swift) and iosswift

IOS development-full case study of classification presentation and editing of common messaging apps (Swift) and iosswift

In the previous blog, we talked about the encapsulation and implementation of common classification controls for messaging apps (CollectionView + Swift3.0). Today's blog is based on the previous blog. Make a complete information App category display, category switching, category editing. Of course, we mainly use the flexible CollectionView. Below we will provide the running effect of the program, and then provide the core code implementation. At the end of the article we will provide the source code sharing link on github.

 

1. Running Effect display

The GIF animation below is the running effect of the Demo involved in this blog. First, click the "Show Menu Scroll" button on the first page to Push it to our main Menu page. At the top of the main menu page is our menu options. Click the corresponding menu items to display the corresponding content. Of course, if you slide the content below, the menu items will also change.

Click the plus sign on the right of the menu to Present the editing page of the menu, which is the page described in the previous blog. On this page, we can add new menu items and sort the added menu items by dragging. The specific effect is as follows.

　　

 

 

Ii. Project catalog Introduction

The following is the project directory involved in this blog. This section describes the directories below to understand the entire project.

• 1,CEMenuScrollController: The CEMenuScrollController control class is the content class under the top menu. It is the master controller of the entire instance and plays the overall scheduling role. It is responsible for splicing each component into one.

• 2,CEContentConllectionView: This view is the view that displays the content below. It displays different content as the menu changes.

• 3,CEScrollMenu: This component is the menu on which you can scroll horizontally.

• 4,CESelectTheme: This component is introduced in the previous blog and is responsible for editing menu components.

In this section, we will take a look at the implementation of each component.

　　

 

 

 

Iii. Introduction to the CEScrollMenu component

This component is the menu item for horizontal scrolling in this example. There is a "+" button on the right side of the component. Clicking this button will call back the Click Event of the button in the form of a closureCEMenuScrollControllerThe current controller outputs the CESelectTheme component to operate the data source. Next, let's talk about it.CEScrollMenuThe core code of the component.

 

1. Click Cell operations.

Below isCEMenuCollectionViewThe code segment in, that is, the method executed when you click the Cell corresponding to the menu. In this method, we mainly do two things. The first thing is that the clicked Cell can be moved to the midpoint of the screen. Then, call back the Cell click eventCEMenuCollectionViewUser, In the callback, You need to input the indexPath of the currently clicked Cell.

　　

 

2. Calculate the Cell width of the menu.

The code snippet below isCEMenuCollectionViewSet Cell Layout callback. The Cell width is obtained from our data source. The itemWidth () method in our Model is used to display the Cell width of the item. Of course, the width is obtained based on the number of menu names.

　　

 

3. Click the menu item to set it to the selected status.

The code below isCEMenuCollectionViewCellIs responsible for modifying the Cell display scheme based on the Cell Select status. The specific code is as follows. Of course, whether the Cell is in the Select state, we record this state in our Model, which avoids the State inconsistency caused by the Cell reuse mechanism.

　　

 

The code below isCEMenuCollectionViewCellProcessing during initialization. We can see from the bottom that the Cell'sIsSelectedStatus is loaded from item. After loading, call the precedingUpdateStelectState ()Method. The procedure is as follows:

　　

 

This blog introduces the CEScrollMenu component so much. For more detailed code, see the github address after the article.

 

 

Iv. Introduction to CEContentCollectionView

CEContentCollectionViewThe main function is to display the corresponding content according to the Menu switch, the content in this view is relatively simple. Below is an introduction to its core technical points.

1. Determine the page currently displayed after the user slides left and right

The following three proxy methods are used to determine the Cell displayed after the user slides the content page left and right. When the user switches the corresponding Cell after dragging, the followingCurrentShowCellClosure() Closure, and then the current display of the CellIndexPathCallback to the user. Then, we can change the Menu items currently displayed in the Menu according to the IndexPath.

　　

 

This article introduces the source code of the Demo involved in this blog. Many code comments have been added to the project. If you are interested in the design and implementation of the project, please go to the github source code sharing link below to view them. As a programmer, curiosity is quite important. The content of this blog is here first.

Github share link: https://github.com/lizelu/CEScrollMenue