我想制作一个带有三角形图标的按钮

Question

我想制作一个带有三角形图标的按钮，就像iBooks app风格一样。

按下该按钮时，将显示一个列表屏幕。 然后选择一个列表，按钮的语句将是所选文本和三角形的图标。图标始终是右侧。

[self.button setImage:[UIImage imageNamed:@"arrow-down"] forState:UIControlStateNormal];
CGFloat titleWidth = self.button.titleLabel.bounds.size.width;
CGFloat imageWidth = self.button.imageView.bounds.size.width;
// Title is left Image is right
self.button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWidth, 0, imageWidth);
self.button.imageEdgeInsets = UIEdgeInsetsMake(0, titleWidth, 0, -titleWidth);

所以我尝试制作一个示例应用。

https://github.com/kawai-hiroyuki/LikeIBooksDropDownMenu

但是，图标的位置绝对会偏离。 如何安装在右侧始终是图标。

Answer 1

我通过继承UIButton并覆盖setTitle:forState:以在unicode中添加空格然后向下箭头来轻松完成此操作。只需设置标题，箭头就会自动添加到右侧字体中。它还将极长的名称称为“极其......名字▼”

- (void)setTitle:(NSString *)title forState:(UIControlState)state
{
    title = [title stringByAppendingString:@" \u25BE"]; //Unicode - Small down arrow
    [super setTitle:title forState:state];
    [self sizeToFit];
}

如果您想要一个示例或者只是一个完整的子类，它也是一个下拉菜单，我建议this。 免责声明：我成功了。

Answer 2

您可以使用UIBezierPath绘制此内容，将其放在drawRect子类的UIButton方法中

static const float kTriangleHeight = 8.0f;
static const float kTriangleWidth = 8.0f;

UIBezierPath *trianglePath = [UIBezierPath bezierPath];
[trianglePath moveToPoint:CGPointMake(self.frame.size.width - kTriangleWidth - 3.0f, (self.frame.size.height / 2) - kTriangleHeight / 2)];
[trianglePath addLineToPoint:CGPointMake(self.frame.size.width - kTriangleWidth - 3.0f, (self.frame.size.height / 2) + kTriangleHeight / 2)];
[trianglePath addLineToPoint:CGPointMake(self.frame.size.width - 3.0f, self.frame.size.height / 2)];
[trianglePath closePath];
[[UIColor blueColor] set];
[trianglePath fill];