UIButton的imageEdgeInsets和titleEdgeInsets屬性 —— HERO部落格

UIButton内可以設定兩個控件，imageView和titleLabel，也就是可以生成一個帶有文字和圖檔（非背景圖檔）的按鈕。預設情況下圖檔居左，文字居右，他們倆個作為一個整體可以通過UIButton的contentHorizontalAlignment屬性設定居左、居右或居中顯示（預設居中，如圖2-1）。

今天主要講解UIButton的imageEdgeInsets和titleEdgeInsets屬性的使用。以圖2-1為例，通過設定這兩個屬性達到圖檔文字整體居中，圖檔居上，文字居下的效果。

           button.imageEdgeInsets = UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>);

           button.titleEdgeInsets = UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>);

可以看到這4個參數依次為上、左、下、右。預設都為零，我們可以了解為要移動的偏移量，注意上下和左右是分别對應的，可以設定負值（例如第一個參數上，填正數代表向下移動）。思考分析一下這4個參數應該如何計算，如圖2-2。

這裡面用到一個方法CGRectGetMidY(<#CGRect rect#>) ；表示得到一個中心點的Y坐标。

如圖2-2，以image上移為例，image上下位移量 = 整個btn高度的一半 - image高度的一半 - 間距。這個結果是正值，表示距離下端位移量增大的距離，是以應該填在第三個參數上，取負值表示向上位移的距離，填在第一個參數上。其他以此類推。

廢話結束，上代碼：

  for (int i = 0 ; i < array.count; i++) {

        UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake((btnW + 1) * i, 0, btnW, btnW)];

        [btn setTitle:array[i] forState:UIControlStateNormal];

        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

        btn.titleLabel.font = [UIFont systemFontOfSize:10.0f];

        [btn setImage:[UIImage imageNamed:imageArray[i]] forState:UIControlStateNormal];

        //調整按鈕上imageView與titlelabel位置

        CGFloat imageUpHeight = CGRectGetMidY(btn.bounds) - CGRectGetMidY(btn.imageView.bounds) - 10;

        CGFloat imageLeftWidth = CGRectGetMidX(btn.bounds) - CGRectGetMidX(btn.imageView.frame);

        CGFloat titleUpHeight = CGRectGetMidY(btn.bounds) - CGRectGetMidY(btn.titleLabel.bounds) - 10;

        CGFloat titleLeftWidth = CGRectGetMidX(btn.bounds) - CGRectGetMidX(btn.titleLabel.frame);

        btn.imageEdgeInsets = UIEdgeInsetsMake(- imageUpHeight, imageLeftWidth, imageUpHeight,  -imageLeftWidth);

        btn.titleEdgeInsets = UIEdgeInsetsMake(titleUpHeight, titleLeftWidth, - titleUpHeight, - titleLeftWidth);    }

運作後得到預想結果，如圖2-3。

再舉個例子，思考一下如果要讓文字居左，圖檔居右應如何操作。

這個要比上面的簡單很多，因為不需要考慮上下位移，隻要左右移動即可。因為image和title的長度之和是不變的，是以隻需要将image右移文字長度，title左移圖檔寬度即可。代碼如下：

        CGSize titleSize = [array[i] sizeWithFont:btn.titleLabel.font];

        CGFloat imageLeftWidth = titleSize.width;

        CGFloat titleLeftWidth = CGRectGetWidth(btn.imageView.bounds);

        btn.imageEdgeInsets = UIEdgeInsetsMake(0, imageLeftWidth, 0, - imageLeftWidth);

        btn.titleEdgeInsets = UIEdgeInsetsMake(0, - titleLeftWidth, 0, titleLeftWidth);

運作得到預想結果，如圖2-4。

寫部落格是希望大家共同交流成長，部落客水準有限難免有偏頗不足之處，歡迎批評指正。