iOS UI进阶-1.0网易彩票框架搭建

仿网易彩票,最终要做成的效果如下:

一、分层搭建

1.新建一个项目,Lottery.只支持7.1以上坚屏。

2.将素材全部图片全部拉到相应的文件夹里。

3.选中Lottery--右键Show in Finder ,在Lottery文件夹下新建一个Classes,并分别分层成MVC文件夹。

4.把Classes拉到Lottery项目里,整个框架结构如

二、UI搭建

分层好之后,接下来,我们搭建一下界面。使用Storyboard进行搭建。

1.点击Main.storyboard,删除原来的界面,分别拉入TabBar Controller和5个Navigation Controller。删除Navigation Controller自带的TableViewController,我们拉入自己的ViewController.

TabBar Controller与Navigation Controller关联

Navigation Controller与View Controller 关联

2.分别修改Navigation Controller与View Controller的显示名称

3.最终界面的导航效果

4.运行后的效果

三、代码实现

UI搭建完之后,我们发现系统自带的底部的导航栏,点击是蓝色,设置不了整一块的图片。因此,接下来,我们是自定义一个底部导航栏。

1.自定义一个MJTabBarController ,继承UITabBarController

MJTabBarController.m

#import "MJTabBarController.h"

@interface MJTabBarController ()
/**
 *  记录当前选中的按钮
 */
@property (nonatomic, weak) UIButton *selectedButton;
@end

@implementation MJTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 1.移除系统自带的tabbar
    [self.tabBar removeFromSuperview];

    // 2.添加自己的tabbar
    UIView *myTabBar = [[UIView alloc] init];
    myTabBar.frame = self.tabBar.frame;
    myTabBar.backgroundColor = [UIColor greenColor];
    [self.view addSubview:myTabBar];

    // 3.添加5个按钮
    for (int i = 0; i<5; i++) {
        // 创建按钮
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.tag = i;

        // 设置图片
        NSString *name = [NSString stringWithFormat:@"TabBar%d", i + 1];
        [button setBackgroundImage:[UIImage imageNamed:name] forState:UIControlStateNormal];

        NSString *selectedName = [NSString stringWithFormat:@"TabBar%dSel", i + 1];
        [button setBackgroundImage:[UIImage imageNamed:selectedName] forState:UIControlStateSelected];

        // 设置frame
        CGFloat buttonY = 0;
        CGFloat buttonW = myTabBar.frame.size.width * 0.2;
        CGFloat buttonH = myTabBar.frame.size.height;
        CGFloat buttonX = i * buttonW;
        button.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);

        // 添加
        [myTabBar addSubview:button];

        // 监听
        [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDown];

        // 默认选中第0个位置的按钮(点击了这个按钮)
        if (i == 0) {
            [self buttonClick:button];
        }
    }
}
    /**
     *  监听按钮点击
     */
- (void)buttonClick:(UIButton *)button
   {
        // 1.让当前选中的按钮取消选中
        self.selectedButton.selected = NO;

        // 2.让新点击的按钮选中
        button.selected = YES;

        // 3.新点击的按钮就成为了"当前选中的按钮"
        self.selectedButton = button;

        // 4.切换子控制器
        self.selectedIndex = button.tag;
    }
@end
时间: 08-27

iOS UI进阶-1.0网易彩票框架搭建的相关文章

iOS UI进阶-1.1网易彩票框架搭建-代码重构

在上一篇中,我们基本已经把整个框架都搭建出来了,下面进行代码重构一下. 思路: 导航按钮,按下时,会变灰,那是系统自带了,通过自定义UIButton,实现按下按钮立即切换效果. MJTabBarController管得太多了,只需要传图片过去,即创建好一个TabBar. 通过代理实现底部tabbar的切换. 一.自定义UIButton,继承自UIButton.MJTabBarButton.m #import "MJTabBarButton.h" @implementation MJTa

iOS UI进阶-1.3网易彩票设置模块

概述 基本上,每一款APP都有相应的设置模块.怎么设置才能更灵活和通用呢,这也是大家一直思考的.下面说说在网易彩票中,设置模块的设置思想. 基本上有三种方案: static cell(呆板,完全没有动态) 使用代码,条件判断逐个编写(麻烦,代码冗长) 使用plist加载(能够动态配置跳转控制器,不能配置请求代码:由于使用字符串配置跳转控制器名,容易出现运行时错误) 使用模型封装每个cell的数据(item),使用Class作为跳转控制器属性(这样就能经过编译检测) 最终我们使用的是第4种方式来实

iOS UI进阶-1.4网易彩票设置模块二

产品推荐 产品推荐使用的是UICollectionView控件,UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView 和 UITableViewController 类. 思路: 模型:建立一个MJProduct模型,存放产品的相关信息(标题.图标) 视图:创建xib,继承于UICollectionViewCell 控制器:创建MJProductV

iOS UI进阶-1.2网易彩票常见设置

Navigation导航设置 为了统一管理导航控制器,需要自定义导航控制器MJNavigationController,继承于UINavigationController.分别设置5个Navigation的控制器Class为此控制器. 白色状态栏 统一背景头部导航栏 设置所有Navigation导航栏字体颜色 二级页面隐藏底部导航条 1.白色状态栏.使用application管理状态栏 设置不使用控制器控制状态栏 在MJAppDelegate中设置: - (BOOL)application:(U

[iOS UI进阶 - 2.0] 彩票Demo v1.0

A.需求 1.模仿"网易彩票"做出有5个导航页面和相应功能的Demo 2.v1.0 版本搭建基本框架 B.搭建基本框架 1.拖入TaBarController,5个NavigationController和对应的5个UIViewController 2.配置图标和启动画面 AppIcon直接拖入图片 LaunchImage在Xcode6中需要先更改启动图使用图库的图片,而不是LaunchImage.xib 2.引入图片包 4. 按照模块分类代码包 3.底部导航--自定义TabBar (

iOS UI进阶-1.0 Quartz2D

概述 Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统.Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件 代码实现 绘制线条 #import "LineView.h" @implementation LineView -(void)drawRect:(CGRect)rect { // Drawing code // 1.获得图形上下文 CGContextRef

iOS UI进阶-4.0 地图与定位

在移动互联网时代,移动app能解决用户的很多生活琐事,比如 导航:去任意陌生的地方 周边:找餐馆.找酒店.找银行.找电影院 在上述应用中,都用到了地图和定位功能,在iOS开发中,要想加入这2大功能,必须基于2个框架进行开发 Map Kit :用于地图展示 Core Location :用于地理定位 2个热门专业术语 LBS :Location Based Service SoLoMo :Social Local Mobile(索罗门)

[iOS UI进阶 - 3.0] 触摸事件的基本处理

A.需要掌握和练习的 1.介绍事件类型2.通过按钮的事件处理引出view的事件处理3.响应者对象 --> UIResponder --> UIView4.view的拖拽* 实现触摸方法,打印查看* 介绍touches和UIEvent参数* 扩展:点哪去哪5.涂鸦6.手势解锁7.事件的产生和传递8.响应者链条 9.手势 B.概念 1.iOS有3种主要事件 触摸事件 加速计事件 远程控制事件 2.响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事

iOS UI进阶-2.0 CALayer

在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层.在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层 @property(nonatomic,readonly,retain) CALayer *layer; 当UIView需要显示到屏幕上时,会调用drawRect