首先看一我们要实现的效果:demo下载
开始我们的操作
1、拷贝图片素材,下载demo里面的图片素材,然后把Assets.xcassets文件夹下面Arrow,Icon,Other复制粘贴到自己的项目里面,关于图片的规格和尺寸什么的先不用考虑。
2、为按钮添加默认图片背景和被按下时候的图片背景
我们从控件栏拿过来一个Button,然后选中该按钮,发现右侧的status config默认为default,我们设置background的值为btn_01。
然后重新选择status config 为HighLighted,同时设置background的值为btn_02,这样就实现了按钮默认和按下不同背景的效果。
不过这时候我们发现按钮按下的时候还有个灰色效果,非常难看,需要我们修改按钮的style为custom。
3、用同样的方式,我们再添加四个箭头和加减号留个按钮
分别为这些个按钮设置默认和高亮两种状态不同的背景图片。
为这些按钮分别添加moveLeft,moveTop,moveRight,moveBottom,subSize,addSize点击事件方法。
4、获取最上方按钮对应的对象,并修改该按钮的位置
为图片按钮添加对应的btnClick对象,IOS界面是一个x坐标从左向右增大,y坐标从上向下增大的坐标系,要想修改一个按钮的位置,需要获取该按钮的frame对象,然后增加或者减少该按钮的x,y坐标值。
以moveLeft为例,moveLeft的具体代码如下:
- (IBAction)moveLeft {
NSLog(@"按钮向左移动");
//获取当前btnClick的frame对象
CGRect frame = self.btnCliclk.frame;
//对frame.origin.x进行减少操作
frame.origin.x -= 10;
//重新把frame赋值给btnClick.frame,IOS不允许对self.btnCliclk.frame.origin的x和y进行直接操作
self.btnCliclk.frame = frame;
}
- 向上,向下,向右都是同样的原理,分别为他们添加代码
5、获取最上方按钮对应的对象,并修改该按钮的大小
想要修改按钮的大小,我们需要修改按钮对象frame.size的大小
以subSize为例,实现按钮缩小的具体代码如下:
- (IBAction)subSize {
NSLog(@"减少按钮大小");
//获取当前btnClick的frame对象
CGRect frame = self.btnCliclk.frame;
//对frame.size.height和frame.size.width进行减少操作
frame.size.height -= 5;
frame.size.width -= 5;
//重新把frame赋值给btnClick.frame,IOS不允许对self.btnCliclk.frame.size的width和height进行直接操作
self.btnCliclk.frame = frame;
}
- 同理可以也可以实现按钮的放大
6、上面代码为六个按钮每个都添加了一个点击事件,我们完全可以把上面的六个方法封装成两个方法,move()和scale()方法。但是为了区分,我们需要传入当前触发点击事件的button所对应的对象,并提前为每个button对象添加tag标记。然后在move()方法里面进行判断处理:
按下control键,然后使用鼠标拖拽事件线到对应的viewController里面,命名type为UIButton,Name为move,
为“左移”按钮添加tag
依次对其他几个按钮进行此操作,操作完毕,贴上代码:
- (IBAction)move:(UIButton *)sender {
CGRect frame = self.btnCliclk.frame;
switch (sender.tag) {
case 10:
frame.origin.x -= 10;
self.btnCliclk.frame = frame;
break;
case 20:
frame.origin.x += 10;
self.btnCliclk.frame = frame;
break;
case 30:
frame.origin.y -= 10;
self.btnCliclk.frame = frame;
break;
case 40:
frame.origin.y += 10;
self.btnCliclk.frame = frame;
break;
default:
break;
}
}
- (IBAction)scale:(UIButton *)sender {
CGRect frame = self.btnCliclk.frame;
switch (sender.tag) {
case 100:
NSLog(@"减少按钮大小");
frame.size.height -= 5;
frame.size.width -= 5;
self.btnCliclk.frame = frame;
break;
case 200:
NSLog(@"增大按钮大小");
frame.size.height += 5;
frame.size.width += 5;
self.btnCliclk.frame = frame;
break;
default:
break;
}
}