12、拨号键盘模块的实现：自定义组件

之前课程代码：

本次教案：

提前布置：

要求学生在课下研究iPhone通讯录的拨号页面，仔细观察都有哪些细节实现

∂

实现效果图：

实施步骤

1、基础UIButton实现自定义按钮

2、实现按钮形状，圆形。

3、为按钮添加属性（数字和字母标签）

4、为自定义按钮实现动画

5、实现拨号键盘中的圆形按钮布局

拨号键盘按钮设计及布局分析：

自定义按钮的实现其实比较简单，只需要实现一个UIButton的派生类就可以了，当然也可以考虑UIControl的子类。

1、圆形按钮的外功控制

//设置圆角半径

self.layer.cornerRadius=self.bounds.size.width/2;

//设置子图层蒙版

self.layer.masksToBounds=YES;

//设置按钮的边框宽度和颜色

self.layer.borderWidth=1.0f;

self.layer.borderColor= [[UIColordarkGrayColor]CGColor];

/*

这里CGColor其实是一个结构体，UIColor的一个成员属性

可以参考：http://www.cnblogs.com/smileEvday/archive/2012/06/05/UIColor_CIColor_CGColor.html

*/

2、动画效果

/*

在UIKit中，系统提供了animate标题打头的属于UIView的类方法让我们可以轻松的制作动画效果，每一个这样的类方法提供了名为animations的block代码块，这些代码会在方法调用后立刻或者延迟一段时间以动画的方式执行。此外，所有这些API的第一个参数都是用来设置动画时长的。

*/

//触摸开始，播放前半部动画

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent*)event{

[supertouchesBegan:toucheswithEvent:event];

//在0.5秒钟的时间内透明度由1.0->.0.2

[UIViewanimateWithDuration:0.5fanimations:^{

self.alpha=0.2f;

}];

}

//触摸结束，播放后半段动画

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent*)event{

[supertouchesEnded:toucheswithEvent:event];

[UIViewanimateWithDuration:0.5fanimations:^{

self.alpha=1.0f;

}];

}

3、属性标签的实现：

数字键1，只显示一个标签，但是位置靠上

*、#、拨号键只显示一个标签，且居中

数字键1，只显示一个标签，但是位置靠上

总结，可以分为两类：

有子标签：所有数字键（包括“1”，可以将其看作子标签不显示的特殊情况）： self.subTitle!=nil

没有子标签的：符号键（*、#）和拨号键（这里不用图标，使用字符“call”）: self.subTitle==nil

使用分支语句，兼容两种按钮（

if(subTitle !=nil){

//添加属性标签：

UILabel*mainLabel = [[UILabelalloc]initWithFrame:CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height/3.0*2)];

mainLabel.text=self.mainTitle;

[mainLabelsetTextAlignment:NSTextAlignmentCenter];

[mainLabelsetTextColor:[UIColordarkGrayColor]];

[mainLabelsetFont:[UIFontfontWithName:@"Heiti SC"size:40.0f]];

[selfaddSubview:mainLabel];

//将mainLabel的中心点移至水平中线1/3点

mainLabel.center=CGPointMake(self.bounds.size.width/2,self.bounds.size.height/3.0+5);

UILabel*subLabel = [[UILabelalloc]initWithFrame:CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height/3.0)];

subLabel.text=self.subTitle;

[subLabelsetTextAlignment:NSTextAlignmentCenter];

[subLabelsetTextColor:[UIColordarkGrayColor]];

//Helvetica字体是西方最常用的一种字体

[subLabelsetFont:[UIFontfontWithName:@"Helvetica"size:10.0f]];

//将subLabel的中心点移至水平中线2/3点

subLabel.center=CGPointMake(self.bounds.size.width/2.0,self.bounds.size.height/3*2);

[selfaddSubview:subLabel];

}else{

//            self.titleLabel.text = self.mainTitle;

[selfsetTitle:self.mainTitleforState:UIControlStateNormal];

[selfsetTitleColor:[UIColordarkGrayColor]forState:UIControlStateNormal];

[self.titleLabelsetFont:[UIFontfontWithName:@"Heiti SC"size:40.0f]];

//            [self.titleLabel setTextColor:[UIColor darkGrayColor]];

}

4、事件处理，代码同上。

老版本中需发现touchesBegin:和touchesEnded:方法与AddTargart：产生冲突，比较理想的解决办法是自己实现一个类似addTarget的方法，这李没有直接覆盖是因为文档中并没有addTarget方法的详细说明，所以折中自己实现，代码如下：

新版本中发现已经不存在这个问题，所以可以直接使用父类中继承的addTarget方法，因此，处理机制和普通方法没有任何区别。

本模块项目完整代码如下：

MPCircleButton.h

//

//  MPCircleButton.h

//仿iPhone电话App_2017

//

//  Created by GuoChunlei on 2017/6/26.

//  Copyright © 2017年class3g. All rights reserved.

//

#import

@interfaceMPCircleButton :UIButton

//主标签：数字、*、#、Call

@property(nonatomic,strong)NSString*mainTitle;

//子标签：字母

@property(nonatomic,strong)NSString*subTitle;

//设置属性，初始化外观

-(void)setMainTitle:(NSString*)mainTitle andSubTitle:(NSString*) subTitle;

@end

MPCircleButton.m

//

//  MPCircleButton.m

//仿iPhone电话App_2017

//

//  Created by GuoChunlei on 2017/6/26.

//  Copyright © 2017年class3g. All rights reserved.

//

#import"MPCircleButton.h"

@implementationMPCircleButton

-(void)setMainTitle:(NSString*)mainTitle andSubTitle:(NSString*) subTitle{

if(self!=nil) {

self.mainTitle= mainTitle;

self.subTitle= subTitle;

//设置圆角半径

self.layer.cornerRadius=self.bounds.size.width/2;

//设置子图层蒙版

self.layer.masksToBounds=YES;

//设置按钮的边框宽度和颜色

self.layer.borderWidth=1.0f;

self.layer.borderColor= [[UIColordarkGrayColor]CGColor];

/*

这里CGColor其实是一个结构体，UIColor的一个成员属性

可以参考：http://www.cnblogs.com/smileEvday/archive/2012/06/05/UIColor_CIColor_CGColor.html

*/

if(subTitle !=nil){

//添加属性标签：

UILabel*mainLabel = [[UILabelalloc]initWithFrame:CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height/3.0*2)];

mainLabel.text=self.mainTitle;

[mainLabelsetTextAlignment:NSTextAlignmentCenter];

[mainLabelsetTextColor:[UIColordarkGrayColor]];

[mainLabelsetFont:[UIFontfontWithName:@"Heiti SC"size:40.0f]];

[selfaddSubview:mainLabel];

//将mainLabel的中心点移至水平中线1/3点

mainLabel.center=CGPointMake(self.bounds.size.width/2,self.bounds.size.height/3.0+5);

UILabel*subLabel = [[UILabelalloc]initWithFrame:CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height/3.0)];

subLabel.text=self.subTitle;

[subLabelsetTextAlignment:NSTextAlignmentCenter];

[subLabelsetTextColor:[UIColordarkGrayColor]];

//Helvetica字体是西方最常用的一种字体

[subLabelsetFont:[UIFontfontWithName:@"Helvetica"size:10.0f]];

//将subLabel的中心点移至水平中线2/3点

subLabel.center=CGPointMake(self.bounds.size.width/2.0,self.bounds.size.height/3*2);

[selfaddSubview:subLabel];

}else{

//            self.titleLabel.text = self.mainTitle;

[selfsetTitle:self.mainTitleforState:UIControlStateNormal];

[selfsetTitleColor:[UIColordarkGrayColor]forState:UIControlStateNormal];

[self.titleLabelsetFont:[UIFontfontWithName:@"Heiti SC"size:40.0f]];

//            [self.titleLabel setTextColor:[UIColor darkGrayColor]];

}

}

}

/*

在UIKit中，系统提供了animate标题打头的属于UIView的类方法让我们可以轻松的制作动画效果，每一个这样的类方法提供了名为animations的block代码块，这些代码会在方法调用后立刻或者延迟一段时间以动画的方式执行。此外，所有这些API的第一个参数都是用来设置动画时长的。

*/

//触摸开始，播放前半部动画

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent*)event{

[supertouchesBegan:toucheswithEvent:event];

//在0.5秒钟的时间内透明度由1.0->.0.2

[UIViewanimateWithDuration:0.5fanimations:^{

self.alpha=0.2f;

}];

}

//触摸结束，播放后半段动画

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent*)event{

[supertouchesEnded:toucheswithEvent:event];

[UIViewanimateWithDuration:0.5fanimations:^{

self.alpha=1.0f;

}];

}

//-(void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents{

//    [super addTarget:target action:action forControlEvents:controlEvents];

//

//

//}

@end

DialPadViewController.m：测试代码

//

//  DialPadViewController.m

//仿iPhone通讯录

//

//  Created by GuoChunlei on 2017/6/26.

//  Copyright © 2017年class3g. All rights reserved.

//

#import"DialPadViewController.h"

#import"MPCircleButton.h"

@interfaceDialPadViewController()

@end

@implementationDialPadViewController

- (void)viewDidLoad {

[superviewDidLoad];

// Do any additional setup after loading the view.

MPCircleButton*testBtn = [[MPCircleButtonalloc]initWithFrame:CGRectMake(100,200,100,100)];

[self.viewaddSubview:testBtn];

[testBtnsetMainTitle:@"2"andSubTitle:@"ABC"];

testBtn.backgroundColor= [UIColororangeColor];

[testBtnaddTarget:selfaction:@selector(onclick:)forControlEvents:UIControlEventTouchUpInside];

MPCircleButton*otherTestBtn = [[MPCircleButtonalloc]initWithFrame:CGRectMake(100,400,100,100)];

[self.viewaddSubview:otherTestBtn];

[otherTestBtnsetMainTitle:@"#"andSubTitle:nil];

otherTestBtn.backgroundColor= [UIColorgreenColor];

//    otherTestBtn setTitle:<#(nullable NSString *)#> forState:<#(UIControlState)#>

[otherTestBtnaddTarget:selfaction:@selector(onOtherClick:)forControlEvents:UIControlEventTouchUpInside];

}

-(void)onclick:(MPCircleButton*)btn{

NSLog(@"%@", btn.mainTitle);

}

-(void)onOtherClick:(MPCircleButton*)btn{

NSLog(@"%@", btn.mainTitle);

}

- (void)didReceiveMemoryWarning {

[superdidReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

/*

#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {

// Get the new view controller using [segue destinationViewController].

// Pass the selected object to the new view controller.

}

*/

@end

本课习题：

1、完成课程中讲述的拨号键盘全部功能

2、研究尝试实现号码显示标签，如下图所示