设置UIButton的titleEdgetInsets 和imageEdgetInsets属性

在UIButton中有label和imageView两个控件,只有我们设置好了他们与按钮本省之间的间距,那么UIButton就能够显示出我们希望的效果。

typedefstruct UIEdgeInsets {

    CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'

} UIEdgeInsets;     //UIEdgeInsets是一个结构体,结构体中的成员代表的是距离上边界,左边界,下边界,右边界之间的距离


如果我们需要实现一种这样的效果,应该如何设置titleEdgetInsets和imageEdgetInsets的值呢?

在UIButton中默认的是image在前label在后,而且两者之间没有任何的间隙,titleEdgeInsets和imageEdgeInsets默认为0; 在我们设置EdgeInsets的值时,我们应该考虑的是把label和imageView当作一个整体来考虑。


如上图的要求:label离按钮的左边为34,imageView离按钮的右边为34

代码:

#define BUTTON_WIDTH   self.view.frame.size.width

#define BUTTON_HEIGHT 44

#define IMAGE_WIDTH   8

#define GAP 17


//创建一个Button

-(UIButton *) createDetailButton:(CGRect )rect  title :(NSString *)title image:(UIImage *)image titleColor:(UIColor *)color selectedColor:(UIColor *)selectedColor titleFont:(UIFont *)font titleEdgeInset:(UIEdgeInsets) titleEdge imageEdgeInset:(UIEdgeInsets)imageEdge withTag:(int) tag

{

   UIButton *button = [[UIButtonalloc]initWithFrame:rect];

    

    [button setTitle:titleforState:UIControlStateNormal];

    [button setTitleColor:colorforState:UIControlStateNormal];

    [button.titleLabelsetFont:font];

    [button setImage:imageforState:UIControlStateNormal];

    button.imageEdgeInsets = imageEdge;

    button.titleEdgeInsets = titleEdge;

    [button setBackgroundImage:[UIImageimageWithColor:selectedColor]forState:UIControlStateHighlighted];

    [button addTarget:selfaction:@selector(detailButtonClicked:)forControlEvents:UIControlEventTouchUpInside];

    button.tag = tag;

   return button;

}


//前提:上图中Button中的image的长为8,高为16

-(void) buttonWithTitleAndImage

{

    

  CGSize size = [@"入账明细"sizeWithFont:SEVENTEENFONT];    //得到label的长和宽

    UIButton *ruzhangButton = [selfcreateDetailButton:CGRectMake(0,0.5,self.view.frame.size.width,44)title:@"入账明细"image:[UIImage imageNamed:(@"icon_arrow")] titleColor:[UIColor colorWithRed:0 green:0 blue 0 alpha:1.0] selectedColor:[UIColor colorWithRed:217 green:217 blue 217 alpha:1.0]titleFont:[UIFont SystemFontOfSize:17.0] titleEdgeInset:UIEdgeInsetsZeroimageEdgeInset:UIEdgeInsetsZerowithTag:1992];


   UIEdgeInsets titleEdgeInset =UIEdgeInsetsMake((BUTTON_HEIGHT - size.height)/2 ,GAP -IMAGE_WIDTH , (BUTTON_HEIGHT - size.height)/2,BUTTON_WIDTH -GAP - size.width);

   //titleEdgeInsets的top值为button的高度减去label的高度 然后除以2 ,bottom的值也是一样的,接着看left 和 right的值,(再次强调一句设置间距的时候一定要把label和image当作一个整体来考虑,images在前,label在后,而且两者之间没有间隙)


//图中黑色的是我们假象存在的,在设置titleEdgeInsets时,我们可以假设在Label的前面还有一个image,我们就可以得出label距离按钮右边的距离为:BUTTON_WIETH - GAP - size.width,label距离按钮左边的距离为GAP - IMAGE_WIDTH,这样理解我们就可以很快的写出以上那句设置tilteEdgeInsets的代码。


    

     UIEdgeInsets imageEdgeInset = UIEdgeInsetsMake(15.5,BUTTON_WIDTH -GAP - IMAGE_WIDTH,15.5,GAP - size.width);


      //设置imageEdgeInsets的时候也是把image和label当作一个整体,如图中黑色的label所示,imageView的左边和button的左边的距离为:button的宽度减去imageView的宽度, 再减去间隙(即:BUTTON_WIDTH - IMAGE_WIDTH - GAP), imageView的右边与label右边的距离为:间隙 减去 label的宽度(即:GAP - size.width),以此可以得出imageEdgeInsets的值。

    

    ruzhangButton.titleEdgeInsets = titleEdgeInset;

    

    ruzhangButton.imageEdgeInsets = imageEdgeInset;


}







已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页