`
java-mans
  • 浏览: 11342389 次
文章分类
社区版块
存档分类
最新评论

新手自定义背景滑动特效选项条,超简单实现方法

 
阅读更多

在很多APP中,我们都可以看见那些特效绚丽的滑动选项条,那么如何才能够简单,快速的实现那样的效果呢?首先我们分析一下那样的控件都需要什么?

1、既然是选项条,必然需要选择,因此我们需要UIButton。

2、选择那个button,那个button的背景从之前选择的那个平滑的移动到当前选择的button上,因此我们不能单纯的使用button的背景色,我们需要一个转为提供颜色的view,这样才有可能达到视图的平滑移动。

3、我们这些view需要一个载体,进行同意管理,因此我们需要一个MainView,来承载这些控件。

好了,分析完了,我们动手吧。

第一步:我们需要定义一些我们需要的对象,某些变量需要全局使用,定义的时候根据需要在权衡。

#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];
}

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

此种方法简单,但是可能有些地方不合理,望高手指点。

demo 下载地址:http://download.csdn.net/detail/zyc851224/4492735


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics