1.设置Discovery(发现)->View-Discovery.storyboard->TableViewController->TableView为静态单元格,风格为组:TableView->Content:StaticCells;Style:Grouped
2.“合买”单元格设计
2.1设置单元格高度:TableViewController->TableView->TableViewSection->TableViewCell->RowHeyght:90
2.2设置“合买”图片:TableViewCell->左上方拖进ImageView->ImageView->Image:discovery_groupBuy_title
2.3设置“奖杯”图片:TableViewCell->右下方拖进ImageView->ImageView->Image:discovery_groupBuy_icon
2.4设置标签内容:TableViewCell->“合买”图片下方拖进Label->Label->Text:Plain\t跟着高手买资金一起分
2.5设置“合买”图片和“奖杯”图片等同原图大小:Editor->SizetoFistContent(快捷键:command+=)
2.6设置“合买”图片的约束:上,左,宽,高
2.7设置“奖杯”图片的约束:下,右,宽,高
3.“幸运选号”单元格设计
3.1复制“合买”单元格
3.2设置“幸运选号”图片:ImageView->Image:discovery_luckyBet_title
3.3设置“女孩”图片:ImageView->Image:discovery_luckyBet_icon
3.4设置标签内容:Label->Text:Plain\t引爆财运命中注定中不了奖
3.5设置“幸运选号”图片和“女孩”图片等同原图大小:Editor->SizetoFistContent(快捷键:command+=)
3.6设置“引爆财运命中注定中不了奖”Label的约束:Constraints->LeadingSpaceto:Superview->Edit->Constant:16
3.7设置“女孩”图片的约束:Constraints->TrailingSpaceto:Superview->Edit->Constant:-8
4.“合买”单元格子控制器
4.1Discovery.storyboard->拖进ViewController->鼠标左键点住“合买”单元格->键盘按住control键拖线->push
4.2去掉“合买”单元格右侧箭头:选中单元格,TableViewCell->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.navigationBarsetTintColor:[UIColorwhiteColor]];ViewCode4.5推进“合买”单元格子控制器时,自动隐藏系统TabBar
4.5.1“合买”单元格子控制器->ViewControoler->HideBottomBaronPush:勾选勾勾
4.5.2在Main(主框架)->Controller->HMTabBarController.m->“viewDidLoad”方法中修改代码如下:
修改tabbar的frame
原:tabbar.frame=self.tabBar.frame
改:tabbar.frame=self.tabBar.bounds
修改tabbar的添加方式
原:[self.viewaddSubview:tabbar]
改:[self.tarBaraddSubview:tabbat]
5.“合买”单元格子控制器“全部彩种”按钮的Titil和Image交换位置
5.1新建Objective-CFile:Lottery->Comman->Objective->File:Frame;FileType:Category;Class:UIView5.1.1在“UIView+Frame.h”新建x,y,w,h属性,代码如下:
@property(nonatomic,assign)CGFloatx;@property(nonatomic,assign)CGFloaty;@property(nonatomic,assign)CGFloatw;@property(nonatomic,assign)CGFloath;ViewCode5.1.2在“UIView+Frame.m”新建获取x,y,w,h值方法,代码如下:
-(void)setX:(CGFloat)x{//获取label的frameCGRectrect=selfl.frame;//修改结构体rect.origin.x=x;//赋值self.frame=rect;}-(CGFloat)x{returnself.frame.origin.x;}-(void)setY:(CGFloat)x{//获取label的frameCGRectrect=selfl.frame;//修改结构体rect.origin.y=y;//赋值self.frame=rect;}-(CGFloat)y{returnself.frame.origin.y;}-(void)setW:(CGFloat)w{//获取label的frameCGRectrect=selfl.frame;//修改结构体rect.size.width=w;//赋值self.frame=rect;}-(CGFloat)w{returnself.frame.size.width;}-(void)setH:(CGFloat)h{//获取label的frameCGRectrect=selfl.frame;//修改结构体rect.size.hight=h;//赋值self.frame=rect;}-(CGFloat)h{returnself.frame.size.hight;}ViewCode5.2新建UIButton:Discovery(发现)->View->CocoaTouchClass->Class:HMGroupBuyButton;Subclassof:UIButton
5.2.1设置“合买”单元格子控制器的”全部彩种“按钮的类为“HMGroupBuyButton”:CustomClass->Class:HMGroupBuyButton
5.2.2在“HMGroupBuyButton.m”文件中新建方法修改“全部彩种”按钮的Title和Image的x值,代码如下:
#import"UIView+Frame.h"-(void)layoutSubviews{[superlayoutSubvies];//label的x值为0self.titleLabel.x=0;//imageView的x值等于label的w值self.imageView.x=self.titleLable.w}ViewCode6.点击“全部彩种”按钮,三角形右旋转180度,并弹出蓝色View
6.1新建UIViewController:Discovery(发现)->Controller->CocoaTouchClass->Class:HMGroupBuyController;Subclassof:UIViewController
6.2设置“合买”单元格子控制器的类为“HMGroupBuyController”:CustomClass->Class:HMGroupBuyController
6.3在“HMGroupBuyController”文件中懒加载蓝色View的方法,代码如下:
//蓝色View的全局变量@property(nonatomic,weak)UIView*blueView;//懒加载蓝色View的方法-(UIView*)blueView{if(!_blueView){UIView*blueView=[[UIViewalloc]init];blueView.backgroundColor=[UIColorblueColor];blueView.frame=CGRectMake(0,64,kScreenWidth,0);[self.viewaddSubview:blueView];_blueView=blueView;}return_blueView;}//调用蓝色View-(void)viewDidLoad{[selfblueView];}ViewCode6.4“全部彩种”按钮点击事件:“全部彩种”按钮->拖线->HMGroupBuyController.m,代码如下:
//全部彩种点击事件-(IBAction)groupBuyClick:(UIButton*)sender{//动画显示[UIViewanimateWithDuration:0.25animations:^{//如果蓝色View高度有值,点击设置为0;没值,则设置为150;self.blueView.h=self.blueView.h0:150;//三角形旋转,点击1次自身旋转180sender.imageView.transform=CGAffineTransformRotate(sender.imageView.tansform,M_PI);}];}ViewCode7.“幸运选号”单元格子控制器
7.1Discovery.storyboard->拖进ViewController->鼠标左键点住“幸运选号”单元格->键盘按住control键拖线->push
7.2去掉“幸运选号”单元格右侧箭头:选中单元格,TableViewCell->Accessory:None
7.3设置导航栏标题:NavigationItem->Title:幸运选号
7.4推进“幸运选号”单元格子控制器时,自动隐藏系统TabBar(全局)
7.4.1“幸运选号”单元格子控制器->ViewControoler->HideBottomBaronPush:去掉勾勾
7.4.2在Main(主框架)->Controller->HMTabBarController.m->写push方法,代码如下:
//只要使用这个nav去push,那么都隐藏tabbar-(void)pushViewController:(UIViewController*)viewControlleranimated:(BOOL)animated{viewController.hidesBottonBarWhenPushed=YES;[superpushViewController:viewControlleranimated:animated];}ViewCode8.“幸运选号”单元格子控制器的界面
8.1“幸运选号”单元格子控制器拖进ImageView,设置自动布局上,左,右都为0,点击下约束,勾选View(currentdistance=0)
8.2设置ImageView的图片:ImageView->Image:luck_entry_background
8.3拖进彩灯图片:luckyentrylight0,约束:上,宽,高,居中:按住图片往下拖,选择CeaterHorizontally
8.4新建UIViewController:Discovery(发现)->Controller->CocoaTouchClass->Class:HMLuckyController;Subclassof:UIViewController
8.5设置“幸运选号”单元格子控制器的类为“HMLuckyController”:CustomClass->Class:HMLuckyController
8.6彩灯闪烁动画效果8.6.1彩灯图片->拖线->HMLuckyController.m->@property(weak,nonatomic)IBOutletUIImageView*imageView8.6.2在Discovery(发现)->Controller->->HMLuckyController.m的“viewDidLoad”方法中创建彩灯动画效果,代码如下:
拖进Button:中心线偏左位置->Button->Title:清空;Image:luck_entry_birthday_button_normal
自动布局:设置居中:按住图片往下拖,选择CeaterHorizontally;Constraints:AsignCenterXto:Constant:-86;约束:上,宽,高
8.8添加"幸运数字仪"按钮
拖进Button:中心线偏右位置->Button->Title:清空;Image:
自动布局:设置居中:按住图片往下拖,选择CeaterHorizontally;Constraints:AsignCenterXto:Constant:86;约束:上,宽,高