iOS Development note 13: Top tabbed navigation bar and drop-down category menu

When the content and classification of more, often use the top label navigation bar, such as the top of the NetEase News client category navigation, recently just have such a scenario, refer to some of the network demo, to achieve this navigation effect, record some points.

(due to the video to GIF dropped frames, sliding and the next draw looks more blunt, just found that QuickTime can directly record mobile video, recommend, very convenient)

1. Top tab navigation bar (1) Realization of ideas

In fact, in the upper and lower two uiscrollview on the fuss, to achieve linkage selection switch effect.

① top tab navigation bar topcategorylistscrollview load display categorical data, below contentscrollview Display category corresponding content, select the top label, The content View Contentscrollview switch to the corresponding view. Similarly, slide the lower content view, the tab bar to the specified category and center the display, if the classification of the initial position on the left or right side of the navigation bar, you do not have to slide to the middle position. Avoid leaving a blank space on both sides.

② the top navigation bar can be used to represent the classification with a label or button, which is a label, adds a tap gesture response interaction event, extracts the classification as a model, contains the category name, The corresponding content depending on the tut of the ID or URL and the length of the category name (the underline length under the classification varies with the length of the name), according to the number of categories, determine the contentsize of the lower content view, and then the classification order and the content order corresponding to the interactive logic to achieve linkage switching.

③ Click on the right button, pop-up drop-down menu, you can also switch categories.

(2) The problem of AutoLayout on iOS7

Because of the difference between IOS7 AutoLayout and IOS8, 9, Uiscrollview contentsize on iOS7 and some AutoLayout animations using UIView will be problematic, It is recommended to use Setframe to achieve the UI effect of the two top navigation bars and drop-down menus.

(3) Top navigation bar

Iterate through the categorical data and add a label to the top navigation bar. The following points need to be noted:

① set label tag, and the index corresponding to the classification data, convenient for follow-up according to the identification of the choice of switch;

②label userinteractionenabled Default is no, need to set up, convenient to respond to tap click Operation;

③ Classification name length is dynamic, if the default length is displayed according to the actual length, including the label length and the label bottom underline length, so the classification data corresponding to the model needs a length attribute, used to record this length, easy to follow the display, instead of real-time to calculate the length.

The underscore at the bottom of the category name goes with the category label, the first label is selected by default, so the underline defaults to the first one, and the contentsize of the top navigation bar is set according to the number of categories.

(4) Content view

Also set the contentsize of the content view based on the number of classifications.

(5) Interaction logic between two ScrollView

The linkage between the two ScrollView needs to pay attention to one-way transmission to avoid repeated sliding . There are three types of sliding selection operations:

① Select a category tab, the navigation bar slides to the specified position, and the content view slides to the specified position;

② Slide The content view, the navigation bar also toggles sliding to the corresponding category label position;

③ selected a category in the drop-down menu, and the navigation bar and content view slide to the corresponding location, as in actual ①.

First of all, click on the Category tab in the navigation bar, then block callback to the controller

Let the Contentscrollview slide to the specified position before notifying Topcategorylistscrollview to slide.

It is necessary to explain here thatScrollviewdidendscrollinganimation was originally called after the content view swipe ended, to notify the navigation bar to slide to the corresponding category label. Scrollviewdidenddecelerating is a call that handles finger swipe on the screen after the end of the content view, and also notifies the navigation bar to slide to the corresponding category label. But in order to let the sliding classification label switch display more consistent, in the Scrollviewdidscroll processing, when the slide out a certain distance, the new index and the current index is inconsistent with the notification navigation bar switch category label, In fact scrollviewdidendscrollinganimation and scrollviewdidenddecelerating can be removed at this time.

Similarly, in the second case, slide the content view, the navigation bar toggles the sliding to the corresponding category label position, actually is in the scrollviewdidscroll the judgment processing.

For the third case, select category in the drop-down menu, and the actual process is the same as in the first case.

It is important to note that when switching categories, it is necessary to record the values of the current classification and to highlight the current category when the drop-down menu pops up.

When the navigation bar is sliding, you need to decide whether to slide or slide, and to update the length of the underline according to the category name length, depending on the location of the category label.

2. Drop-down Category menu (1) Use the scene and the way

The dropdown gradually expands the category menu, selects a category, the navigation bar and the content view to switch to the corresponding category and content, expand the status, click the button or the background shaded area to gradually close the menu.

(2) UI element decomposition

A button placed next to the navigation bar DropDownButton, a titleview, and a drop-down category menu Dropdowncategorylistview, which contains a collectionview showing the number of categories, according to. DropDownButton control Titleview and Dropdowncategorylistview display, Dropdowncategorylistview background color Set a certain transparency to do the background. Let's summarize a few key points.

(3) CollectionView height control and separation line effect

Each row here shows three categorical data, the number of categories and cell height determined to determine the height of the CollectionView, that is, first determine the vertical has a few rows of categorical data, the number of rows xcell height is collectionview height.

For the classification of cell divider line effect, probably the most likely to think of is the cell between the gap, CollectionView background color set on the line, but there are two problems, the first is the three sub-cell plus the gap left, the gap width will be a decimal, Show the effect of uneven thickness, and here the cell and CollectionView background color is white, leaving a gap can not form the visual effect of dividing line, so can only be processed inside the cell, the bottom and the right side of the divider line, according to the location of the cell to control the separation line display or not.

(4) Click CollectionView Event Handling

Dropdowncategorylistview added tap gestures, click View to notify Controller to drop the Remove dropdown category menu, CollectionView as part of Clicking on CollectionView also notifies the controller to remove the drop-down category menu, which clearly does not meet the requirements, the solution is to set the Cancelstouchesinview property of the gesture to No, The touch event is also passed on to the CollectionView, and the didselect will continue to be processed after selecting the category.

(5) Interactive effect processing

The drop-down menu expands and fades the gradient effect with the UIView animation, need to notice is the animation effect, need to remove the shadow, and then the drop-down menu, where the shadow is actually dropdowncategorylistview set a certain degree of transparency of the background color, So first set the background color to Clearcolor and then the menu can be closed.

3. Reference

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

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

iOS Development note 13: Top tabbed navigation bar and drop-down category menu