UI - infinite rotation chart and column controller

---

Preface

To achieve an interface similar to Taobao's shopping software , The first interface here is infinite carousel , The second interface is “ my

---

Tips ： The following is the main body of this article , The following cases can be used for reference

One 、 Column controller

To realize such a main interface , I realize the combination of the two interfaces through the column controller .
First define VcFirst and VcSecond Two with UIViewController Is a subclass of the parent class
At this time VcFirst It represents what we want to achieve “ home page ” Interface ,VcSecond Represents what we want to achieve " my " Interface

For the initialization of two classes , It must be on SceneDelegate.m Achieve in ！！！ Pay attention here UIWindow The implementation of the

//  SceneDelegate.m
//  Zara
#import "SceneDelegate.h"
#import "VcFirst.h"
#import "VcSecond.h"
@interface SceneDelegate ()

@end

@implementation SceneDelegate{


self.window = [[UIWindow alloc]initWithWindowScene:(UIWindowScene*)scene];
    [self.window makeKeyAndVisible];
// stay SceneDelegate.m To implement some initialization of the two classes 
// Set up Color,title, Equal attribute 


// Store two view controllers in the array 
NSArray* arr = [NSArray arrayWithObjects:vc1,vc2, nil];
// Create column controller 
UITabBarController* tbc = [[UITabBarController alloc]init];
// Add the array to the column controller 
tbc.viewControllers = arr;
tbc.selectedIndex = 0;
// Column controller color is opaque 
tbc.tabBar.translucent = NO;
tbc.view.backgroundColor = [UIColor grayColor];



self.window.rootViewController = tbc;
}

Two 、 home page

What we need to realize in the homepage part is an infinite rotation chart , It has the functions of button up and down and sliding up and down with gestures .
First of all, VcFirst initialization
During initialization, pay attention to that the width should be the width of the screen * Number of pictures to add , Length is the length of the screen
Use a loop to add pictures to UIImage in
use UIButton Realize the processing of the operation of the previous and next picture
Infinite rotation ： Each time you press the button, determine the number of pictures displayed on the current screen , If it is the first one and the left flip button is pressed , Then jump directly to the last one , If it is the best one and the flip button is pressed , Jump directly to the first

// VcFirst.m
// Zara
//

#import "VcFirst.h"

@interface VcFirst ()

@end

@implementation VcFirst{
    
	vc.frame = CGRectMake(0, 0, 390, 844);
     vc.pagingEnabled = YES;
     vc.scrollEnabled = YES;
     // The virtual machine I use is iPhone12, Added 5 A picture , I used 390*5
     vc.contentSize = CGSizeMake(390*5, 844);
     vc.bounces = YES;
     vc.alwaysBounceVertical = NO;
     vc.alwaysBounceHorizontal = YES;
     vc.showsVerticalScrollIndicator = YES;
     vc.showsHorizontalScrollIndicator = NO;
     vc.backgroundColor = [UIColor redColor];


     // This is the code to add pictures 
     for(int i = 0;i<5;i++){
    
     //%d.jpg It is called （1-5).jpg Five pictures of 
        NSString* strName = [NSString stringWithFormat:@"%d.jpg",i+1];
        UIImage* image = [UIImage imageNamed:strName];
        UIImageView* iView = [[UIImageView alloc]initWithImage:image];
        iView.frame = CGRectMake(390*i, 0, 390, 844);
        [vc addSubview:iView];
    }
    [self.view addSubview:vc];


	//UIButton The implementation of the 
	UIButton* btnLeft1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btnLeft1.frame = CGRectMake(0, (self.view.frame.size.height-100)/2, 100, 100);
    UIButton* btnRight1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btnRight1.frame = CGRectMake((self.view.frame.size.width-100), (self.view.frame.size.height-100)/2, 100, 100);
    [btnLeft1 setTitle:@"<" forState:UIControlStateNormal];
    [btnRight1 setTitle:@">" forState:UIControlStateNormal];
    [btnLeft1 setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
    [btnRight1 setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
    btnLeft1.titleLabel.font = [UIFont systemFontOfSize:100];
    btnRight1.titleLabel.font = [UIFont systemFontOfSize:100];
    [btnLeft1 addTarget:self action:@selector(pressLeft)
       forControlEvents:UIControlEventTouchUpInside];
    [btnRight1 addTarget:self action:@selector(pressRight) forControlEvents:UIControlEventTouchUpInside];
}



	// This is the press function of the button 
	-(void)pressLeft{
    
    int num = _sv.contentOffset.x/self.view.frame.size.width;
    _sv.contentOffset = CGPointMake(self.view.frame.size.width*(num-1), 0);
    NSLog(@"%f",_sv.contentOffset.x);
    if (num == 0){
    
        _sv.contentOffset= CGPointMake(self.view.frame.size.width*4, 0);
        num = 5;
    }
}
-(void)pressRight{
    
    int num = _sv.contentOffset.x/self.view.frame.size.width;
    _sv.contentOffset = CGPointMake(self.view.frame.size.width*(num+1), 0);
    if (num == 4){
    
        _sv.contentOffset = CGPointMake(self.view.frame.size.width*1, 0);
    }
}

This is a “ home page ” The effect of

---

3、 ... and 、 my

In my interface , Mainly used UITableView Control
We need to customize it according to our specific needs cell

// Be careful .m These functions must be implemented in the file 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    
   return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
    return 7;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    if(indexPath.row == 0){
    
        return 100;
    }else{
    
        return 60;
    }
}

myTableViewCell.m

// This is one of the messages set 
// Member details represent what kind of text to be realistic 
//01.png Represents the picture we want to add 
_label = [[UILabel alloc] init];
        _label.text = @" Member details ";
        [self.contentView addSubview:_label];
        _imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"01.png"]];
        [self.contentView addSubview: _imageView];
        _label.frame = CGRectMake(70, 7, 100, 50);
        _imageView.frame = CGRectMake(20, 10, 40, 40);

This is a “ my ” Interface effect