IOS development Note 13: top label navigation bar and drop-down category menu, ios navigation bar

IOS development Note 13: top label navigation bar and drop-down category menu, ios navigation bar

When there are many content and categories, the top label navigation bar is often used, such as the top classification navigation of the Netease news client. Recently, such an application scenario exists. Refer to some demos on the network, achieve this navigation effect and record some key points.

(Because the video is converted to GIF frames, the sliding and drop-down animations are relatively stiff. You can directly record the mobile video at the just-found quickTime. It is very convenient to recommend)

1. Top label navigation bar (1) Implementation ideas

In fact, it is done on the top and bottom of two uiscrollviews to achieve the effect of linkage selection and switching.

① The top label navigation bar topCategoryListScrollView loads and displays the category data. The contentScrollView below displays the content of the category. After selecting the top label, the content view contentScrollView switches to the corresponding view. Similarly, in the lower content view, the label Bar slides to the specified category and is displayed in the center. If the initial position of the category is on the leftmost or rightmost side of the navigation bar, you do not need to slide to the center position. To avoid blank space on both sides.

② Label or button can be used to represent the category in the top navigation bar. label is used here. A tap gesture is added to respond to the interaction event and the classification is extracted as a model, including the category name, the id or url unique to the corresponding content view, and the category Name Length (the underline length below the category varies with the name length, determine the contentSize of the content view below, and then match the classification order with the content order to implement linkage switching in the interaction logic.

③ Click the button on the right to bring up the drop-down menu and switch the category.

(2) Autolayout on iOS7

Due to the differences between iOS7 Autolayout and iOS8 and 9, on iOS7, The contentsize of UIScrollView and some UIView animations using Autolayout may have problems, therefore, we recommend that you use setFrame to implement the UI effects of the two top navigation bars and drop-down menus.

(3) top navigation bar

Traverse the classified data and add a label to the top navigation bar. Note the following:

① Set the tag of the label, which corresponds to the index of the classified data, so that you can switch and select the label based on the logo;

② The default value of the label userInteractionEnabled is NO. You need to set it to facilitate the response to the tap operation;

③ The category name length is dynamic. If it exceeds the default length, it is displayed based on the actual length, including the label length and the underline length at the bottom of the label, therefore, the model corresponding to the classification data must have a Length attribute to record the length for later display, instead of calculating the length in real time.

The underline at the bottom of the category name follows the classification label, and the first label is selected by default, so the underline stays at the first by default, and the contentSize of the top navigation bar is set according to the number of categories.

(4) content View

Set the contentSize of the content view based on the number of categories.

(5) interaction logic between two scrollviews

The interaction between two scrollviews requires one-way transmission to avoid repeated slide. Here, the slide selection operation involves three situations:

① Select a category label. The navigation bar slides to the specified position and the content view slides to the specified position;

② Sliding content view, the navigation bar also slides to the corresponding category label position;

③ Select a category from the drop-down menu. The navigation bar and content view slide to the corresponding position, which is actually the same as ①.

First, click the category label in the navigation bar, and the block is called back to the controller.

First slide contentScrollView to the specified position, and then notify topCategoryListScrollView to slide.

ScrollViewDidEndScrollingAnimation was originally called after the sliding of the content view, which is used to notify the navigation bar to slide to the corresponding category label. ScrollViewDidEndDecelerating is called after the content view is swiped by the finger on the screen. It also notifies the navigation bar to slide to the corresponding category label. However, in order to make the Display Effect of classification Label Switching more consistent during sliding, we processed it in scrollViewDidScroll. When sliding out of a certain distance, when the new index is different from the current index, the navigation bar is notified to switch the category tag. In fact, scrollViewDidEndScrollingAnimation and scrollViewDidEndDecelerating can be removed.

Similarly, in the second case, slide the content view, and switch the navigation bar to the corresponding category label position, which is actually determined in ScrollViewDidScroll.

In the third case, select a category from the drop-down menu. The actual process is the same as in the first case.

Note that when switching a category, you need to record and update the value of the current category. Only when the drop-down menu is displayed can the current category be highlighted.

When the navigation bar slides, You need to determine the specific position of the category label, whether to slide, and the sliding distance, and update the underline Length Based on the category name length.

2. drop-down menu (1) Use Cases and Methods

Gradually expand the category menu from the drop-down list, select a category, and switch the navigation bar and content View to the corresponding category and content. When you expand the status, click the button or gradually collapse the menu in the background shadow area.

(2) UI element Decomposition

A dropDownButton placed next to the navigation bar, a titleView, and a dropDownCategoryListView drop-down menu contain a collectionView that displays the number of categories and data. DropDownButton controls the display of titleView and dropDownCategoryListView. The background color of dropDownCategoryListView is set to a certain degree of transparency. Next we will summarize several key points.

(3) collectionView height control and separation line Effect

Three data categories are displayed in each row. After the number of categories and cell height are determined, the height of collectionView can be determined. That is, several rows of data are classified vertically. The height of the xcell row is the height of collectionView.

For the separation line Effect of cell classification, the most likely thing to think of is to leave a gap between cells and set the background color of collectionView. But there are two problems here, the first step is to add a gap between the cell and the cell. The gap width will contain decimals. The displayed result is uneven in width and the cell and collectionview background colors are white, setting aside gaps does not produce the visual effect of the separation line. Therefore, the separation line can only be processed inside the cell. The bottom and right sides are added with a separation line. The display of the separation line is controlled based on the position of the cell.

(4) Click collectionView to process the event

DropDownCategoryListView adds the tap gesture. When you click view, the controller is notified to collapse the remove drop-down category menu. collectionView is a part of the menu. Clicking collectionView also notifies the controller to collapse and remove the drop-down category menu, which obviously does not meet the requirements, the solution is to set the cancelsTouchesInView attribute of the gesture to NO, and transfer the touch event to collectionView. After didSelect is selected, the operation can proceed.

(5) Interaction Effect Processing

You can use the animation of UIView to expand and collapse the gradient effect from the drop-down menu. Note that you need to remove the shadow and collapse the drop-down menu, the shadow here is actually the background color with a certain transparency set by dropDownCategoryListView, so you can set the background color to clearColor and then collapse the menu.

3. Reference

(1)Http://code.cocoachina.com/view/128556

(2)Https://github.com/dsxNiubility/SXNews