IOS page dynamic, how to use JSON data to get rid of the original pages of inefficient H5 pages to dynamically update the app page style

Recently spent a few days to look at how to use the iOS native pages to efficiently update the app page style, my idea is to use the imitation H5 style JSON data to dynamically update the page style.

The main page dynamic usage scenario is app business page, as the electricity supplier business needs larger, often need to change the banner style to meet the needs of the business, so the client according to the real-time data update style, here to talk about my understanding of dynamic pages with ideas. Take a look at the effect of the last demo:

IOS page dynamic, how to use JSON data to get rid of the original pages of inefficient H5 pages to dynamically update the app page style
2017-04-27 18_34_37.gif

What other app do

Using Charles capture, found a Jingdong to the NetEase koalas are using type this field is defined in advance a good variety of banner style, through the background of the returned data, to realize the dynamic update of this page, there is good and bad place:

  • Good: in advance to define the style of the banner, the client needs to define the various styles of UI, according to the type field to show good
  • The bad: can only be updated according to the definition of the style, if you need to add a new style, you need to submit a new package

My practice

The client does not define banner style, but defines the layout style to achieve a highly dynamic update page, ideas from the definition of CSS in the div+CSS layout, CSS to iOS layout, according to the display inline with the block value, I define some common layout:

  • FlowLayout: flow layout, according to the display value of the horizontal or vertical layout, according to the width of the screen with banner width
  • LinearLayout: linear layout, vertical layout
  • WaterfallLayout: waterfall flow layout
  • OneAndNLayout: a big picture on the left, the right N Zhang map layout
  • StickyLayout: suspension layout

Whole architecture

The overall architecture of the page is as follows:

IOS page dynamic, how to use JSON data to get rid of the original pages of inefficient H5 pages to dynamically update the app page style
Screenshot 2017-04-27 19.10.17.png

Each UIViewController is a page, the page is composed of one card, the card is actually represents a layout style, each card is composed of several elements, elements actually refers to the various banner card layout style, the corresponding number of JSON according to the structure are as follows:

{"cards": [{"layout": 1, "elements": [{}, {},...]}, {"layout": 1, "elements": [{}, {},...}}]],...

Concrete realization

Because most of the page content to be sliding on display more content, so the page dynamic realization is based on the UICollectionView to do, of course, you can also use the UIScrollView to achieve (Taobao Tmall is through a custom recovery reuse mechanism UIScrollView to display dynamic page content), my understanding is that UICollectionView can customize the UICollectionViewLayout to display a custom cell, why not also need to define a recovery mechanism of UIScrollView to show the content, UICollectionView itself is with recycling mechanism. My specific implementation, look at the overall UML diagram:

IOS page dynamic, how to use JSON data to get rid of the original pages of inefficient H5 pages to dynamically update the app page style
Screenshot 2017-04-27 23.10.15.png

Each KBBaseCard represents a layout of the card, a section corresponding to UICollectionView, KBBaseCard in each KBBaseElement elements represents a banner, a item corresponding to UICollectionView, KBBaseElement KBElementStyle banner to show the style. KBElementStyle in the type field is used to define the style of banner, for example, type=1 on behalf of the banner is a map. The actual display is as follows:

IOS page dynamic, how to use JSON data to get rid of the original pages of inefficient H5 pages to dynamically update the app page style
Screenshot 2017-04-27 23.21.04.png

UICollectionViewLayout custom

UICollectionView UICollectionViewFlowLayout did not satisfy my needs to show style, so here we must write a set of UICollectionViewLayout to provide the KBBaseElement in the style field in the style of support, the core is as follows, the specific implementation in this article do not do too much to explain, you can check the relevant knowledge:

- (UICollectionViewLayoutAttributes) layoutAttributesForItemAtIndexPath: (NSIndexPath * indexPath) {UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; NSInteger sectionLayout = 1; / / CardFlowLayout is the default layout if (self.delegate & & [self.delegate; respondsToSelector:@selector (collectionView:layout:layoutForSection:)]) {sectionLayout = [self.delegate collectionView: self.collectionView layout:self layoutForSection:indexPath.section];} / / CardFlowLayout flow layout if (sectionLayout = = 1) handleLayoutAttributesForFlowLayout:layoutAttributes {[self atIndexPath:indexPath];} / / CardLinear Layout linear layout if (sectionLayout = = 2) {[self handleLayoutAttributesForLinearLayout:layoutAttributes atIndexPath:indexPath];} / / CardOneAndNLayout left a big picture on the right N Zhang map layout if (sectionLayout = = 3) {[self handleLayoutAttributesForOneAndNLayout:layoutAttributes atIndexPath:indexPath];} / / CardWaterfallLayout waterfall flow layout if (sectionLayout = = 4) {[self} handleLayoutAttributesForWaterfallLayout:layoutAttributes atIndexPath:indexPath]; return layoutAttributes;}

JSON data

Here I create a JSON mock data, as well as the JSON data based on the final display of the page

  • JSON{cards: [{“layout”: 1, style: {“backgroundColor”: “#ffffff”}, {“elements”: “type”: 1, “image”: “http://haitao.nos.netease.com/lqdbpar1xWZw5NuOB9ezf80UDm75Ei%2BZyMo%2BMgvE% 2Bdunea_02T1704271119_480_240.jpg”, “style”: {“display”: “inline”, “margin” [“0”, “0”, “0.75”, “0.75”, “width_ratio”: 0.5, width_height_ratio: 2}}, { 1: “type”, “image”, “http://haitao.nos.netease.com/i11BQFE2dWpzplHNBV1Tr8Hafa5zTz%2BCoxF%2BwIBS%2BKF2Vx_03T1704261946_480_240.jpg”, “style”: {“display”: “inline”, “margin”, “0”, “0.75”, “0.75”, “0”, “width_ratio”: 0.5, width_height_ratio: 2}}, {1: “type”, “image”, “http://haitao.nos.netease.com/KwaBThC4mguSnQCGBXVtfK4RmTTSeQ%2BZ5Ql%2BTNvQ%2BKNWzP_05T1704251128_480_240.jpg”, “St YLE: {“display”: “inline”, “margin”, “0.75”, “0”, “0”, “0.75”, “width_ratio”: 0.5, width_height_ratio: 2}}, {“type”: 1, “image”: “http://haitao.nos.netease.com/ G4LGkdg7si4p5ZzVBZUKmkTq7EeTKt%2BRRaE%2BfQyx%2B6JlfC_06T1704251128_480_240.jpg”. “Style”: {“display”: “inline”, “margin”, “0.75”, “0.75”, “0”, “0”, “width_ratio”: 0.5, width_height_ratio: 2}}, {“type”: 1, “image”, “http://haitao.nos.netease.com/HNkdnuFcFey5Om5GpNpO-C2LLgTrO3WtFT1704201935_960_210.jpg”, “style”: {“display”: “block”, “margin”, “0.75”, “0”. “0”, “0”, “width_height_ratio”: 4.57}}, {“type”: 1, “Image”: “http://haitao.nos.netease.com/mrui23TlZJcRAocRWB70T1704262151_600_375.jpg”, “style”: {“display”: “inline”, “margin”, “0.75”, “0”, “0”, “0.75”, “width_ratio”: 0.7, width_height_ratio: 1.6}}, {“type”: 1. “Image”: “http://haitao.nos.netease.com/ppiV8ODszIZciIZbmQih-A6HUakFq6g6oLTNhT1704201914_474_555.jpg”, “style”: {“display”: “inline”, “margin”: [“0.75”, “0.75”, “0”, “0”, “width_ratio”: 0.3, width_height_ratio: 0.685}}]}, {“layout”: 3, style: {“backgroundColor”: “#ffffff”}, {“elements”: “type” 1: “image”, “http://haitao.nos.netease.com/KHASB80nO5JMsX1e2iChshdRT1704262150_480_480.jpg”, “style”: {“margin”: “0”, “0”, “0”, “0.75”, “width_ratio”: 0.5, width_height_ratio: 1}}, {“type”: 1, “image”, “http://haitao.nos.netease.com/ygMuXb96hrtGtT6Wc9vZ2T17040101959_480_240.jpg”, “style”: {“margin”: “0”, “0.75”, “0.75”, “0”, “width_ratio” “width_height_ratio”:: 0.5, 2}}, {“type”: 1, “imag E “:” http://haitao.nos.netease.com/ADB5IaeoJWP9pIzVmwzkfGKhT1704262151_480_240.jpg “,” style “: {” margin “:” 0.75 “,” 0.75 “,” 0 “,” 0 “,” width_ratio “: 0.5, width_height_ratio: 2}}]}, {” layout “: 1,” style “: {backgroundColor” “#ffffff”}, “elements”: [{“type”: 1, “image”, “http://haitao.nos.netease.com/ppiV8ODszIZciIZbmQih-A6HUakFq6g6oLTNhT1704201914_474_555.jpg”, “Style”: {“display”: “inline”, “margin”, “0”, “0”, “0”, “0.75”, “width_ratio”: 0.5, width_height_ratio: 0.856}}, {“type”: 1, “image”: “http://haitao.nos.netease.com/ mbO7ln3VxpAWxKkw84Ay-ys6BLHmk9LLRvwa4T1704201914_474_555.jpg”, {“style”: “display”: “inline”, “margin”, “0”, “0.75”, “0 “,” 0 “,” width_ratio “: 0.5, width_height_ratio: 0.856}}]}, {” layout “: 2,” style “: {” backgroundColor “:” #ffffff “},” elements “: [{” type “: 1,” image “:” http:// haitao.nos.netease.com/hwCkTs9AoDThXhv5k38dr2M0T1704242204_960_480.jpg “,” style “: {” margin “:” 0 “,” 0 “,” 10 “,” 0 “,” width_height_ratio “: 2 .0}}, {“type”: 1, “image”, “http://haitao.nos.netease.com/Tt9TfxyDTSSirP27lXEiIsKPriT1704241519_960_480.jpg”, “style”: {“margin”: “0”, “0”, “10”, “0”, “width_height_ratio”: 2}}, {“type”: 1, “image” “http://haitao.nos.netease.com/uey1sJ03lEOglRm626Th6dKrT1704242203_960_480.jpg”, “style”: {“margin”: “[0”, “0”, “10”, “0”, “width_height_ratio”: 2}}]}]}
  • Page graph
IOS page dynamic, how to use JSON data to get rid of the original pages of inefficient H5 pages to dynamically update the app page style
Screenshot 2017-04-27 23.29.39.png
IOS page dynamic, how to use JSON data to get rid of the original pages of inefficient H5 pages to dynamically update the app page style
Screenshot 2017-04-27 23.29.59.png