1、在很多APP中，我们都可以看见那些特效绚丽的滑动选项条，那么如何才能够简单，快速的实现那样的效果呢
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController{
NSMutableArray *btnArray
NSMutableArray *titleArray
}
@property (nonatomic,strong) UIView *customView
@property (nonatomic,strong) UIView *backView
@property (nonatomic,strong) UIButton *myButton
-(void)myButtonClcik:(id)sender
@end
第二步：在我们的额viewdidload方法中，或者自定义一个方法中创建我么的界面元素。《这里我引日了QuartzCore框架，是为了使用其layer属性》
[cpp] view plaincopy
#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
@interface ViewController ()
@end
@implementation ViewController
@synthesize customView
@synthesize backView
@synthesize myButton
//每行显示的button个数
#define kSelectNum 6
- (void)viewDidLoad
{
[super viewDidLoad]
// Do any additional setup after loading the view, typically from a nib.
//创建背景视图，并设置背景颜色或者图片
customView = [[UIView alloc]initWithFrame:CGRectMake(20, 100, 900, 60)]
customView.backgroundColor = [UIColor blackColor]
//设置customView的样式，变为圆角
customView.layer.cornerRadius = 15.0f
customView.layer.masksToBounds = YES
//将customView add 到当前主View中
[self.view addSubview:customView]
//创建button的背景视图
backView = [[UIView alloc] initWithFrame:CGRectMake(5, 5, 95, 50)]
backView.backgroundColor = [UIColor blueColor]
//设置为圆角。以免造成重叠显示
backView.layer.cornerRadius = 15.0f
backView.layer.masksToBounds = YES
//将backView视图add到customView中
[customView addSubview:backView]
//创建button，首先button的个数是不固定的，因此我们需要动态的生成button
//创建数组，保存button的title
btnArray = [[NSMutableArray alloc]init]
titleArray = [[NSMutableArray alloc]initWithObjects:@"热播大片",@"最新更新",@"最热观看",@"美剧大片",@"韩剧频道",@"综艺娱乐", nil]
//动态生成button
for (int i = 0i <kSelectNumi ++){
myButton = [UIButton buttonWithType:UIButtonTypeCustom]
myButton.titleLabel.font = [UIFont boldSystemFontOfSize:20.0f]
[myButton setTitle:[titleArray objectAtIndex:i] forState:UIControlStateNormal]
[myButton setTitleColor:[UIColor grayColor] forState:UIControlStateNormal]
[myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected]
[myButton setFrame:CGRectMake(i%(kSelectNum + 1)*140+5, 5, 95, 50)]
[myButton addTarget:self action:@selector(myButtonClcik:) forControlEvents:UIControlEventTouchUpInside]
myButton.tag = i
[btnArray addObject:myButton]
[customView addSubview:myButton]
//设置默认选择的button.title的颜色
if(i == 0){
myButton.selected = YES
}
}
}
第三步：我们为button添加按钮点击事件，同时设置背景色滑动特效。
[cpp] view plaincopy
- (void)myButtonClcik:(id)sender{
//NSString *selectedBtn = [NSString stringWithFormat:@"%@",[titleArray objectAtIndex:button.tag]]
//UIAlertView *alert = [[UIAlertView alloc]initWithTitle:nil message:selectedBtn delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil]
//[alert show]
//添加动画过度效果
[UIView beginAnimations:@"slowGlide" context:nil]
[UIView setAnimationDuration:0.3f]
//设置每次只能选择一个button
UIButton *button = (UIButton *)sender
if(!button.selected){
for (UIButton *eachBtn in btnArray) {
if(eachBtn.isSelected){
[eachBtn setSelected:NO]
}
}
[button setSelected:YES]
//设置点击那个按钮，那个按钮的背景改变为backView的颜色
[backView setFrame:button.frame]
}
[UIView commitAnimations]
}
最后成型，我们就可以根据我们的样式需要进行调整了。
一、简单说明
一般情况下，点击某个控件后，会做出相应反应的都是按钮
按钮的功能比较多，既能显示文字，又能显示图片，还能随时调整内部图片和文字的位置
二、按钮的三种状态
normal（普通状态）
默认情况（Default）
对应的枚举常量：UIControlStateNormal
highlighted（高亮状态）
按钮被按下去的时候（手指还未松开）
对应的枚举常量：UIControlStateHighlighted
disabled（失效状态，不可用状态）
如果enabled属性为NO，就是处于disable状态，代表按钮不可以被点击
对应的枚举常量：UIControlStateDisabled
三、注意点
（1）从Xcode5开始，图片资源都放到Images.xcassets中进行管理，可以使用拖拽的方式添加项目中用到的图片到Images.xcassets中
（2）若干多个控件共用一段代码，通常使用tag。
四、代码示例
（1）
复制代码 代码如下:
#import "LFViewController.h"
@interface LFViewController ()
@property (weak, nonatomic) IBOutlet UIButton *headImageView
@end
@implementation LFViewController
// 在OC中，绝大多数的控件的监听方法的第一个参数就是控件本身
//- (IBAction)left:(UIButton *)button {
//
// NSLog(@"----")
//}
- (IBAction)move
{
// 通过frame修改head的位置
// 在OC中，不允许直接修改“对象”的“结构体属性”的“成员”
// 允许修改“对象”的'“结构体属性”
// 1. 取出结构体属性
CGRect rect = self.headImageView.frame
// 2. 修改结构体成员
rect.origin.y -= 20
// 3. 设置对象的结构体属性
self.headImageView.frame = rect
}
（2）
复制代码 代码如下:
#import "LFViewController.h"
使用git
1. 创建项目时，勾选git
2. 开发告一段落后，选择"Source Control""Commit",并编写注释
// 枚举类型实质上就是一个整数，作用就是用来替代魔法数字
// 枚举类型中，指定了第一个整数之后，后面的数字会递增
typedef enum
kMovingDirTop = 10,
kMovingDirBottom,
kMovingDirLeft,
kMovingDirRight,
} kMovingDir
#define kMovingDelta 50
@interface LFViewController ()
@property (weak, nonatomic) IBOutlet UIButton *headImageView
@end
@implementation LFViewController
- (IBAction)move:(UIButton *)button
// CGRect rect = self.headImageView.frame
CGPoint p = self.headImageView.center
// magic number魔法数字，其他程序员看到代码的时候，不知道是什么意思
switch (button.tag) {
case kMovingDirTop:
p.y -= kMovingDelta
break
case kMovingDirBottom:
p.y += kMovingDelta
break
case kMovingDirLeft:
p.x -= kMovingDelta
break
case kMovingDirRight:
p.x += kMovingDelta
break
[UIView beginAnimations:nil context:nil]
[UIView setAnimationDuration:1.0]
self.headImageView.center = p
[UIView commitAnimations]
- (IBAction)zoom:(UIButton *)button
CGRect rect = self.headImageView.bounds
// 在C语言中，关于bool的判断：非零即真
if (button.tag) {
rect.size.width += 50
rect.size.height += 50
rect.size.width -= 50
rect.size.height -= 50
// 首尾动画
// beginAnimations表示此后的代码要“参与到”动画中
[UIView beginAnimations:nil context:nil]
[UIView setAnimationDuration:2.0]
self.headImageView.bounds = rect
// self.headImageView.alpha = 0
// commitAnimations,将beginAnimation之后的所有动画提交并生成动画
[UIView commitAnimations]
@end
五、补充笔记
1. IBAction的参数
- (IBAction)left:(UIButton *)button
（1） 在OC中，绝大多数的控件监听方法的第一个参数就是控件本身
（2） 默认连线时的参数类型是id
（3） 如果要在监听方法中，方便控件的使用，可以在连线时或者连线后，修改监听方法的参数类型
2. 修改对象的结构体成员
在OC中，不允许直接修改“对象”的“结构体属性”的“成员”，但是允许修改“对象”的“结构体属性”
修改结构体属性的成员方法如下：
（1）使用临时变量记录对象的结构体属性
（2） 修改临时变量的属性
（3）将临时变量重新设置给对象的结构体属性
3. 在程序开发中需要避免出现魔法数字(Magic Number)
使用枚举类型，可以避免在程序中出现魔法数字
（1）枚举类型实质上就是一个整数，其作用就是用来替代魔法数字
（2）枚举类型中，指定了第一个整数之后，后面的数字会递增
4. frame &bounds ¢er
1>frame可以修改对象的位置和尺寸
2>bounds可以修改对象的尺寸
3>center可以修改对象的位置
5. 首尾式动画
复制代码 代码如下:
// beginAnimations表示此后的代码要“参与到”动画中
[UIView beginAnimations:nil context:nil]
// setAnimationDuration用来指定动画持续时间
[UIView setAnimationDuration:2.0]
self.headImageView.bounds = rect
......
// commitAnimations，将beginAnimation之后的所有动画提交并生成动画
[UIView commitAnimations]
下面来罗列一下UIButton的基本属性罗列
第一、UIButton的定义
复制代码 代码如下:
UIButton *button=[[UIButton buttonWithType:(UIButtonType)
能够定义的button类型有以下6种，
复制代码 代码如下:
typedef enum {
UIButtonTypeCustom = 0, 自定义风格
UIButtonTypeRoundedRect, 圆角矩形
UIButtonTypeDetailDisclosure, 蓝色小箭头按钮，主要做详细说明用
UIButtonTypeInfoLight, 亮色感叹号
UIButtonTypeInfoDark, 暗色感叹号
UIButtonTypeContactAdd, 十字加号按钮
}UIButtonType
第二、设置frame
复制代码 代码如下:
button1.frame = CGRectMake(20, 20, 280, 40)
[button setFrame:CGRectMake(20,20,50,50)]
第三、button背景色
复制代码 代码如下:
button1.backgroundColor = [UIColor clearColor]
[button setBackgroundColor:[UIColor blueColor]]
第四、state状态
forState: 这个参数的作用是定义按钮的文字或图片在何种状态下才会显现
复制代码 代码如下:
enum {
UIControlStateNormal = 0, 常规状态显现
UIControlStateHighlighted = 1 <<0, 高亮状态显现
UIControlStateDisabled = 1 <<1, 禁用的状态才会显现
UIControlStateSelected = 1 <<2, 选中状态
UIControlStateApplication = 0x00FF0000, 当应用程序标志时
UIControlStateReserved = 0xFF000000 为内部框架预留，可以不管他
@property(nonatomic,getter=isEnabled)BOOL enabled// default is YES. if NO, ignores touch events and subclasses may draw differently
@property(nonatomic,getter=isSelected)BOOL selected// default is NO may be used by some subclasses or by application
@property(nonatomic,getter=isHighlighted)BOOL highlighted
第五 、设置button填充图片和背景图片
复制代码 代码如下:
[buttonsetImage:[UIImageimageNamed:@"checkmarkControllerIcon"]forState:UIControlStateNormal]
[buttonsetBackgroundImage:[UIImageimageNamed:@"checkmarkControllerIcon"]forState:UIControlStateNormal]
第六、设置button标题和标题颜色
复制代码 代码如下:
[button1 setTitle:@"点击" forState:UIControlStateNormal]
[buttonsetTitleColor:[UIColorredColor]forState:UIControlStateNormal]
第七、设置按钮按下会发光
复制代码 代码如下:
button.showsTouchWhenHighlighted=NO
第八、添加或删除事件处理
复制代码 代码如下:
[button1 addTarget:self action:@selector(butClick:) forControlEvents:UIControlEventTouchUpInside]
[btn removeTarget:nil action:nil forControlEvents:UIControlEventTouchUpInside]
第九、 设置按钮内部图片间距和标题间距
复制代码 代码如下:
UIEdgeInsets insets// 设置按钮内部图片间距
insets.top = insets.bottom = insets.right = insets.left = 10
bt.contentEdgeInsets = insets
bt.titleEdgeInsets = insets// 标题间距
1.CGRect frame
1>表示控件的位置和尺寸（以父控件的左上角为坐标原点（0, 0））
2>修改这个属性，可以调整控件的位置和尺寸
2.CGPoint center
1>表示控件的中点（以父控件的左上角为坐标原点）
2>修改这个属性，可以调整控件的位置
3.CGRect bounds
1>表示控件的位置和尺寸（以自己的左上角位坐标原点，位置永远是(0, 0)）
2>修改这个属性，只能调整控件的尺寸
4.int tag
1>表示控件的标识
2>通过不同标识可以区分不同的控件
5.CGAffineTransform transform
1>表示控件的形变状态（旋转角度、缩放比例）
2>创建CGAffineTransform的函数
`* CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
创建一个x、y方向的缩放比例分别为sx、sy的形变值
* CGAffineTransformMakeRotation(CGFloat angle)
创建一个旋转角度为angle的形变值
* CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)
在形变值t的基础上，再进行缩放，x、y方向的缩放比例分别为sx、sy，然后返回一个新的形变值
* CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
在形变值t的基础上，再进行旋转，旋转角度为angle，然后返回一个新的形变值
二、添加控件到控制器的view
[self.view addSubview:子控件]`
如: [self.view addSubview:子控件]
2.1.设置按钮的属性
```
// 1.创建按钮
// 1.1.创建
UIButton *btn = [[UIButton alloc] init]
// 1.2.设置按钮的尺寸和位置
btn.frame = CGRectMake(0, 0, 100, 100)
// 1.3.设置按钮普通状态下的属性
// 1.3.1.设置背景图片
UIImage *normal = [UIImage imageNamed:@"btn_01.png"]
[btn setBackgroundImage:normal forState:UIControlStateNormal]
// 1.3.2.设置文字
[btn setTitle:@"你好" forState:UIControlStateNormal]
// 1.3.3.设置文字颜色
[btn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal]
// 1.4.设置按钮高亮状态下的属性
// 1.4.1.设置背景图片
UIImage *high = [UIImage imageNamed:@"btn_02.png"]
[btn setBackgroundImage:high forState:UIControlStateHighlighted]
// 1.4.2.设置文字
[btn setTitle:@"Hello" forState:UIControlStateHighlighted]
// 1.4.3.设置文字颜色
[btn setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted]
// 1.5.监听按钮点击
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside]
```
1.这是控制器的一个方法
2.当控制器的view创建完毕的时候会调用一次
1.value属性可以获得当前的进度值
2.按钮的value发生改变了，会触发UIControlEventValueChanged事件
1.加载一个plist文件的时候，会返回一个plist的根节点对象（Root）
1.利用NSBundle可以访问某个资源包的内容
2.如果访问软件中最主要资源包的内容，应该用mainBundle
```
NSBundle *bundle = [NSBundle mainBundle]
```
3.利用NSBundle获得文件的全路径
```
NSString *path = [bundle pathForResource:@"descs" ofType:@"plist"]
```
```
ViewController.h
#import@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIButton *btn
// 重置
- (IBAction)reset:(id)sender
// 行走
- (IBAction)run:(id)sender
// 缩放
- (IBAction)scale:(id)sender
// 旋转
- (IBAction)rotate:(id)sender
@end
```
```
#import "ViewController.h"
#define kDelta 50
//const int delta = 50
@interface ViewController ()
//{
// CGFloat _angle
//}
@end
@implementation ViewController
//- (void)begin
//{
// // 0.动画（头部-开始动画）
// [UIView beginAnimations:nil context:nil]
// // 设置动画的执行时间
// [UIView setAnimationDuration:1.0]
//}
//
//- (void)end
//{
// // 4.动画（尾部-提交动画-执行动画）
// [UIView commitAnimations]
//}
- (void)btnClickWithBlock:(void (^)())block
{
// 0.动画（头部-开始动画）
[UIView beginAnimations:nil context:nil]
// 设置动画的执行时间
[UIView setAnimationDuration:1.0]
block()
// 1.动画（尾部-提交动画-执行动画）
[UIView commitAnimations]
}
#pragma mark 控制按钮走动（上下左右）
- (IBAction)run:(id)sender {
[self btnClickWithBlock:^{
// 1.先取出frame
// CGRect tempFrame = _btn.frame
CGPoint tempCenter = _btn.center
// 2.取出按钮的tag标记
int tag = [sender tag]
// CGFloat delta = 100
switch (tag) {
case 1: // 上
// tempFrame.origin.y -= kDelta
tempCenter.y -= kDelta
break
case 2: // 右
// tempFrame.origin.x += kDelta
tempCenter.x += kDelta
break
case 3: // 下
// tempFrame.origin.y += kDelta
tempCenter.y += kDelta
break
case 4: // 左
// tempFrame.origin.x -= kDelta
tempCenter.x -= kDelta
break
default:
break
}
// 3.重新赋值按钮的frame
// _btn.frame = tempFrame
_btn.center = tempCenter
}]
}
#pragma mark 放大\缩小
- (IBAction)scale:(id)sender {
[self btnClickWithBlock:^{
CGFloat scale = [sender tag] == 20 ? 1.2 : 0.8
_btn.transform = CGAffineTransformScale(_btn.transform, scale, scale)
}]
}
#pragma mark 左旋转\右旋转
- (IBAction)rotate:(id)sender {
// _angle -= M_PI_4
// 弧度 3.14 - π
// 角度 180
// 向左旋转45°
// _btn.transform = CGAffineTransformMakeRotation(- M_PI_4)
// _btn.transform = CGAffineTransformRotate(_btn.transform, M_PI_4 * (10 == tag?-1:1))
[self btnClickWithBlock:^{
int tag = [sender tag]
if (10 == tag) { // 左
_btn.transform = CGAffineTransformRotate(_btn.transform, M_PI_4 * -1)
} else { // 右
_btn.transform = CGAffineTransformRotate(_btn.transform, M_PI_4 * 1)
}
}]
}
#pragma mark 重置
- (IBAction)reset:(id)sender {
// 清空之前所有的形变状态（消除以前的旋转、缩放等状态）
// _btn.transform = CGAffineTransformIdentity
[self btnClickWithBlock:^{
_btn.transform = CGAffineTransformIdentity
}]
}
@end
```
```
#import@interface ViewController : UIViewController
- (IBAction)nightMode:(UISwitch *)sender
- (IBAction)imageSizeChange:(UISlider *)sender
- (IBAction)setting
- (IBAction)sliderValueChange:(UISlider *)sender
@property (weak, nonatomic) IBOutlet UIImageView *imageView
@property (weak, nonatomic) IBOutlet UILabel *imageNo
@property (weak, nonatomic) IBOutlet UILabel *imageDesc
@property (weak, nonatomic) IBOutlet UIView *settingView
@end
```
```
#import "ViewController.h"
@interface ViewController ()
{
NSArray *_allDescs
}
@end
@implementation ViewController
#pragma mark 控制器的view加载完毕后会调用一次
- (void)viewDidLoad
{
[super viewDidLoad]
// 1.获得所有的描述(通过解析plist文件来创建数组对象，比如传入文件的全路径)
// 如果要访问项目中资源包里面的所有资源。应该用mainBundle
NSBundle *bundle = [NSBundle mainBundle]
// 获得文件的全路径
NSString *path = [bundle pathForResource:@"descs" ofType:@"plist"]
// 加载path对应的文件来创建数组
_allDescs = [NSArray arrayWithContentsOfFile:path]
// 2.设置默认的描述
_imageDesc.text = _allDescs[0]
}
#pragma mark 夜间模式
- (IBAction)nightMode:(UISwitch *)sender {
if (sender.on) { // 开
self.view.backgroundColor = [UIColor darkGrayColor]
} else { // 关
self.view.backgroundColor = [UIColor whiteColor]
}
}
#pragma mark 图片尺寸改变了
- (IBAction)imageSizeChange:(UISlider *)sender {
// // 1.取出frame
// CGRect tempFrame = _imageView.frame
//
// // 2.修改frame
// tempFrame.size.width = sender.value * 320
// tempFrame.size.height = sender.value * 100
//
// // 3.重新赋值frame
// _imageView.frame = tempFrame
_imageView.transform = CGAffineTransformMakeScale(sender.value, sender.value)
}
#pragma mark 点击了设置
- (IBAction)setting {
[UIView beginAnimations:nil context:nil]
[UIView setAnimationDuration:0.5]
// 1.取出中点
CGPoint tempCenter = _settingView.center
// 2.修改y值
// tempCenter.y -= _settingView.frame.size.height
if (_settingView.frame.origin.y == self.view.frame.size.height) { // 设置界面目前看不见
tempCenter.y -= _settingView.bounds.size.height
} else { // 能看见设置界面
tempCenter.y += _settingView.bounds.size.height
}
// 3.重新赋值
_settingView.center = tempCenter
[UIView commitAnimations]
}
#pragma mark slider值改变
- (IBAction)sliderValueChange:(UISlider *)sender {
// 1.设置中间的图片
// 获得图片名称 %.f 不保留任何小数
NSString *imageName = [NSString stringWithFormat:@"%.f.png", sender.value]
_imageView.image = [UIImage imageNamed:imageName]
// 2.设置序号（第几张）
_imageNo.text = [NSString stringWithFormat:@"%.f/16", sender.value + 1]
// 3.设置描述
int no = (int)(sender.value + 0.5)
_imageDesc.text = _allDescs[no]
}
@end
```
如果还有什么不太明白，欢迎留言。2016第一篇blog，谢谢大家！
出处： http://qingche/
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）