iOS简单的界面制作（第一周）

一、 整体构思

需要写一个简单界面，第一个界面为“首页”，第二个界面为“我的”。

1. 因为有两个界面，所以需要用到两个视图控制器。这两个视图控制器由分栏控制器来控制。
2. “首页”界面：需要用到滚动视图
3. “我的”界面：需要用到UITabview

二、分栏控制器

创建父类为viewController的两个子类( VCFirst和VCScend)依次代表着两个界面

 self.window = [[UIWindow alloc] initWithWindowScene:(UIWindowScene*)scene];
  //创建两个视图控制器vcFirst和vcSecond
    VCFirst* vcFirst = [[VCFirst alloc] init];
    
    VCScend* vcSecond = [[VCScend alloc] init];
    
    vcFirst.title=@"首页";
    
    vcSecond.title=@"我的";
    
    vcFirst.view.backgroundColor=[UIColor yellowColor];
    
    vcSecond.view.backgroundColor = [UIColor greenColor];
    //创建分栏控制器
    UITabBarController* tabbarController = [[UITabBarController alloc] init];
    把两个视图控制器存到数组中
    NSArray* arrayVC = [NSArray arrayWithObjects:vcFirst,vcSecond, nil];
    
    tabbarController.viewControllers = arrayVC;
    
    self.window.rootViewController = tabbarController;
    
    tabbarController.tabBar.translucent = NO;
    
    [self.window makeKeyAndVisible];

注意：UIWindow的创建
需要将上述代码写在SCeneDelegate.m文件中的第一个函数中

三、首页

想要做一个图片轮播器得先创建一个滚动视图，将其添加在“主页”视图中显示

在VCFirst.m文件中实现

//创建一个滚动视图
    _scrollView = [[UIScrollView alloc]init];//在VCFirst.h中进行了编译时创建，alloc为运行时创建
    //获取当前屏幕的大小作为滚动视图的尺寸
    _scrollView.frame=CGRectMake(0, 0,self.view.frame.size.width,self.view.frame.size.height );
   
    _scrollView.bounces = YES;
    
    _scrollView.userInteractionEnabled = YES;
    
    _scrollView.contentSize = CGSizeMake(self.view.frame.size.width*5, self.view.frame.size.height);
    
    _scrollView.pagingEnabled = YES;
    
    _scrollView.scrollEnabled = YES;
    
    _scrollView.backgroundColor = [UIColor yellowColor];

将准备的五张图片添加在滚动视图上

for(int i=0;i<5;i++) {

        NSString* strName = [NSString stringWithFormat:@"%d.jpg",i+1];
        
        UIImage* image = [UIImage imageNamed:strName];
        
        UIImageView* imageView = [[UIImageView alloc] initWithImage:image];
        //每张图片的位置
        imageView.frame=CGRectMake(self.view.frame.size.width*i, 0,self.view.frame.size.width,self.view.frame.size.height);
        
        [_scrollView addSubview:imageView];
        
        imageView.backgroundColor=[UIColor greenColor];
    }

    [self.view addSubview:_scrollView];
    [self createImageBtn];//创建按钮函数后记得调用

创建两个按钮来进行翻页，同时满足无限轮播的效果。（无限轮播图）

无限轮播图：每次按下按钮时判断当前屏幕上显示的图片是第几张，如果是第一张且按下了左翻按钮，则直接跳转到最后一张，如果是最好一张且按下了右翻按钮，直接跳转到第一张

//创建UIButton
- (void) createImageBtn {
   //创建两个自定义的按钮
    UIButton* buttonimage01 = [UIButton buttonWithType:UIButtonTypeCustom];
    UIButton* buttonimage02 = [UIButton buttonWithType:UIButtonTypeCustom];
    //将两个按钮放置在屏幕的两侧
    buttonimage01.frame = CGRectMake(0, 400,50, 80);
    buttonimage02.frame = CGRectMake(380, 400,50, 80);
    buttonimage01.backgroundColor=[UIColor clearColor];
    buttonimage02.backgroundColor=[UIColor clearColor];
    //用图片作为按钮
    UIImage* icon01= [UIImage imageNamed:@"btn01.jpg"];
    UIImage* icon02 = [UIImage imageNamed:@"btn02.jpg"];
    [buttonimage01 setImage:icon01 forState:UIControlStateNormal];
    [buttonimage01 setImage:icon01 forState:UIControlStateHighlighted];
    [buttonimage02 setImage:icon02 forState:UIControlStateNormal];
    [buttonimage02 setImage:icon02 forState:UIControlStateHighlighted];
    //向两个按钮添加事件函数，使得按钮被按下时能够响应事件
    [buttonimage01 addTarget:self action:@selector(pressbutton1) forControlEvents:UIControlEventTouchUpInside];
    [buttonimage02 addTarget:self action:@selector(pressbutton2) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:buttonimage01];
    [self.view addSubview:buttonimage02];
}
//实现按下按钮button1时能够从第一页到最后一页，其他页能到前一页
- (void)pressbutton1 {
    int i=_scrollView.contentOffset.x/self.view.frame.size.width;
    NSLog(@"%d",i);
    if(i== 0) {
        _scrollView.contentOffset = CGPointMake(self.view.frame.size.width*4, 0);
    }
    else
    {
        i--;
        _scrollView.contentOffset = CGPointMake(self.view.frame.size.width*i, 0);
        NSLog(@"按钮1被按下");
    }
}
实现按下按钮button2时能够从最后页到第一页，其他页能到后一页
- (void)pressbutton2 {
    int i=_scrollView.contentOffset.x/self.view.frame.size.width;
    i++;
    if(i==5) {
        _scrollView.contentOffset = CGPointMake(0, 0);
    }
    else
    _scrollView.contentOffset = CGPointMake(self.view.frame.size.width*i, 0);
    NSLog(@"按钮2被按下");
}

首页的效果如下

四、“我的”页面

需要用到UITableview，因为在“我的”页面，大致是由一个个单元格顺序排列

 //创建UITableView
_tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    _tableView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
    _tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
     //设置数据视图的代理对象
    _tableView.delegate = self;
    //设置数据视图的数据源对象
    _tableView.dataSource = self;
    //将需要在单元格呈现的文字有序地放在数组中
    _textarray=@[@"",@"头像",@"个人资料",@"标签",@"我的收藏",@"指南",@"偏好设置"];
    //数据视图的头部的设定
    _tableView.tableHeaderView = nil;
    [self.view addSubview:_tableView];
    _arrayData = [[NSMutableArray alloc] init] ;

下面是UITableView必须要实现的协议函数

//获取每组元素的个数/行数
-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 7;
}
-(NSInteger) numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

//创建单元格函数
-(UITableViewCell*) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString* cellstr = @"cell";
    UITableViewCell* cell = [_tableView dequeueReusableCellWithIdentifier:cellstr];
    if(cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellstr];
    }
    if(indexPath.row == 0) {
        UILabel* lable = [[UILabel alloc]init];
        lable.text = @"               张鱼小丸子";
        lable.frame = CGRectMake(0, 45, self.view.frame.size.width, 150);
        lable.font = [UIFont systemFontOfSize:28];
        lable.textColor = [UIColor blackColor];
        lable.textAlignment = NSTextAlignmentCenter;
        lable.backgroundColor = [UIColor clearColor];
        UIImageView* imageview = [[UIImageView alloc] init];
        UIImage* image = [UIImage imageNamed:@"image0.JPG"];
        imageview.image = image;
        imageview.frame = CGRectMake(0, 45, 150, 150);
        imageview.backgroundColor = [UIColor greenColor];
        [self.view addSubview:lable];
        [self.view addSubview:imageview]; 
    }
    else {
        NSString* str = [NSString stringWithFormat:@"m%ld.png",indexPath.row%6+1];
        UIImage* image2 = [UIImage imageNamed:str];
        cell.imageView.image=image2;
        cell.textLabel.text = _textarray[indexPath.row];
        cell.textLabel.font=[UIFont systemFontOfSize:24];
    
    }
    return cell;
}

//通过索引来调整每一行的高度
-(void) tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
    
}
-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    if(indexPath.row == 0) {
        return 150;
    }
    else
    return 80;
}

“我的”页面效果如下：