記錄下UIButton的圖文妙用和子控件的優先顯示

  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);
}

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];
}

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];
    }
}

------------------------------------------------------------------------------

-----  完整代碼  ------

//
//  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.
}
*/

@end

作者:xmTan 出處:http://www.cnblogs.com/tandaxia/ 歡迎轉載,但要在文章頁面明顯位置給出原文鏈接,否則保留追究法律責任的權利。 歡迎指出博客中的錯誤。以免更多的人被誤導。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章