設置 UILabel 和 UITextField 的 Padding 或 Insets (理解UIEdgeInsets)

轉自http://unmi.cc/uilable-uitextfield-padding-insets 主要是理解下UIEdgeInsets在IOS UI裏的意義.
靠，這貨其實就是間隔，起個名字這麼讓人費解！！！正值表示間隔值，負值表示超出參照物的距離。
--------------------------------------------------------分割線，下面是轉載原文---------------------------------------------------

iOS 的控件，只看到 UIButton 能夠設置 Padding/Insets，即按鈕上文字或圖片與按鈕邊界的間隙，對與 CSS 來講叫作 Padding，在 iOS 中叫作 Insets，UIButton 設置 Insets 相應的屬性以下：

Configuring Edge Insets

      contentEdgeInsets  property
      titleEdgeInsets  property
      imageEdgeInsets  property 

它們接受的屬性類型是：UIEdgeInsets，由函數 UIEdgeInsetsMake ( CGFloat top, CGFloat left, CGFloat bottom, CGFloat right );     構造出，分別表示其中的內容/標題/圖片離各邊的距離。

在 xib 中也有界面來對按鈕的這三個 EdgeInsets 屬性的設置，分別是按鈕的 Edge 和 Inset 屬性。

印像中，Swing 的許多組件均可設置 Insets 屬性，可對於 iOS 的控件就沒那麼幸運了，好比我想設置 UILable 或 UITextField 中的文本離邊界的間隙，無倫是在 xib 裏仍是直接代碼的方式都無能爲力，由於它們根據未開放相應的屬性讓你去控制。

辦法固然仍是有的，自定義相應本身的控件了，好比 InsetsLabel 或是  InsetsTextField，接着就是覆蓋某些個方法來達成。

首先來看 UILabel 的子類 InsetsLabel 的實現代碼：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

//1.header file #import <UIKit/UIKit.h>   @interface  InsetsLabel : UILabel @property ( nonatomic ) UIEdgeInsets  insets; -( id ) initWithFrame:(CGRect)frame andInsets: ( UIEdgeInsets ) insets; -( id ) initWithInsets: ( UIEdgeInsets ) insets; @end   //2. implementation file #import "InsetsLabel.h"   @implementation  InsetsLabel @synthesize  insets=_insets; -( id ) initWithFrame:(CGRect)frame andInsets:( UIEdgeInsets )insets {      self  = [ super  initWithFrame:frame];      if ( self ){          self .insets = insets;      }      return  self ; }   -( id ) initWithInsets:( UIEdgeInsets )insets {      self  = [ super  init];      if ( self ){          self .insets = insets;      }      return  self ; }   -( void ) drawTextInRect:(CGRect)rect {      return  [ super  drawTextInRect: UIEdgeInsetsInsetRect (rect, self .insets)]; }

關鍵就是覆蓋了 -(void) drawTextInRect: (CGRect) rect; 方法，在畫  Label 的文本時分別設置文本與  Label 四個邊的間隙，即畫在 Label 內的一個小矩形內，這個例子提供了便利的構造函數，提供本身的 UIEdgeInsets 屬性。另外，函數 UIEdgeInsetsInsetRect(CGRect, UIEdgeInsets) 應該是好理解的。

再看如何設置 UITextField 中文本到四邊的間距，這裏也能夠定義本身的 InsetsTextField：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

// //  Created by Unmi on 11/2/11. //  Copyright (c) 2011 http://unmi.cc. All rights reserved. //   #import <UIKit/UIKit.h>   @interface  InsetsTextField : UITextField @end   @implementation  InsetsTextField //控制 placeHolder 的位置，左右縮 20 - (CGRect)textRectForBounds:(CGRect)bounds {      return  CGRectInset( bounds , 20 , 0 ); }   // 控制文本的位置，左右縮 20 - (CGRect)editingRectForBounds:(CGRect)bounds {      return  CGRectInset( bounds , 20 , 0 ); } @end   //----------------------------------------------------------------- //下面是使用 InsetsTextField 的代碼，可放在 viewDidLoad 等代理方法中 InsetsTextField *insetTextField = [[InsetsTextField alloc]                                    initWithFrame:CGRectMake(10, 10, 180, 25)];   //須手動設置它的 borderStyle, 否則看不到邊框的 insetsTextField.borderStyle = UITextBorderStyleRoundedRect ; [ self .view addSubview:insetsTextField]; [insetsTextField release];

效果以下：

上面更像是借鑑的 InsetsLabel 的實現，其實對於 UITextField 還有更好的實現辦法，並且更簡單，由於 UITextFiled 原來就支持的作法。好比它可讓你作出在文本框最前方固定一個 $ 符號，表示這個文本框是輸入錢的，第一個$ 是不能被刪除的。確實，你能夠在 TextField 上貼個 Label，而後文本框的光標後移，稍顯麻煩了。

而 UITextField 能夠直接設置 leftView 或 rightView, 而後文本輸入區域就在 leftView 和 rightView 之間了，看例子：

1 2 3 4 5 6

UILabel  *paddingView = [[ UILabel  alloc] initWithFrame:CGRectMake(0, 0, 10, 25)]; paddingView.text = @ "$" ; paddingView.textColor = [ UIColor  darkGrayColor]; paddingView.backgroundColor = [ UIColor  clearColor]; textfield.leftView = paddingView; textfield.leftViewMode = UITextFieldViewModeAlways ;

rightView 也是同樣的設置方式，其中的  Mode 有四種，看到名字應該不難理解：

    UITextFieldViewModeNever,
    UITextFieldViewModeWhileEditing,
    UITextFieldViewModeUnlessEditing,
    UITextFieldViewModeAlways

它的效果呢就更酷了：

文本框的起始光標是從上圖數字 1 位置開始的。

實際應用中，對於 UITextField 若是有相似的需求，我會堅決果斷的使用 leftView/rightView 屬性來設置。

參考：1. http://stackoverflow.com/questions/2694411/text-inset-for-uitextfield
            2. http://stackoverflow.com/questions/5674655/uitextfield-align-left-margin

本文連接 http://unmi.cc/uilable-uitextfield-padding-insets, 來自 隔葉黃鶯 Unmi Blog

分類:  IOS

標籤:  UIEdgeInsets