iOS背景滑动效果
yihaoxue 人气:01、在很多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属性》
#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 = 0; i < kSelectNum; i ++){ 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添加按钮点击事件,同时设置背景色滑动特效。
- (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]; }
最后成型,我们就可以根据我们的样式需要进行调整了。
加载全部内容