UIButton的用處特別多,這裡只記錄下把按鈕應用在圖文顯示的場景,和需要把圖片作為按鈕的背景圖片顯示場景; 另外記錄下在父控制項的子控制項優先顯示方法(控制項置於最前面和置於最後面)。 先上效果圖: 1、當在某個地方既需要顯示圖片,還需要顯示文字,另外還要有點擊功能的時候,這時按鈕是個很好的選擇。 按 ...
UIButton的用處特別多,這裡只記錄下把按鈕應用在圖文顯示的場景,和需要把圖片作為按鈕的背景圖片顯示場景;
另外記錄下在父控制項的子控制項優先顯示方法(控制項置於最前面和置於最後面)。
先上效果圖:
1、當在某個地方既需要顯示圖片,還需要顯示文字,另外還要有點擊功能的時候,這時按鈕是個很好的選擇。
按鈕中的圖片和文字的距離可以自由調整,圖片的也可以上下左右翻轉。日常項目中像這些場景都是很容易碰到的。
按鈕圖文設置、圖文位置移動、按鈕中圖片翻轉示例代碼:
/** 測試圖文並茂的按鈕,圖文移動 */ - (void)addMoveImgAndTextButton{ //1、創建一個按鈕:30x50 UIButton *iconBtn = [[UIButton alloc] initWithFrame:CGRectMake(10, 100, 150, 80)]; [iconBtn setTitle:@"我的好友" forState:UIControlStateNormal]; [iconBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [iconBtn setImage:[UIImage imageNamed:@"pointer"] forState:UIControlStateNormal]; iconBtn.layer.borderColor = [UIColor redColor].CGColor; //邊框顏色 iconBtn.layer.borderWidth = 1; //邊框寬度 iconBtn.titleLabel.backgroundColor = [UIColor greenColor]; //文字顏色 iconBtn.imageView.backgroundColor = [UIColor blackColor]; //圖片顏色 [iconBtn addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:iconBtn]; self.iconBtn = iconBtn; //2、移動iconBtn按鈕圖片和文字 UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(170, 100, 120, 45)]; [btn setTitle:@"圖右移字左移" forState:UIControlStateNormal]; btn.titleLabel.numberOfLines = 0; [btn setBackgroundColor:[UIColor blackColor]]; [btn addTarget:self action:@selector(changeBtnFrame:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:btn]; //3、移動iconBtn按鈕圖片和文字 UIButton *btn2 = [[UIButton alloc] initWithFrame:CGRectMake(170, 150, 120, 45)]; [btn2 setTitle:@"字右移圖左移" forState:UIControlStateNormal]; btn2.titleLabel.numberOfLines = 0; [btn2 setBackgroundColor:[UIColor blackColor]]; [btn2 addTarget:self action:@selector(changeBtnFrame2:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:btn2]; //分割線 UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 210, 500, 1)]; lineView.backgroundColor = [UIColor grayColor]; [self.view addSubview:lineView]; } /** 點擊按鈕使圖片位置翻轉 */ - (void)clickButton:(UIButton *)sender{ sender.imageView.transform = CGAffineTransformRotate(sender.imageView.transform, M_PI); } /** 移動圖片和文字位置 */ - (void)changeBtnFrame:(UIButton *)sender{ UIEdgeInsets edge = self.iconBtn.imageEdgeInsets; CGFloat changeNum = 10; self.iconBtn.imageEdgeInsets = UIEdgeInsetsMake(0, edge.left + changeNum, 0, -(edge.left + changeNum)); self.iconBtn.titleEdgeInsets = UIEdgeInsetsMake(0, -(edge.left + changeNum), 0, edge.left + changeNum); NSLog(@"edge.left: %f, edge.right: %f", edge.left, edge.right); } /** 反方向移動圖片和文字位置 */ - (void)changeBtnFrame2:(UIButton *)sender{ UIEdgeInsets edge = self.iconBtn.imageEdgeInsets; CGFloat changeNum = 10; self.iconBtn.imageEdgeInsets = UIEdgeInsetsMake(0, edge.left - changeNum, 0, -(edge.left - changeNum)); self.iconBtn.titleEdgeInsets = UIEdgeInsetsMake(0, -(edge.left - changeNum), 0, edge.left - changeNum); NSLog(@"...edge.left: %f, edge.right: %f", edge.left, edge.right); }View Code
2、有時候需要給按鈕設置背景圖片,一般UI給個圖片,然後我們自己對圖片進行處理,讓背景圖片自適應按鈕展示,矩形圓角。
但是有時候,產品要求顯示的按鈕左右必須是圓形的,這時候雖然可以讓ui切個適配的圖片做背景,其實針對如果是背景圖片是純色的話,我們可以利用
控制項的layer.masksToBounds, 和layer.cornerRadius屬性來讓按鈕或者其他控制項左右兩邊都是圓形的。
下麵寫了五個橙色背景的按鈕作比較:背景圖片和按鈕尺寸匹配的、背景圖片和按鈕尺寸或偏大或偏小的、處理背景圖片讓背景圖片自適應按鈕的、不用背景圖片使用圖層來設置按鈕左右圓形的:
/** 測試給按鈕設置背景圖片 */ - (void)addBackgroundImgButton{ //4、96x25 按鈕設置背景圖片,顏色rgb(255,145,0) UIImage *img = [UIImage imageNamed:@"btn_bg"]; UIButton *clickBtn = [[UIButton alloc] initWithFrame:CGRectMake(10, 240, 96, 25)]; [clickBtn setBackgroundImage:img forState:UIControlStateNormal]; [clickBtn setTitle:@"click Me" forState:UIControlStateNormal]; [self.view addSubview:clickBtn]; //4.2 給按鈕設置背景圖片, 按鈕圖片不適配 UIButton *clickBtn2 = [[UIButton alloc] initWithFrame:CGRectMake(120, 220, 120, 50)]; [clickBtn2 setBackgroundImage:img forState:UIControlStateNormal]; [clickBtn2 setTitle:@"click Me" forState:UIControlStateNormal]; [self.view addSubview:clickBtn2]; //4.3 給按鈕設置背景圖片,按鈕和圖片不適配 UIButton *clickBtn3 = [[UIButton alloc] initWithFrame:CGRectMake(260, 240, 80, 15)]; [clickBtn3 setBackgroundImage:img forState:UIControlStateNormal]; [clickBtn3 setTitle:@"click Me" forState:UIControlStateNormal]; [self.view addSubview:clickBtn3]; //4.4 處理背景圖片,讓背景圖片自適應按鈕 NSLog(@"img.size: %@", NSStringFromCGSize(img.size)); UIImage *newImg = [img stretchableImageWithLeftCapWidth:img.size.width/2 topCapHeight:img.size.height/2]; NSLog(@"newImg.size: %@", NSStringFromCGSize(newImg.size)); UIButton *clickBtn4 = [[UIButton alloc] initWithFrame:CGRectMake(10, 300, 150, 60)]; [clickBtn4 setBackgroundImage:newImg forState:UIControlStateNormal]; [clickBtn4 setTitle:@"click Me" forState:UIControlStateNormal]; [self.view addSubview:clickBtn4]; //4.5 按鈕不使用背景圖片,設置背景顏色當做有背景圖片 UIButton *clickBtn5 = [[UIButton alloc] initWithFrame:CGRectMake(180, 300, 150, 60)]; [clickBtn5 setTitle:@"click Me" forState:UIControlStateNormal]; clickBtn5.layer.masksToBounds = YES; clickBtn5.layer.cornerRadius = 30; clickBtn5.backgroundColor = [UIColor colorWithRed:255/255.f green:145/255.f blue:0 alpha:1]; [self.view addSubview:clickBtn5]; //分割線 UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 380, 500, 1)]; lineView.backgroundColor = [UIColor grayColor]; [self.view addSubview:lineView]; }View Code
3、在有些場景下,需要控制控制項的優先顯示或者置後顯示,需要用到方法
- (void)bringSubviewToFront:(UIView *)view; // 將子控制項view顯示在父控制項的所有子控制項的最前面
- (void)sendSubviewToBack:(UIView *)view; //將子控制項view顯示在父控制項的所有子控制項的最後面
示例代碼:
/** 測試子控制項的優先顯示(置前和置後) */ - (void)testSubControlShowFront{ //1、紅色view UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(10, 420, 200, 200)]; redView.backgroundColor = [UIColor redColor]; redView.tag = 11; [self.view addSubview:redView]; //2、黑色view UIView *blackView = [[UIView alloc] initWithFrame:CGRectMake(30, 400, 200, 200)]; blackView.backgroundColor = [UIColor blackColor]; blackView.tag = 12; [self.view addSubview:blackView]; //3、紫色view UIView *purpleView = [[UIView alloc] initWithFrame:CGRectMake(50, 440, 200, 200)]; purpleView.backgroundColor = [UIColor purpleColor]; purpleView.tag = 13; [self.view addSubview:purpleView]; //添加操作按鈕 UIButton *operatorBtn = [[UIButton alloc] initWithFrame:CGRectMake(280, 400, 100, 30)]; [operatorBtn setTitle:@"紅色置前" forState:UIControlStateNormal]; operatorBtn.tag = 1; operatorBtn.backgroundColor = [UIColor blackColor]; [operatorBtn addTarget:self action:@selector(changeViewToFrontShow:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:operatorBtn]; UIButton *operatorBtn2 = [[UIButton alloc] initWithFrame:CGRectMake(280, 450, 100, 30)]; [operatorBtn2 setTitle:@"黑色置前" forState:UIControlStateNormal]; operatorBtn2.tag = 2; operatorBtn2.backgroundColor = [UIColor blackColor]; [operatorBtn2 addTarget:self action:@selector(changeViewToFrontShow:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:operatorBtn2]; UIButton *operatorBtn3 = [[UIButton alloc] initWithFrame:CGRectMake(280, 500, 100, 30)]; [operatorBtn3 setTitle:@"紫色置前" forState:UIControlStateNormal]; operatorBtn3.tag = 3; operatorBtn3.backgroundColor = [UIColor blackColor]; [operatorBtn3 addTarget:self action:@selector(changeViewToFrontShow:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:operatorBtn3]; UIButton *operatorBtn4 = [[UIButton alloc] initWithFrame:CGRectMake(280, 550, 100, 30)]; [operatorBtn4 setTitle:@"紫色置後" forState:UIControlStateNormal]; operatorBtn4.tag = 4; operatorBtn4.backgroundColor = [UIColor redColor]; [operatorBtn4 addTarget:self action:@selector(changeViewToFrontShow:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:operatorBtn4]; } /** 操作按鈕,切換view置前顯示 */ - (void)changeViewToFrontShow:(UIButton *)sender{ if (sender.tag == 1){ //紅色置前 UIView *redView = [self.view viewWithTag:11]; //將子控制項redView在父控制項view的所有子控制項的最前面顯示 [self.view bringSubviewToFront:redView]; } else if (sender.tag == 2){ //黑色置前 UIView *blackView = [self.view viewWithTag:12]; //獲取黑色子控制項 //將子控制項blackView在父控制項view的所有子控制項的最前面顯示 [self.view bringSubviewToFront:blackView]; } else if (sender.tag == 3){ //紫色置前 UIView *purpleView = [self.view viewWithTag:13]; //獲取紫色子控制項 //將子控制項purpleView在父控制項view的所有子控制項的最前面顯示 [self.view bringSubviewToFront:purpleView]; } else if (sender.tag == 4){ //紫色置後 UIView *purpleView = [self.view viewWithTag:13]; //獲取紫色子控制項 //將子控制項purpleView在父控制項view的所有子控制項的最後面顯示 [self.view sendSubviewToBack:purpleView]; } }View Code
------------------------------------------------------------------------------
----- 完整代碼 ------
// // TestButtonVC.m // tan_iosTwo // // Created by PX_Mac on 16/10/16. // // #import "TestButtonVC.h" @interface TestButtonVC () @property (nonatomic, weak) UIButton *iconBtn; //帶文字和圖片的按鈕 @end @implementation TestButtonVC - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [self addMoveImgAndTextButton]; //添加圖文並茂的按鈕,測試按鈕上的圖文移動 [self addBackgroundImgButton]; //添加設置背景圖片的按鈕 [self testSubControlShowFront]; //測試子控制項的優先或置後顯示 } /** 測試圖文並茂的按鈕,圖文移動 */ - (void)addMoveImgAndTextButton{ //1、創建一個按鈕:30x50 UIButton *iconBtn = [[UIButton alloc] initWithFrame:CGRectMake(10, 100, 150, 80)]; [iconBtn setTitle:@"我的好友" forState:UIControlStateNormal]; [iconBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [iconBtn setImage:[UIImage imageNamed:@"pointer"] forState:UIControlStateNormal]; iconBtn.layer.borderColor = [UIColor redColor].CGColor; //邊框顏色 iconBtn.layer.borderWidth = 1; //邊框寬度 iconBtn.titleLabel.backgroundColor = [UIColor greenColor]; //文字顏色 iconBtn.imageView.backgroundColor = [UIColor blackColor]; //圖片顏色 [iconBtn addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:iconBtn]; self.iconBtn = iconBtn; //2、移動iconBtn按鈕圖片和文字 UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(170, 100, 120, 45)]; [btn setTitle:@"圖右移字左移" forState:UIControlStateNormal]; btn.titleLabel.numberOfLines = 0; [btn setBackgroundColor:[UIColor blackColor]]; [btn addTarget:self action:@selector(changeBtnFrame:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:btn]; //3、移動iconBtn按鈕圖片和文字 UIButton *btn2 = [[UIButton alloc] initWithFrame:CGRectMake(170, 150, 120, 45)]; [btn2 setTitle:@"字右移圖左移" forState:UIControlStateNormal]; btn2.titleLabel.numberOfLines = 0; [btn2 setBackgroundColor:[UIColor blackColor]]; [btn2 addTarget:self action:@selector(changeBtnFrame2:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:btn2]; //分割線 UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 210, 500, 1)]; lineView.backgroundColor = [UIColor grayColor]; [self.view addSubview:lineView]; } /** 點擊按鈕使圖片位置翻轉 */ - (void)clickButton:(UIButton *)sender{ sender.imageView.transform = CGAffineTransformRotate(sender.imageView.transform, M_PI); } /** 移動圖片和文字位置 */ - (void)changeBtnFrame:(UIButton *)sender{ UIEdgeInsets edge = self.iconBtn.imageEdgeInsets; CGFloat changeNum = 10; self.iconBtn.imageEdgeInsets = UIEdgeInsetsMake(0, edge.left + changeNum, 0, -(edge.left + changeNum)); self.iconBtn.titleEdgeInsets = UIEdgeInsetsMake(0, -(edge.left + changeNum), 0, edge.left + changeNum); NSLog(@"edge.left: %f, edge.right: %f", edge.left, edge.right); } /** 反方向移動圖片和文字位置 */ - (void)changeBtnFrame2:(UIButton *)sender{ UIEdgeInsets edge = self.iconBtn.imageEdgeInsets; CGFloat changeNum = 10; self.iconBtn.imageEdgeInsets = UIEdgeInsetsMake(0, edge.left - changeNum, 0, -(edge.left - changeNum)); self.iconBtn.titleEdgeInsets = UIEdgeInsetsMake(0, -(edge.left - changeNum), 0, edge.left - changeNum); NSLog(@"...edge.left: %f, edge.right: %f", edge.left, edge.right); } /** 測試給按鈕設置背景圖片 */ - (void)addBackgroundImgButton{ //4、96x25 按鈕設置背景圖片,顏色rgb(255,145,0) UIImage *img = [UIImage imageNamed:@"btn_bg"]; UIButton *clickBtn = [[UIButton alloc] initWithFrame:CGRectMake(10, 240, 96, 25)]; [clickBtn setBackgroundImage:img forState:UIControlStateNormal]; [clickBtn setTitle:@"click Me" forState:UIControlStateNormal]; [self.view addSubview:clickBtn]; //4.2 給按鈕設置背景圖片, 按鈕圖片不適配 UIButton *clickBtn2 = [[UIButton alloc] initWithFrame:CGRectMake(120, 220, 120, 50)]; [clickBtn2 setBackgroundImage:img forState:UIControlStateNormal]; [clickBtn2 setTitle:@"click Me" forState:UIControlStateNormal]; [self.view addSubview:clickBtn2]; //4.3 給按鈕設置背景圖片,按鈕和圖片不適配 UIButton *clickBtn3 = [[UIButton alloc] initWithFrame:CGRectMake(260, 240, 80, 15)]; [clickBtn3 setBackgroundImage:img forState:UIControlStateNormal]; [clickBtn3 setTitle:@"click Me" forState:UIControlStateNormal]; [self.view addSubview:clickBtn3]; //4.4 處理背景圖片,讓背景圖片自適應按鈕 NSLog(@"img.size: %@", NSStringFromCGSize(img.size)); UIImage *newImg = [img stretchableImageWithLeftCapWidth:img.size.width/2 topCapHeight:img.size.height/2]; NSLog(@"newImg.size: %@", NSStringFromCGSize(newImg.size)); UIButton *clickBtn4 = [[UIButton alloc] initWithFrame:CGRectMake(10, 300, 150, 60)]; [clickBtn4 setBackgroundImage:newImg forState:UIControlStateNormal]; [clickBtn4 setTitle:@"click Me" forState:UIControlStateNormal]; [self.view addSubview:clickBtn4]; //4.5 按鈕不使用背景圖片,設置背景顏色當做有背景圖片 UIButton *clickBtn5 = [[UIButton alloc] initWithFrame:CGRectMake(180, 300, 150, 60)]; [clickBtn5 setTitle:@"click Me" forState:UIControlStateNormal]; clickBtn5.layer.masksToBounds = YES; clickBtn5.layer.cornerRadius = 30; clickBtn5.backgroundColor = [UIColor colorWithRed:255/255.f green:145/255.f blue:0 alpha:1]; [self.view addSubview:clickBtn5]; //分割線 UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 380, 500, 1)]; lineView.backgroundColor = [UIColor grayColor]; [self.view addSubview:lineView]; } /** 測試子控制項的優先顯示(置前和置後) */ - (void)testSubControlShowFront{ //1、紅色view UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(10, 420, 200, 200)]; redView.backgroundColor = [UIColor redColor]; redView.tag = 11; [self.view addSubview:redView]; //2、黑色view UIView *blackView = [[UIView alloc] initWithFrame:CGRectMake(30, 400, 200, 200)]; blackView.backgroundColor = [UIColor blackColor]; blackView.tag = 12; [self.view addSubview:blackView]; //3、紫色view UIView *purpleView = [[UIView alloc] initWithFrame:CGRectMake(50, 440, 200, 200)]; purpleView.backgroundColor = [UIColor purpleColor]; purpleView.tag = 13; [self.view addSubview:purpleView]; //添加操作按鈕 UIButton *operatorBtn = [[UIButton alloc] initWithFrame:CGRectMake(280, 400, 100, 30)]; [operatorBtn setTitle:@"紅色置前" forState:UIControlStateNormal]; operatorBtn.tag = 1; operatorBtn.backgroundColor = [UIColor blackColor]; [operatorBtn addTarget:self action:@selector(changeViewToFrontShow:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:operatorBtn]; UIButton *operatorBtn2 = [[UIButton alloc] initWithFrame:CGRectMake(280, 450, 100, 30)]; [operatorBtn2 setTitle:@"黑色置前" forState:UIControlStateNormal]; operatorBtn2.tag = 2; operatorBtn2.backgroundColor = [UIColor blackColor]; [operatorBtn2 addTarget:self action:@selector(changeViewToFrontShow:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:operatorBtn2]; UIButton *operatorBtn3 = [[UIButton alloc] initWithFrame:CGRectMake(280, 500, 100, 30)]; [operatorBtn3 setTitle:@"紫色置前" forState:UIControlStateNormal]; operatorBtn3.tag = 3; operatorBtn3.backgroundColor = [UIColor blackColor]; [operatorBtn3 addTarget:self action:@selector(changeViewToFrontShow:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:operatorBtn3]; UIButton *operatorBtn4 = [[UIButton alloc] initWithFrame:CGRectMake(280, 550, 100, 30)]; [operatorBtn4 setTitle:@"紫色置後" forState:UIControlStateNormal]; operatorBtn4.tag = 4; operatorBtn4.backgroundColor = [UIColor redColor]; [operatorBtn4 addTarget:self action:@selector(changeViewToFrontShow:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:operatorBtn4]; } /** 操作按鈕,切換view置前顯示 */ - (void)changeViewToFrontShow:(UIButton *)sender{ if (sender.tag == 1){ //紅色置前 UIView *redView = [self.view viewWithTag:11]; //將子控制項redView在父控制項view的所有子控制項的最前面顯示 [self.view bringSubviewToFront:redView]; } else if (sender.tag == 2){ //黑色置前 UIView *blackView = [self.view viewWithTag:12]; //獲取黑色子控制項 //將子控制項blackView在父控制項view的所有子控制項的最前面顯示 [self.view bringSubviewToFront:blackView]; } else if (sender.tag == 3){ //紫色置前 UIView *purpleView = [self.view viewWithTag:13]; //獲取紫色子控制項 //將子控制項purpleView在父控制項view的所有子控制項的最前面顯示 [self.view bringSubviewToFront:purpleView]; } else if (sender.tag == 4){ //紫色置後 UIView *purpleView = [self.view viewWithTag:13]; //獲取紫色子控制項 //將子控制項purpleView在父控制項view的所有子控制項的最後面顯示 [self.view sendSubviewToBack:purpleView]; } } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } /* #pragma mark - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { // Get the new view controller using [segue destinationViewController]. // Pass the selected object to the new view controller. } */ @endView Code
原文鏈接:http://www.cnblogs.com/tandaxia/p/5975729.html