iOS development UI - Nine Palace grid coordinate calculation

Original address:

1, Requirements

Complete the following layout

2, Analysis

Find the law on the left, the x coordinate and y coordinate of each uiview.

3, Realization ideas

(1) Define what each piece is used for view

(2) Clarify the parent-child relationship between each view. Each view has only one parent view and many child views.

(3) You can try to add grids one by one, and finally consider using the for loop to complete the creation of all uiview s

(4) Load app data and create corresponding number of cells according to data length

(5) Add child controls inside the grid

(6) Assemble data for internal child controls

4, Code example

//  YYViewController.m
//  Jiu Gong Ge exercise
//  Created by Kong Yiji on 14-5-22
//  Copyright (c) 2014 itcast. All rights reserved

#import "YYViewController.h"

@interface YYViewController ()
@property(nonatomic,strong)NSArray *apps;

@implementation YYViewController

//1. Load data
- (NSArray *)apps
    if (!_apps) {
        NSString *path=[[NSBundle mainBundle]pathForResource:@"app.plist" ofType:nil];
        _apps=[NSArray arrayWithContentsOfFile:path];
    return _apps;

- (void)viewDidLoad
    [super viewDidLoad];

    //2. Complete layout design

    //The three column
    int totalloc=3;
    CGFloat appvieww=80;
    CGFloat appviewh=90;

    CGFloat margin=(self.view.frame.size.width-totalloc*appvieww)/(totalloc+1);
    int count=self.apps.count;
    for (int i=0; i<count; i++) {
        int row=i/totalloc;//Line number
        int loc=i%totalloc;//Column number

        CGFloat appviewx=margin+(margin+appvieww)*loc;
        CGFloat appviewy=margin+(margin+appviewh)*row;

        //Create uiview control
        UIView *appview=[[UIView alloc]initWithFrame:CGRectMake(appviewx, appviewy, appvieww, appviewh)];
        //[appview setBackgroundColor:[UIColor purpleColor]];
        [self.view addSubview:appview];

        //Create subview in uiview control
        UIImageView *appimageview=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 80, 50)];
        UIImage *appimage=[UIImage imageNamed:self.apps[i][@"icon"]];
        [appimageview setContentMode:UIViewContentModeScaleAspectFit];
       // NSLog(@"%@",self.apps[i][@"icon"]);
        [appview addSubview:appimageview];

        //Create a text label
        UILabel *applable=[[UILabel alloc]initWithFrame:CGRectMake(0, 50, 80, 20)];
        [applable setText:self.apps[i][@"name"]];
        [applable setTextAlignment:NSTextAlignmentCenter];
        [applable setFont:[UIFont systemFontOfSize:12.0]];
        [appview addSubview:applable];

        //Create button
        UIButton *appbtn=[UIButton buttonWithType:UIButtonTypeCustom];
        appbtn.frame= CGRectMake(10, 70, 60, 20);
        [appbtn setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
        [appbtn setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted];
        [appbtn setTitle:@"download" forState:UIControlStateNormal];
        appbtn.titleLabel.font=[UIFont systemFontOfSize:12.0];
        [appview addSubview:appbtn];

        [appbtn addTarget:self action:@selector(click) forControlEvents:UIControlEventTouchUpInside];


    //Animation label
    UILabel *animalab=[[UILabel alloc]initWithFrame:CGRectMake(,, 200, 40)];
    [animalab setText:@"Download successful"];
    animalab.font=[UIFont systemFontOfSize:12.0];
    [animalab setBackgroundColor:[UIColor brownColor]];
    [animalab setAlpha:0];
    [self.view addSubview:animalab];

//    [UIView beginAnimations:Nil context:Nil];
//    [animalab setAlpha:1];
//    [UIView setAnimationDuration:4.0];
//    [UIView commitAnimations];

    //After execution, you have to delete this. block animation is recommended

    [UIView animateWithDuration:4.0 animations:^{
    [animalab setAlpha:1];
    } completion:^(BOOL finished) {
        //[self.view re];

- (void)didReceiveMemoryWarning
    [super didReceiveMemoryWarning];


Execution effect:

Posted by mtorbin on Fri, 01 May 2020 18:54:51 -0700