QMUI的使用(二) - iOS幽灵按钮ghostButton

小浣熊博客

iOS开发UI组件腾讯QMUI框架(iOS)介绍

1. 幽灵按钮的使用

幽灵按钮效果图.png

实现上面效果的代码:

- (void)initSubviews {
    [super initSubviews];
    self.ghostButton1 = [[QMUIGhostButton alloc]initWithGhostType:QMUIGhostButtonColorBlue];
    self.ghostButton1.titleLabel.font = UIFontMake(14);
    [self.ghostButton1 setTitle:@"QMUIGhostButtonColorBlue" forState:UIControlStateNormal];
    self.ghostButton1.cornerRadius = 20;  // 默认为按钮高度的一半,改变数值以改变圆角大小
    [self.view addSubview:self.ghostButton1];

    self.ghostButton2 = [[QMUIGhostButton alloc]init];
    self.ghostButton2.ghostColor = [UIColor grayColor]; // 自定义幽灵按钮的颜色(这里不是QMUI的枚举颜色)
    self.ghostButton2.titleLabel.font = UIFontMake(14);
    [self.ghostButton2 setTitle:@"QMUIGhostButtonColorRed" forState:UIControlStateNormal];
    [self.view addSubview:self.ghostButton2];
    
    self.separatorLayer1 = [QDCommonUI generateSeparatorLayer];
    [self.view.layer addSublayer:self.separatorLayer1];
    self.separatorLayer2 = [QDCommonUI generateSeparatorLayerColorBlue]; // 如果要改变分割线的颜色,在QDCommonUI文件中添加类对应的方法即可.
    [self.view.layer addSublayer:self.separatorLayer2];
}
- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    CGFloat contentMinY = CGRectGetMaxY(self.navigationController.navigationBar.frame);
    CGFloat buttonSpacingHeight = 72;
    CGSize buttonSize = CGSizeMake(260, 40);
    CGFloat buttonMinX = CGFloatGetCenter(CGRectGetWidth(self.view.bounds), buttonSize.width);
    CGFloat buttonOffsetY = CGFloatGetCenter(buttonSpacingHeight, buttonSize.height);
    
    self.ghostButton1.frame = CGRectFlatMake(buttonMinX, contentMinY + buttonOffsetY, buttonSize.width, buttonSize.height);
    self.ghostButton2.frame = CGRectFlatMake(buttonMinX, contentMinY + buttonSpacingHeight + buttonOffsetY, buttonSize.width, buttonSize.height);
    
    self.separatorLayer1.frame = CGRectMake(0, contentMinY + buttonSpacingHeight - PixelOne, CGRectGetWidth(self.view.bounds), PixelOne);
    self.separatorLayer2.frame = CGRectMake(0, contentMinY + buttonSpacingHeight * 2 - PixelOne, CGRectGetWidth(self.view.bounds), PixelOne);
}

还支持设置带有图片的幽灵按钮,图片可以通过枚举类型设置图片在按钮标题的上左下右,支持设置图片和标题的间隔,具体代码如下:

self.ghostButton3 = [[QMUIGhostButton alloc] initWithGhostType:QMUIGhostButtonColorGreen];
self.ghostButton3.titleLabel.font = UIFontMake(14);
[self.ghostButton3 setTitle:@"点击修改ghostColor" forState:UIControlStateNormal];
[self.ghostButton3 setImage:UIImageMake(@"icon_emotion") forState:UIControlStateNormal];
self.ghostButton3.imageEdgeInsets = UIEdgeInsetsMake(0, 6, 0, 0);    //设置图片和标题的间隔
self.ghostButton3.imagePosition = QMUIButtonImagePositionRight;      //默认为QMUIButtonImagePositionLeft
self.ghostButton3.adjustsImageWithGhostColor = YES;
[self.ghostButton3 addTarget:self action:@selector(handleGhostButtonColorEvent) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.ghostButton3];

效果如下:

带图片的幽灵按钮.png