CODEWITHSUNDEEP
iosobjective-ciphoneuibutton
user3811123
user3811123

Reputation: 35

I want to make a button with an icon of the triangle

I have wanted to make a button with an icon of the triangle like the iBooks app style. I want make this button (in iBooks app)

When the button is pressed, a list screen is displayed. Then you select a list, statement of the button will be the selected text and an icon of the triangle. The icon is always right side.

[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);

So I tried to make a sample app.

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

However, the position of the icon will deviate absolutely. How will I do to be installed on the right side is always the icon.

Upvotes: 1

Views: 1533

Answers (2)

Jasper
Jasper

Reputation: 7107

You could draw this with a UIBezierPath, put this in your drawRect method of your UIButton subclass

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

Upvotes: 1

Kevin
Kevin

Reputation: 17566

I did this very easily by subclassing UIButton and overriding setTitle:forState: to add a space then a down arrow in unicode. Just set the title and the arrow is automatically added at the right font. It also handles extremely long names as "Extremely l... name ▼"

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

If you want an example or or just a complete subclass that is also a drop down menu I'd suggest this. Disclaimer: I made it.

Upvotes: 7

Related Questions