【iOS】简单的界面制作

整体构思

通过近两个周的控件学习，了解到了关于iOS的一些基本控件用法。想通过这些基本控件写一个简单的界面，类似于ZARA和得物的混合版（写的比较简单）。

通过分栏控制器UITabBarController控制三个视图控制器，三个视图控制器依次是 “首页” ， “购买” ， “我的”。 “首页” 里有一个UIScrollView的图片自动轮播器， “购买” 里是许多商品的展示， “我的” 里用UITableView展示个人信息等其他功能按钮。

三个视图控制器+分栏控制器

创建父类为viewController的三个子类，依次代表着三个界面

用这三个类分别创建三个视图控制器对象

//创建三组视图控制器
     VCOne* vcOne = [VCOne new];
     VCTwo* =vcTwo = [VCTwo new];
     VCThree* vcThree = [VCThree new];

设置三个视图控制器的一些属性，如每个视图控制器对应的图标，标题，背景颜色等

//设置图标，这里的icon1、icon2、icon3是提前存好的png图片
     vcOne.tabBarItem.image = [UIImage imageNamed:@"icon2"];
     vcTwo.tabBarItem.image = [UIImage imageNamed:@"icon1"];
     vcThree.tabBarItem.image = [UIImage imageNamed:@"icon3"];
    
     //设置三组视图控制器的标题
     vcOne.title = @"首 页";
     vcTwo.title = @"购 买";
     vcThree.title = @"我 的";
     
     vcOne.view.backgroundColor = [UIColor blackColor];
     vcTwo.view.backgroundColor = [UIColor whiteColor];
     vcThree.view.backgroundColor = [UIColor redColor];

此时需要用一个分栏控制器将三个视图控制器存入，才能让用户 点击/切换 视图控制器

//创建数组存入三组视图控制器
     NSArray* arr1 = [NSArray arrayWithObjects:vcOne, vcTwo, vcThree, nil];
     
     //创建分栏控制器
     UITabBarController* tbc01 = [UITabBarController new];
     //将数组添加到分栏控制器当中
     tbc01.viewControllers = arr1;
     //将分栏控制器显示
     tbc01.selectedIndex = 0;
     //分栏控制器颜色不透明
     tbc01.tabBar.translucent = YES;
     //分栏控制器的颜色
     //tbc01.tabBar.backgroundColor = [UIColor blackColor];
     
     self.window.rootViewController = tbc01;

此时效果如下：

主页

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

//“主页”界面
    //创建滚动视图对象
    _scrollView = [UIScrollView new];
    _scrollView.frame = CGRectMake(17, 240, 380, 520);
    
    //弹动效果
    _scrollView.bounces = YES;
    //设置画布大小，横向效果（四个图片轮播）
    _scrollView.contentSize = CGSizeMake(380 * 4, 520);
    //是否按照整页来滚动视图
    _scrollView.pagingEnabled = YES;
    //是否可以边缘弹动效果
    _scrollView.bounces = YES;
    //开启横向弹动效果
    _scrollView.alwaysBounceHorizontal = YES;
    //开启纵向弹动效果
    _scrollView.alwaysBounceVertical = NO;
    //是否显示横向滚动条
    _scrollView.showsHorizontalScrollIndicator = NO;
    //显示背景颜色
    _scrollView.backgroundColor = [UIColor blackColor];

随后依次在滚动视图里加入四张图片实现横向滑动

for (int i = 0; i < 4; i++) {
        //生成图片名称
        NSString* strName = [NSString stringWithFormat:@"mainPic%d.jpg", i + 1];
        UIImage* image = [UIImage imageNamed:strName];
        //创建图像视图对象
        UIImageView* iView = [UIImageView new];
        //图像赋值
        iView.image = image;
        //设置图像视图在滚动视图画布中的位置
        iView.frame = CGRectMake(380 * i, 0, 380, 520);
        
        [_scrollView addSubview:iView];
    }

添加一个分页控制器（此时控制器光标并不能随着图片的左右滑动而滚动）

//创建pageControl
    pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(107, 670, 200, 100)];
    pageControl.numberOfPages = 4;
    pageControl.currentPage = 0;
    pageControl.currentPageIndicatorTintColor = [UIColor blackColor];
    pageControl.pageIndicatorTintColor = [UIColor grayColor];

如果想让实现控制器光标并不能随着图片的左右滑动而滚动，得先添加协议UIScrollViewDelegate，然后在其协议函数scrollViewDidScroll中实现这个方法

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //1.获取滚动的x方向的偏移值
    CGFloat offsetX = scrollView.contentOffset.x;
    //移到一半就变化
    offsetX = offsetX + scrollView.frame.size.width * 0.5;
    //2.用x方向的偏移值除以一张图片的宽度，取商就是当前滚动到第几页（索引）
    int page = offsetX / scrollView.frame.size.width;
    //3.将页码设置给UIPageControll
    pageControl.currentPage = page;
}

此时需要实现 “自动”轮播 的话，得用NSTimer自动计时器来实现（每2.5秒实现一次scrollImage函数）

[NSTimer scheduledTimerWithTimeInterval:2.5 target:self selector:@selector(scrollImage) userInfo:nil repeats:YES];

//自动滚动图片的方法
//因为在创建计时器的时候，制定了时间间隔为2.5秒，所以下面这个方法每个2.5秒执行一次
- (void)scrollImage {
    //每次执行这个方法的时候，都要让图片滚动到下一页
    //如何让UIScrollView滚动到下一页
    //1.获取当前的UIPagecontrol的页码
    NSInteger page = pageControl.currentPage;
    //2.如果到了最后一页，那么设置页码为0.如果没有到达最后一页，则让页码+1
    if (page == pageControl.numberOfPages - 1) {
        //表示已经到达最后一页了
        //回到第一页
        page = 0;
    }
    else {
        page++;
    }
    //3.用每一页的宽度 * （页码+1） == 计算出了下一页的contentoffset的值
    CGFloat offsetX = page * _scrollView.frame.size.width;
    //4.设置UIScrollView的contentoffset等于新的偏移值
    [_scrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
}

再添加一些其他UIImage，调整构图让整个视图更加美观

“主页”效果如下：

购买

仿照其他软件，购买界面都需要一个搜索界面，因此需要用到UITextField

//创建输入文本框
    vcTwo.textField = [UITextField new];
    //设置位置坐标
    vcTwo.textField.frame = CGRectMake(30, 50, 305, 40);
    //设置字体大小
    vcTwo.textField.font = [UIFont systemFontOfSize:18];
    //未输入文字时显示的固定提示
    vcTwo.textField.placeholder = @"请输入你感兴趣的商品";
    vcTwo.textField.textColor = [UIColor blackColor];
    //设置键盘类型
    vcTwo.textField.keyboardType = UIKeyboardTypeURL;
    //设置边框风格
    vcTwo.textField.borderStyle = UITextBorderStyleRoundedRect;
    vcTwo.textField.backgroundColor = [UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1];
    //将UITextField添加到“购买”页面中
    [vcTwo.view addSubview:vcTwo.textField];

如果输入完毕后想收起键盘需要用到代理方法，先添加代理UITextFieldDelegate

	//方法一：
	- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

    //点击屏幕空白处，使虚拟键盘不再作为第一消息响应
    [vcTwo.textField resignFirstResponder];
}


	//方法二：
	//点击return收起键盘
	- (BOOL)textFieldShouldReturn:(UITextField *)textField{
    [vcTwo.textField resignFirstResponder];
    return YES;
}

添加一些UIButton按钮，按钮由UIImage图片构成，把这些按钮全部放在UIScrollView滚动视图中（纵向滚动），举个例

	UIImage* clothes1Image = [UIImage imageNamed:@"clothes1.jpg"];
    UIButton* clothes1Btn = [UIButton buttonWithType:UIButtonTypeCustom];
    clothes1Btn.frame = CGRectMake(0, 460, 205, 235);
    [clothes1Btn setImage:clothes1Image forState:UIControlStateNormal];
    [vcTwo.scrollView2 addSubview:clothes1Btn];

整理构图，运行效果如下：

我的

在“我的”界面中，主要用到了UITableView控件。因为在“我的”页面，大致是由一个个单元格顺序排列

用到UITableView，大部分情况下都得用到UITableView的一些代理，以便于用来排版每一个单元格，关于代理如下

@interface VCThree : ViewController <UITableViewDelegate,
UITableViewDataSource> {
    //定义数据视图对象
    UITableView* _tableView;
    //声明一个数据源
    NSArray* _arrayData;
}
@property (retain, nonatomic) UITableView* tableView;
@end

在.m文件中一定要设置代理对象为self

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建UITableView
    _tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
    [self.view addSubview:_tableView];
    //设置数据视图的代理对象
    _tableView.delegate = self;
    //设置数据视图的数据源对象
    _tableView.dataSource = self;
    _arrayData = @[@[@"ZARA"], @[@"订单", @"收藏", @"地址"], @[@"设置"]];
}

在设置UITableView的代理协议后，有四个必须要实现的方法函数，分别是设置组的个数，每个组的单元格的行数，行的高度，cell的创建与赋值

//获取组(分区)数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 3;
}

//设置行的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    //获取分区
    if (indexPath.section == 0) {
        return 130;
    } else {
        return 60;
    }
}

//设置每个分区的行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    //关于cell的创建与赋值

    return cell;
}

效果如下：