IOS 实现背景滑动

1、在很多APP中，我们都可以看见那些特效绚丽的滑动选项条，那么如何才能够简单，快速的实现那样的效果呢


 

1. #import <UIKit/UIKit.h>  
2.   
3. @interface ViewController : UIViewController{  
4.     NSMutableArray *btnArray;  
5.     NSMutableArray *titleArray;  
6. }  
7.   
8. @property (nonatomic,strong) UIView *customView;  
9. @property (nonatomic,strong) UIView *backView;  
10. @property (nonatomic,strong) UIButton *myButton;  
11.   
12. -(void)myButtonClcik:(id)sender;  
13.   
14. @end  

第二步：在我们的额viewdidload方法中，或者自定义一个方法中创建我么的界面元素。《这里我引日了QuartzCore框架，是为了使用其layer属性》

 

 

[cpp]  view plain copy

1. #import "ViewController.h"  
2. #import <QuartzCore/QuartzCore.h>  
3.   
4. @interface ViewController ()  
5.   
6. @end  
7.   
8. @implementation ViewController  
9.   
10. @synthesize customView;  
11. @synthesize backView;  
12. @synthesize myButton;  
13.   
14. //每行显示的button个数  
15. #define kSelectNum 6  
16.   
17. - (void)viewDidLoad  
18. {  
19.     [super viewDidLoad];  
20.     // Do any additional setup after loading the view, typically from a nib.  
21.       
22.     //创建背景视图，并设置背景颜色或者图片  
23.     customView = [[UIView alloc]initWithFrame:CGRectMake(20, 100, 900, 60)];  
24.     customView.backgroundColor = [UIColor blackColor];  
25.     //设置customView的样式，变为圆角  
26.     customView.layer.cornerRadius = 15.0f;  
27.     customView.layer.masksToBounds = YES;  
28.     //将customView add 到当前主View中  
29.     [self.view addSubview:customView];  
30.       
31.     //创建button的背景视图  
32.     backView = [[UIView alloc] initWithFrame:CGRectMake(5, 5, 95, 50)];  
33.     backView.backgroundColor = [UIColor blueColor];  
34.     //设置为圆角。以免造成重叠显示  
35.     backView.layer.cornerRadius = 15.0f;  
36.     backView.layer.masksToBounds = YES;  
37.     //将backView视图add到customView中  
38.     [customView addSubview:backView];  
39.       
40.       
41.     //创建button，首先button的个数是不固定的，因此我们需要动态的生成button  
42.     //创建数组，保存button的title  
43.     btnArray = [[NSMutableArray alloc]init];  
44.     titleArray = [[NSMutableArray alloc]initWithObjects:@"热播大片",@"最新更新",@"最热观看",@"美剧大片",@"韩剧频道",@"综艺娱乐", nil];  
45.     //动态生成button  
46.     for (int i = 0; i < kSelectNum; i ++){  
47.         myButton = [UIButton buttonWithType:UIButtonTypeCustom];  
48.         myButton.titleLabel.font = [UIFont boldSystemFontOfSize:20.0f];  
49.         [myButton setTitle:[titleArray objectAtIndex:i] forState:UIControlStateNormal];  
50.         [myButton setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];  
51.         [myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected];  
52.         [myButton setFrame:CGRectMake(i%(kSelectNum + 1)*140+5, 5, 95, 50)];  
53.         [myButton addTarget:self action:@selector(myButtonClcik:) forControlEvents:UIControlEventTouchUpInside];  
54.         myButton.tag = i;  
55.         [btnArray addObject:myButton];  
56.         [customView addSubview:myButton];  
57.           
58.         //设置默认选择的button.title的颜色  
59.         if(i == 0){  
60.             myButton.selected = YES;  
61.         }  
62.     }  
63. }  

第三步：我们为button添加按钮点击事件，同时设置背景色滑动特效。

 

 

[cpp]  view plain copy

1. - (void)myButtonClcik:(id)sender{  
2. //    NSString *selectedBtn = [NSString stringWithFormat:@"%@",[titleArray objectAtIndex:button.tag]];  
3. //    UIAlertView *alert = [[UIAlertView alloc]initWithTitle:nil message:selectedBtn delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];  
4. //    [alert show];  
5.       
6.     //添加动画过度效果  
7.     [UIView beginAnimations:@"slowGlide" context:nil];  
8.     [UIView setAnimationDuration:0.3f];  
9.       
10.     //设置每次只能选择一个button  
11.     UIButton *button = (UIButton *)sender;  
12.     if(!button.selected){  
13.         for (UIButton *eachBtn in btnArray) {  
14.             if(eachBtn.isSelected){  
15.                 [eachBtn setSelected:NO];  
16.             }  
17.         }  
18.         [button setSelected:YES];  
19.           
20.         //设置点击那个按钮，那个按钮的背景改变为backView的颜色  
21.         [backView setFrame:button.frame];  
22.     }  
23.     [UIView commitAnimations];  
24. }  

最后成型，我们就可以根据我们的样式需要进行调整了。