button上的image和title的顯示

原創

2020-02-20 17:58

一、image和title居中顯示

我需要創建兩行三列的按鈕，最開始用UIcolletionVIew創建的，在cell上添加button和label的方式創建出來，但是UICollectionView創建的按鈕沒法自然的實現點擊改變按鈕圖片，（因爲每個按鈕點擊變換不同的圖片）所以只能用for循環創建button的方法來創建。

- (void)creatShareBtnWithNormalImg:(NSArray *)normalImg withNormalImg:(NSArray *)selectImg withNormalImg:(NSArray *)titleArray{
    for (int i =0; i < [titleArray count]; i++) {
        CGFloat shareBtnW = SCREENSIZE.width / [titleArray count];
        CGFloat shareBtnH = _shareView.frame.size.height;
        UIButton *shareBtn = [UIButtonbuttonWithType:UIButtonTypeCustom];
        shareBtn.frame = CGRectMake(shareBtnW * i , 0, shareBtnW, shareBtnH);
        [shareBtn setImage:[UIImageimageNamed:normalImg[i]] forState:UIControlStateNormal];
        [shareBtn setImage:[UIImageimageNamed:selectImg[i]] forState:UIControlStateSelected];
        [shareBtn setTitle:titleArray[i] forState:UIControlStateNormal];
        [shareBtn setTitleColor:[ToolsgetColor:@"666666"]forState:UIControlStateNormal];
        shareBtn.titleLabel.textAlignment =NSTextAlignmentCenter;
        shareBtn.titleLabel.font = [UIFontsystemFontOfSize:14];
        shareBtn.imageView.contentMode =UIViewContentModeScaleAspectFit;
        shareBtn.tag = 100 * (i+1);
        [shareBtn addTarget:selfaction:@selector(shareTo:)forControlEvents:UIControlEventTouchUpInside];
        [_shareView addSubview:shareBtn];
        
        
       // button上的image和title居中對齊
        CGPoint buttonBoundsCenter = CGPointMake(CGRectGetMidX(shareBtn.bounds),CGRectGetMidY(shareBtn.bounds));
        // 找出imageView最終的center
        CGPoint endImageViewCenter = CGPointMake(buttonBoundsCenter.x, CGRectGetMidY(shareBtn.imageView.bounds));
        // 找出titleLabel最終的center
        CGPoint endTitleLabelCenter = CGPointMake(buttonBoundsCenter.x, CGRectGetHeight(shareBtn.bounds)- CGRectGetMidY(shareBtn.titleLabel.bounds));
        // 取得imageView最初的center
        CGPoint startImageViewCenter = shareBtn.imageView.center;
        // 取得titleLabel最初的center
        CGPoint startTitleLabelCenter = shareBtn.titleLabel.center;
        // 設置imageEdgeInsets
        CGFloat imageEdgeInsetsTop = endImageViewCenter.y - startImageViewCenter.y;
        CGFloat imageEdgeInsetsLeft = endImageViewCenter.x - startImageViewCenter.x;
        CGFloat imageEdgeInsetsBottom = -imageEdgeInsetsTop;
        CGFloat imageEdgeInsetsRight = -imageEdgeInsetsLeft;
        shareBtn.imageEdgeInsets = UIEdgeInsetsMake(imageEdgeInsetsTop , imageEdgeInsetsLeft, imageEdgeInsetsBottom, imageEdgeInsetsRight);
        // 設置titleEdgeInsets
        CGFloat titleEdgeInsetsTop = endTitleLabelCenter.y-startTitleLabelCenter.y;
        CGFloat titleEdgeInsetsLeft = endTitleLabelCenter.x - startTitleLabelCenter.x;
        CGFloat titleEdgeInsetsBottom = -titleEdgeInsetsTop ;
        CGFloat titleEdgeInsetsRight = -titleEdgeInsetsLeft;
        shareBtn.titleEdgeInsets = UIEdgeInsetsMake(titleEdgeInsetsTop, titleEdgeInsetsLeft, titleEdgeInsetsBottom, titleEdgeInsetsRight);
    }
}

當然，最後結果還是有點不盡人意的，所以只能自己在微調一下。

二、image和title一左一右顯示

①. image在左，title在右，這種是正常情況下設置button的image和title的顯示，這裏不細說了。

②. image在右，title在左，這種只需要設置一下button的

imageEdgeInsets 和titleEdgeInsets 屬性就可以了。

    CGFloat labelWidth = _bView1Btn.titleLabel.bounds.size.width;
    CGFloat imageWith = _bView1Btn.imageView.frame.size.width;
    _bView1Btn.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth, 0, 0);
    _bView1Btn.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWith, 0, imageWith);

最開始是這樣設置的，但是我發現圖片沒有改變位置，最終找到了原因，改成這樣就好了。

    [_bView1Btn setTitleEdgeInsets:UIEdgeInsetsMake(0, -imageWith, 0, imageWith)];
    [_bView1Btn setImageEdgeInsets:UIEdgeInsetsMake(0, _bView1Btn.titleLabel.bounds.size.width, 0, 0)];