iOS心得7 按钮的图片和文字自定义位置-蒲公英云

iOS心得7 按钮的图片和文字自定义位置

今天给大家看一下按钮的自定义效果

通常我们的需要效果如果有图有字的话，我们基本上都是使用uibutton这个控件。但是系统自带的效果是左图右字。如果你需要上图下字或者上字下图这种效果就需要自己去写。可能有的猿友没有做过这个。今天给大家一个实例。

Demo地址：https://github.com/sunyunfei/-Demo.git

首先我在故事板视图底部创建两个按钮，这一步操作就不说了，Demo里面很详细。

我自定义了两个按钮的类，让两个按钮分别继承他们。

第一个按钮我想要的效果是上图下字，这一步主要是通过两个方法实现的：

- (CGRect)titleRectForContentRect:(CGRect)contentRect；

- (CGRect)imageRectForContentRect:(CGRect)contentRect；

一个是设置字的大小位置，一个是设置图的大小位置。

- (CGRect)titleRectForContentRect:(CGRect)contentRect

{

CGFloat x = (contentRect.size.width \-(contentRect.size.height \-30))/2;
CGFloat y = -30;
return CGRectMake(x,y,contentRect.size.width,contentRect.size.height);

}

- (CGRect)imageRectForContentRect:(CGRect)contentRect

{

CGFloat x = (contentRect.size.width \-(contentRect.size.height \-30))/2;
CGFloat y = 30;
return CGRectMake(x,y,contentRect.size.height \-30,contentRect.size.height \-30);

}

这是我写的简单的效果。当然你也可以在构造方法中写对图字一些舒心盖的设置：

- (id)initWithFrame:(CGRect)frame

{

self = \[super initWithFrame:frame\];
if (self) \{ 
    //在构造的时候有作用
    self.imageView.contentMode = UIViewContentModeScaleAspectFit;
    self.imageView.layer.cornerRadius = 15;
    self.imageView.layer.masksToBounds = YES;
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
\}
returnself;