当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS开发-UI高级 选中按钮的实现方法总结

iOS开发-UI高级 选中按钮的实现方法总结

2018年02月23日  | 移动技术网移动技术  | 我要评论

方法一：

UIView的类目：

 

-(void)setCenterX:(CGFloat)centerX{
    CGPoint center = self.center;
    center.x = centerX;
    self.center = center;
}

-(void)setCenterY:(CGFloat)centerY{
    CGPoint center = self.center;
    center.y = centerY;
    self.center = center;
}

-(CGFloat)centerX{
    return self.center.x;
}

-(CGFloat)centerY{
    return self.center.y;
}

设置按钮：

 

 

#import "ViewController.h"

@interface ViewController ()
// 下标指示视图属性
@property(nonatomic,strong)UIView *suffixView;
// 选中按钮属性
@property(nonatomic,strong)UIButton *selectedBtn;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 数组的设置
    NSArray *titleArray = @[@"全部",@"视频",@"娱乐",@"图片",@"新闻"];
    CGFloat titleBtnX = self.view.frame.size.width/5;
    CGFloat titleBtnY = 64;
    CGFloat titleBtnWidth = self.view.frame.size.width/5;
    CGFloat titleBtnHeight = 35;
    for (int i = 0; i < 5; i++) {
        // titleBtn的初始化
        UIButton *titleBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        // titleBtn的frame设置
        titleBtn.frame = CGRectMake(titleBtnX * i, titleBtnY, titleBtnWidth, titleBtnHeight);
        // 设置titleBtn按钮的标题
        [titleBtn setTitle:titleArray[i] forState:UIControlStateNormal];
        // 正常状态的标题颜色
        [titleBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
        // 不能使用(选中)状态的标题颜色
        [titleBtn setTitleColor:[UIColor redColor] forState:UIControlStateDisabled];
        // 按钮的字体大小设置
        titleBtn.titleLabel.font = [UIFont systemFontOfSize:14];
        [titleBtn addTarget:self action:@selector(titleBtnAction:) forControlEvents:UIControlEventTouchUpInside];
        // 添加到self.view
        [self.view addSubview:titleBtn];
        
        // 默认选中第一个按钮
        if (i == 0) {
        
            titleBtn.enabled = NO;
            self.selectedBtn = titleBtn;
            // 按钮大小自适应
            [titleBtn.titleLabel sizeToFit];
            // 下标视图的中心点和按钮的中心点一样
            self.suffixView.width = titleBtn.titleLabel.width;
            self.suffixView.frame.center.x = titleBtn.center.x;
        }
    }  
}

 

// 标题按钮的响应事件
#pragma mark - 标题按钮的响应事件
-(void)titleBtnAction:(UIButton *)button{
    // 切换按钮的选中状态
    self.selectedBtn.enabled = YES;
    button.enabled = NO;
    self.selectedBtn = button;
    // 下标指示视图的移动
    [UIView animateWithDuration:0.2 animations:^{
        self.suffixView.width = button.titleLabel.width;
        self.suffixView.center = button.center;
    }];
    
}

方法二：

 

 

- (void)customTabBar{
    // 标题数组
    NSArray *titles = @[@"首页",@"新闻",@"Top",@"影院",@"更多"];
    // 图片数组
    NSArray *imageNames =@[@"movie_home",@"msg_new",@"start_top250",@"icon_cinema",@"more_setting"];
    // 按钮的宽度
    float buttonWidth = [UIScreen mainScreen].bounds.size.width/titles.count;
    // 选中图片初始化
    selectImageV = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
    selectImageV.image = [UIImage imageNamed:@"selectTabbar_bg_all"];
    // 添加到self.tabBar
    [self.tabBar addSubview:selectImageV];
    // 循环添加按钮标题和图片
    for (int i = 0; i < titles.count; i++) {
        NSString *title = titles[i];
        NSString *imageName = imageNames[i];
        CGRect frame = CGRectMake(i*buttonWidth, 0, buttonWidth, 49);
        // 初始化按钮
        TabBarButton *button = [[TabBarButton alloc] initWithFrame:frame withImageName:imageName withTitle:title];
        // 设置tag值
        button.tag = 1000 + i;
        // 按钮的响应事件
        [button addTarget:self
                   action:@selector(buttonAction:)
         forControlEvents:UIControlEventTouchUpInside];
        // 默认选中第一个按钮
        if (i == 0) {
            selectImageV.center = button.center;
        }
        // 添加到self.tabBar
        [self.tabBar addSubview:button];
        
    }
}

#pragma mark - 按钮的响应事件
- (void) buttonAction: (UIButton *)btn {
    // 选中按钮的下标
    self.selectedIndex = btn.tag - 1000;
    // 选中图片的中心点等于选中按钮的中心点
    [UIView animateWithDuration:0.3 animations:^{
        selectImageV.center = btn.center;
    }];
}
注意：这里只总结了两种常用方法

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网