In the first article, I briefly talked about the basic framework and layout of the APP. Today, we will talk about the controls commonly used in the software and how to implement them. IOS approaching mall APP(a)(today on duty the whole building is quiet, good terror -_-,). #### shopping cart related ##### control one

  • Specifications selection interface before adding goods to shopping cart

    For example, the content in the red box in the figure above can display the specification content of the product, select the radio, set its default color, select the font color and select the border color. The whole module is the layout determined according to the actual content of the product, and at the bottom is a tableView that can scroll. So how do we implement it? Method 1. Encapsulate a control yourself, but there is a certain amount of experience in handling data and adaptive layout. Method 2. Use third-party controls. Here’s a recommendationDKFilterView

Self.buttonnormalcolor = DK_NORMALTITLE_COLOR; / / not selected title color self. ButtonHighlightColor = DK_SELECTTITLE_COLOR; / / selected title color self. ButtonNormalBorderColor = DK_NORMALBORDER_COLOR; / / not selected border color self. ButtonSelectBorderColor = DK_SELECTBORDER_COLOR; // Select the border colorCopy the code

And then do the color transformation in the select logic of this method.

- (void)buttonSelected:(UIButton *)button;
Copy the code

And then the header and the dash, because the attempt is a TableView, what we’re dealing with is the protocol method of its group header attempt and its group tail attempt.

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;
Copy the code
-(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section;
Copy the code

There are two ways to deal with the dashed line at the end: 1. Find UI and ask for a dashed line graph, create it and try to put it on it. It is simple and crude. 2: Draw dashed lines by yourself.

  UIView *foot = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, 20)];
    foot.backgroundColor = [UIColor whiteColor];
    //layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    
    [shapeLayer setFillColor:[[UIColor lightGrayColor] CGColor]]; // Set the color of dashed lines - the color must be set to [shapeLayer]setStrokeColor:[UIColor lightGrayColor].CGColor]; // Set the dashed line height [shapeLayer]setOur LineWidth: 1.0 f]; // Set the type [shapeLayer]setLineJoin:kCALineJoinRound]; /* 2.f= length of each dotted line 2.f= distance between each two lines */ [shapeLayersetLineDashPattern: [NSArray arrayWithObjects:[NSNumber numberWithInt:2.f], [NSNumber numberWithInt:2.f],nil]]; // Setup the path CGMutablePathRef path1 = CGPathCreateMutable(); /* represents the initial coordinates x, y y: must be the same as the y below. */ CGPathMoveToPoint(path1, NULL,10, 10); */ CGPathAddLineToPoint(path1, NULL, width-20,10); */ CGPathAddLineToPoint(path1, NULL, width-20,10); // assign to shapeLayer [shapeLayer]setPath:path1]; / / remove CGPathRelease (path1); // You can change self to any UIView you want. [[foot Layer] addSublayer:shapeLayer];Copy the code

The annotation has been added clearly, but if you feel that it is still complicated, here is a wrapped method, one sentence to implement the page switch loading animation and line drawing, one sentence to implement the dotted line drawing (the various line drawing will continue to wrap and add new things, welcome star).

/ / call draw a dotted line [[GS_DrawLineManager manager] GS_DrawImaginaryLineWithStartPoint: CGPointMake (20, 100) the EndPoint: CGPointMake (300, 100) LineColor:[UIColor blackColor] LineHeight:1.0f InView:view];Copy the code

  • Increase the number of goods controls

portal

  • Page bufferloading animations, such as Meituan and Ele. me, will have bufferloading animations before switching page data loading, so how do we implement in our software, according to online information and pictures and our own packaging, to implement a sentence to call loading, a sentence to disappear, similar to SVProgressHUD usage.

view = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds]; [self.view addSubview:view]; // Load transition animation [[GS_SVPmanager manager]GS_SVPshowGif:self]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4 * NSEC_PER_SEC)), dispatch_get_main_queue(), Draw a dotted line ^ {/ / call the [[GS_DrawLineManager manager] GS_DrawImaginaryLineWithStartPoint: CGPointMake (20. 100) EndPoint:CGPointMake(300, 100) LineColor:[UIColor blackColor] LineHeight:1.0f InView:view]; [[GS_SVPmanager manager]GS_SVPhidGif:self];
        
        NSLog(@"It's over.");
    });

Copy the code

As shown in the image below, we create a simple object to control the GIF display and disappearance. The location of the singleton file is shown in the image below:

One sentence buffer animation