网易彩票-发现

1. 设置Discovery(发现)->View-Discovery.storyboard->Table View Controller->Table View为静态单元格，风格为组：Table View->Content：Static Cells；Style：Grouped

2. “合买”单元格设计

　　2.1 设置单元格高度：Table View Controller->Table View->Table View Section->Table View Cell->Row Heyght：90

　　2.2 设置“合买”图片：Table View Cell->左上方拖进Image View->Image View->Image：discovery_groupBuy_title

　　2.3 设置“奖杯”图片：Table View Cell->右下方拖进Image View->Image View->Image：discovery_groupBuy_icon

　　2.4 设置标签内容：Table View Cell->“合买”图片下方拖进Label->Label->Text：Plain\t跟着高手买资金一起分

　　2.5 设置“合买”图片和“奖杯”图片等同原图大小：Editor->Size to Fist Content（快捷键：command + =）

　　2.6 设置“合买”图片的约束：上，左，宽，高

　　2.7 设置“奖杯”图片的约束：下，右，宽，高

3. “幸运选号”单元格设计

　　3.1 复制“合买”单元格

　　3.2 设置“幸运选号”图片：Image View->Image：discovery_luckyBet_title

　　3.3 设置“女孩”图片：Image View->Image：discovery_luckyBet_icon

　　3.4 设置标签内容：Label->Text：Plain\t引爆财运命中注定中不了奖

　　3.5 设置“幸运选号”图片和“女孩”图片等同原图大小：Editor->Size to Fist Content（快捷键：command + =）

　　3.6 设置“引爆财运命中注定中不了奖”Label的约束：Constraints->Leading Space to：Superview->Edit->Constant：16

　　3.7 设置“女孩”图片的约束：Constraints->Trailing Space to：Superview->Edit->Constant：-8

4. “合买”单元格子控制器

　　4.1 Discovery.storyboard->拖进View Controller->鼠标左键点住“合买”单元格->键盘按住control键拖线->push

　　4.2 去掉“合买”单元格右侧箭头：选中单元格，Table View Cell->Accessory：None

　　4.3 在“合买”单元格子控制器的导航栏中间拖进Button

　　　　4.3.1 设置风格：Button->Type：Custom

　　　　4.3.2 设置文本：Button->Titil：Plain\t全部彩种

　　　　4.3.3 设置图片：Button->Image：YellowDownArrow

　　4.4 在“HMNavigationController.m”文件的“viewDidLoad”方法中设置全局ViewController渲染颜色为白色，代码如下：

    //设置渲染的颜色
    [self.navigationBar setTintColor:[UIColor whiteColor]];

View Code

　　4.5 推进“合买”单元格子控制器时，自动隐藏系统TabBar

　　　　4.5.1 “合买”单元格子控制器->View Controoler->Hide Bottom Bar on Push：勾选勾勾

　　　　4.5.2 在Main(主框架)->Controller->HMTabBarController.m->“viewDidLoad”方法中修改代码如下：

　　　　　　修改tabbar的frame

　　　　　　　　原：tabbar.frame = self.tabBar.frame

　　　　　　　　改：tabbar.frame = self.tabBar.bounds

　　　　　　修改tabbar的添加方式

　　　　　　　　原：[self.view addSubview:tabbar]

　　　　　　　　改：[self.tarBar addSubview:tabbat]

5. “合买”单元格子控制器“全部彩种”按钮的Titil和Image交换位置

　　5.1 新建Objective-C File：Lottery->Comman->Objective->File：Frame；File Type：Category；Class：UIView
　　　　5.1.1 在“UIView+Frame.h”新建x，y，w，h属性，代码如下：

@property (nonatomic, assign) CGFloat x;
@property (nonatomic, assign) CGFloat y;
@property (nonatomic, assign) CGFloat w;
@property (nonatomic, assign) CGFloat h;

View Code

　　　　5.1.2 在“UIView+Frame.m”新建获取x，y，w，h值方法，代码如下：

- (void)setX:(CGFloat)x{
    //获取 label 的frame
    CGRect rect = selfl.frame;
    //修改结构体
    rect.origin.x = x;
    //赋值
    self.frame = rect;
}
- (CGFloat)x {
return self.frame.origin.x;
}

- (void)setY:(CGFloat)x{
    //获取 label 的frame
    CGRect rect = selfl.frame;
    //修改结构体
    rect.origin.y = y;
    //赋值
    self.frame = rect;
}
- (CGFloat)y {
return self.frame.origin.y;
}

- (void)setW:(CGFloat)w{
    //获取 label 的frame
    CGRect rect = selfl.frame;
    //修改结构体
    rect.size.width = w;
    //赋值
    self.frame = rect;
}
- (CGFloat)w {
return self.frame.size.width;
}

- (void)setH:(CGFloat)h{
    //获取 label 的frame
    CGRect rect = selfl.frame;
    //修改结构体
    rect.size.hight = h;
    //赋值
    self.frame = rect;
}
- (CGFloat)h {
return self.frame.size.hight;
}

View Code

　　5.2 新建UIButton：Discovery(发现)->View->Cocoa Touch Class->Class：HMGroupBuyButton；Subclass of：UIButton

　　　　5.2.1 设置“合买”单元格子控制器的”全部彩种“按钮的类为“HMGroupBuyButton”：Custom Class->Class：HMGroupBuyButton

　　　　5.2.2 在“HMGroupBuyButton.m”文件中新建方法修改 “全部彩种”按钮的Title和Image的x值，代码如下：

#import "UIView+Frame.h"
- （void)layoutSubviews{
[super layoutSubvies];

//label的x值为0
self.titleLabel.x = 0;
//imageView的x值等于label的w值
self.imageView.x = self.titleLable.w
}

View Code

6. 点击 “全部彩种”按钮，三角形右旋转180度，并弹出蓝色View

　　6.1 新建UIViewController：Discovery(发现)->Controller->Cocoa Touch Class->Class：HMGroupBuyController；Subclass of：UIViewController

　　6.2 设置“合买”单元格子控制器的类为“HMGroupBuyController”：Custom Class->Class：HMGroupBuyController

　　6.3 在“HMGroupBuyController”文件中懒加载蓝色View的方法，代码如下：

//蓝色 View 的全局变量
@property (nonatomic, weak) UIView *blueView;

//懒加载蓝色 View 的方法
- (UIView *)blueView {
    if (!_blueView) {
        UIView *blueView = [[UIView alloc] init];
        blueView.backgroundColor = [UIColor blueColor];
        blueView.frame = CGRectMake(0, 64, kScreenWidth, 0);
        [self.view addSubview:blueView];

        _blueView = blueView;
    }
    return _blueView;
}
//调用蓝色 View
- (void)viewDidLoad
{
    [self blueView];
}

View Code

　　6.4 “全部彩种”按钮点击事件： “全部彩种”按钮->拖线->HMGroupBuyController.m，代码如下：

//全部彩种点击事件
- (IBAction)groupBuyClick:(UIButton *)sender {
    //动画显示
    [UIView animateWithDuration:0.25
                    animations:^{
                        //如果蓝色View高度有值，点击设置为0；没值，则设置为150；
                        self.blueView.h = self.blueView.h ? 0 :150;
                        //三角形旋转，点击1次自身旋转180
                        sender.imageView.transform = CGAffineTransformRotate(sender.imageView.tansform,M_PI);
                    }];
}

View Code

7. “幸运选号”单元格子控制器

　　7.1 Discovery.storyboard->拖进View Controller->鼠标左键点住“幸运选号”单元格->键盘按住control键拖线->push

　　7.2 去掉“幸运选号”单元格右侧箭头：选中单元格，Table View Cell->Accessory：None

　　7.3 设置导航栏标题：Navigation Item->Title：幸运选号

　　7.4 推进“幸运选号”单元格子控制器时，自动隐藏系统TabBar（全局）

　　　　7.4.1 “幸运选号”单元格子控制器->View Controoler->Hide Bottom Bar on Push：去掉勾勾

　　　　7.4.2 在Main(主框架)->Controller->HMTabBarController.m->写push方法，代码如下：

//只要使用这个 nav 去 push，那么都隐藏 tabbar
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated {
    
    viewController.hidesBottonBarWhenPushed = YES;
    
    [super pushViewController:viewController animated:animated];
    
}

View Code

8. “幸运选号”单元格子控制器的界面

　　8.1 “幸运选号”单元格子控制器拖进Image View，设置自动布局上，左，右都为0，点击下约束，勾选View(current distance = 0)

　　8.2 设置Image View的图片：Image View->Image：luck_entry_background

　　8.3 拖进彩灯图片：lucky entry light0，约束：上，宽，高，居中：按住图片往下拖，选择Ceater Horizontally

　　8.4 新建UIViewController：Discovery(发现)->Controller->Cocoa Touch Class->Class：HMLuckyController；Subclass of：UIViewController

　　8.5 设置“幸运选号”单元格子控制器的类为“HMLuckyController”：Custom Class->Class：HMLuckyController

　　8.6 彩灯闪烁动画效果
　　　　8.6.1 彩灯图片->拖线->HMLuckyController.m->@property (weak, nonatomic) IBOutlet UIImageView *imageView
　　　　8.6.2 在Discovery(发现)->Controller->->HMLuckyController.m的“viewDidLoad”方法中创建彩灯动画效果，代码如下：

- (void)viewDidLoad
{
    //设置要做动画的图片
    self.imageView.animationImages = @[[UIImage imageNamed:@"lucky_entry_light0"];
                                        [UIImage imageNamed:@"lucky_entry_light1"]];
    //动画执行时间
    self.imageView.animationDuration = 1;
    //次数
    self.imageView.animationRepeatCont = 0;
    //开始
    [self.imageView startAnimating];
}

View Code

　　8.7 添加"生日选号仪"按钮

　　　　拖进Button：中心线偏左位置->Button->Title：清空；Image：luck_entry_birthday_button_normal

　　　　自动布局：设置居中：按住图片往下拖，选择Ceater Horizontally；Constraints：Asign Center X to：Constant：-86；约束：上，宽，高

　　8.8 添加"幸运数字仪"按钮

　　　　拖进Button：中心线偏右位置->Button->Title：清空；Image：

　　　　自动布局：设置居中：按住图片往下拖，选择Ceater Horizontally；Constraints：Asign Center X to：Constant：86；约束：上，宽，高

　　8.9 添加"无敌上上签"按钮

　　　　拖进Button：中心线偏左->Button->Title：清空；Image：

　　　　自动布局：设置居中：按住图片往下拖，选择Ceater Horizontally；Constraints：Asign Center X to：Constant：-86；约束：上，宽，高

　　8.10 添加"梦想大转盘"按钮

　　　　拖进Button：中心线偏右->Button->Title：清空；Image：

　　　　自动布局：设置居中：按住图片往下拖，选择Ceater Horizontally；Constraints：Asign Center X to：Constant：86；约束：上，宽，高

　　8.11 更新约束

posted on 2018-10-21 17:05 写写代码，打发时间阅读(260) 评论(0) 编辑收藏举报

秒客网

网易彩票-发现 - 写写代码，打发时间

网易彩票-发现