UI-UIView的介紹和案例

UIView的常見(jiàn)屬性

  • NSSArray *subviews

    • 所有的子控件
    • 子控件是以數(shù)組形式展現(xiàn)，并且數(shù)組的順序是：越往后的控件，越在上面

  • frame

  • 控件的大小、位置（每一個(gè)控件都有frame屬性）

  • x,y值以父控件的左上角為坐標(biāo)原點(diǎn)的

  • bounds

  • 以自己左上角為坐標(biāo)原點(diǎn)，所以bounds的x,y為0

  • center

  • 以自己中心店角為坐標(biāo)原點(diǎn)

UIView的常見(jiàn)方法

  • addSubview：
    • 添加一個(gè)子控件
  • 可以用下面的方法調(diào)整界面上的順序（view數(shù)組代碼寫(xiě)在越在前面，界面顯示越在下面）
// 將子控件放在siblingSubview 的下面， 也就是界面的siblingSubview控件的上面
- (void) insertSubview:(UIView *) view belowSubview:(UIView *) siblingSubview;  
// 將子控件放在siblingSubview 的上面， 也就是界面的siblingSubview控件的上面
- (void) insertSubview:(UIView *) view aboveSubview:(UIView *) siblingSubview;  

// 將子控件放在代碼（數(shù)組）的最后面，界面上顯示最上面
- (void) bringSubviewToFront:(UIView *)view;
// 將子控件放在代碼（數(shù)組）的最后面，界面上顯示最下面
- (void) bringSubviewToBack:(UIView *)view;

UI控件概覽

IButton 按鈕
UILabel 文本標(biāo)簽
UITextField 文本輸入框
UIImageView 圖片顯示
UIProgressView 進(jìn)度條
UISlider 滑塊
UISwitch 開(kāi)關(guān)
UISegmentControl 選項(xiàng)卡
UIActivityIndicator 圈圈
UIAlertView 對(duì)話框（中間彈框）
UIActionSheet 底部彈框
UIScrollView 滾動(dòng)的控件
UIPageControl 分頁(yè)控件
UITextView 能滾動(dòng)的文字顯示控件
UITableView 表格
UICollectionView 九宮格
UIPickerView 選擇器
UIDatePicker 日期選擇器
UIWebView 網(wǎng)頁(yè)顯示控件
UIToolbar 工具條
UINavigationBar導(dǎo)航條

案例

  • 01界面顯示 ‘添加/刪除’按鈕
  • - (void)viewDidLoad 視圖（view）加載完畢，要在界面顯示的控件。
- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 創(chuàng)建一個(gè)添加按鈕
    [self addButtonWithImage:@"add" higImage:@"add_highlighted" disabledImage:@"add_disable" frame:CGRectMake(20, 20, 50, 50) tag:10 action:@selector(add)];
    
    // 創(chuàng)建一個(gè)刪除按鈕
    [self addButtonWithImage:@"remove" higImage:@"remove_highlighted" disabledImage:@"remove_disable" frame:CGRectMake(300, 20, 50, 50) tag:20 action:@selector(remove)];
    
    
}


// 簡(jiǎn)化創(chuàng)建按鈕的代碼 “抽取代碼”

- (void)addButtonWithImage:(NSString *)image higImage:(NSString *) higImage disabledImage:(NSString *)disabledImage frame:(CGRect)frame tag:(NSInteger)tag action:(SEL)action {
    
    // 創(chuàng)建按鈕并設(shè)置按鈕屬性
    UIButton *btn = [[UIButton alloc]init];
    [btn setBackgroundImage:[UIImage imageNamed:image] forState:UIControlStateNormal];
    [btn setBackgroundImage:[UIImage imageNamed:higImage] forState:UIControlStateHighlighted];
    [btn setBackgroundImage:[UIImage imageNamed:disabledImage] forState:UIControlStateDisabled];
    btn.frame = frame;
    
    // 監(jiān)聽(tīng)按鈕
    [btn addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
    
    // Tag
    btn.tag = tag;
    
    // 顯示在 View 視圖中
    [self.view addSubview:btn];
    

}
  • 02 ‘添加/刪除’按鈕的 方法
/** 添加按鈕 方法*/
- (void)add {
       // 添加一個(gè)modeView 的塊。把圖片和文字控件添加到modeView，這樣就能只算modeView的x，y軸了
    UIView *modeView = [[UIView alloc]init];
    modeView.backgroundColor = [UIColor redColor];
    modeView.frame = CGRectMake(shopsX, shopsY, shopsWitch, shopsHeight);
    
    [self.shopView addSubview:modeView];
    
    // 添加圖片
    UIImageView *iconIamge = [[UIImageView alloc]init];
    iconIamge.image = [UIImage imageNamed:@"danjianbao"];
    iconIamge.frame = CGRectMake(0, 0, shopsWitch, shopsWitch);
    
    [modeView addSubview:iconIamge];
    
    // 添加按鈕
    UILabel *label = [[UILabel alloc]init];
    label.text = @"DanJan";
    label.frame = CGRectMake(0, shopsWitch, shopsWitch, shopsHeight-shopsWitch);
    label.font = [UIFont systemFontOfSize:11];
    label.textAlignment = NSTextAlignmentCenter;
    
    [modeView addSubview:label]; // 顯示到modeVeiw這個(gè)界面
    
    NSLog(@"add---");
}


/** 刪除按鈕 方法*/
- (void)remove {
    NSLog(@"remove---");
}
  • 03 九宮格
/** 添加按鈕 方法*/
- (void)add {
    
//    self.shopView.clipsToBounds = YES; // 超出 shopView 的隱藏
    
    
    /** 九宮格 開(kāi)始 */
    // 設(shè)置顯示列數(shù)
    int cols = 4;
    
    CGFloat shopsWitch = 50; // 商品的寬度
    CGFloat shopsHeight = 70; // 商品的高度：圖片+文字
    
    // 商品間隔的寬度
    CGFloat marginW = (self.shopView.frame.size.width - cols * shopsWitch) / (cols -1);
    // 商品間隔的高度
    CGFloat marginH = 20;
    
    //index索引不能為負(fù)值，所以要用NSUInteger，用int 會(huì)報(bào)錯(cuò)。添加一個(gè)modeView count為0。再添加一個(gè)modeView count為1。
    NSUInteger index = self.shopView.subviews.count; // subviews 是NSArray類(lèi)型
    
    // CGFloat：浮點(diǎn)型； col：當(dāng)前列數(shù)。 col = 索引(index) % 設(shè)置的列數(shù)(cols)
    CGFloat col = index % cols;
    // shopsX：商品的x軸
    CGFloat shopsX = col * (shopsWitch + marginW);
    
    // 行數(shù) row = 索引數(shù)(index) 除以(/) 設(shè)置行數(shù)(cols)
    NSUInteger row = index / cols;
    // shopsY：商品的Y軸
    CGFloat shopsY = row * (shopsHeight + marginH);
  
    /** 九宮格 結(jié)束 */


    
    // 添加一個(gè)modeView 的塊。把圖片和文字控件添加到modeView，這樣就能只算modeView的x，y軸了
    UIView *modeView = [[UIView alloc]init];
    modeView.backgroundColor = [UIColor redColor];
    modeView.frame = CGRectMake(shopsX, shopsY, shopsWitch, shopsHeight);
    
    [self.shopView addSubview:modeView];
    
    // 添加圖片
    UIImageView *iconIamge = [[UIImageView alloc]init];
    iconIamge.image = [UIImage imageNamed:@"danjianbao"];
    iconIamge.frame = CGRectMake(0, 0, shopsWitch, shopsWitch);
    
    [modeView addSubview:iconIamge];
    
    // 添加按鈕
    UILabel *label = [[UILabel alloc]init];
    label.text = @"DanJan";
    label.frame = CGRectMake(0, shopsWitch, shopsWitch, shopsHeight-shopsWitch);
    label.font = [UIFont systemFontOfSize:11];
    label.textAlignment = NSTextAlignmentCenter;
    
    [modeView addSubview:label]; // 顯示到modeVeiw這個(gè)界面
    
    NSLog(@"add---");
}
  • 04 控制‘添加/刪除’按鈕的不可點(diǎn)擊狀態(tài)
  • 添加按鈕屬性
  • self.removeBtn.enabled = NO; 按鈕不可點(diǎn)擊
/** 添加按鈕 */
@property (weak,nonatomic) UIButton *addBtn;

/** 刪除按鈕 */
@property (weak,nonatomic) UIButton *removeBtn;

//    if (self.shopView.subviews.count == self.shops.count) {
//        self.addBtn.enabled = NO;
//    }else{
//        self.addBtn.enabled =YES;
//    }
//    
    self.addBtn.enabled = (self.shopView.subviews.count < self.shops.count);
    
//    if (self.shopView.subviews.count == 0) {
//        self.removeBtn.enabled = NO;
//    }else{
//        self.removeBtn.enabled = YES;
//    }
    self.removeBtn.enabled = (self.shopView.subviews.count > 0);
  • 全部代碼
//
//  ViewController.m
//  02-UIView2
//
//  Created by xcode on 16/1/30.
//  Copyright (c) 2016年 xcode. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

// 彈出框
@property (weak, nonatomic) IBOutlet UILabel *hud;

@property (weak, nonatomic) IBOutlet UIView *shopView;

/** 添加按鈕 */
@property (weak,nonatomic) UIButton *addBtn;

/** 刪除按鈕 */
@property (weak,nonatomic) UIButton *removeBtn;

// 創(chuàng)建商品的數(shù)據(jù)
@property (strong, nonatomic) NSArray *shops;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 創(chuàng)建一個(gè)添加按鈕
    self.addBtn = [self addButtonWithImage:@"add" higImage:@"add_highlighted" disabledImage:@"add_disable" frame:CGRectMake(20, 20, 50, 50) tag:10 action:@selector(add)];
    
    // 創(chuàng)建一個(gè)刪除按鈕
    self.removeBtn = [self addButtonWithImage:@"remove" higImage:@"remove_highlighted" disabledImage:@"remove_disable" frame:CGRectMake(300, 20, 50, 50) tag:20 action:@selector(remove)];
    self.removeBtn.enabled = NO;
    
    // 數(shù)據(jù)
    self.shops = @[
                   @{@"icon" : @"danjianbao", @"imageName" : @"單肩包"},
                   @{@"icon" : @"liantiaobao", @"imageName" : @"鏈條包"},
                   @{@"icon" : @"qianbao", @"imageName" : @"錢(qián)包"},
                   @{@"icon" : @"shoutibao", @"imageName" : @"手提包"},
                   @{@"icon" : @"shuangjianbao", @"imageName" : @"雙肩包"},
                   @{@"icon" : @"xiekuabao", @"imageName" : @"斜跨包"},
                   ];
}


// 簡(jiǎn)化創(chuàng)建按鈕的代碼 “抽取代碼”

- (UIButton *)addButtonWithImage:(NSString *)image higImage:(NSString *) higImage disabledImage:(NSString *)disabledImage frame:(CGRect)frame tag:(NSInteger)tag action:(SEL)action {
    
    // 創(chuàng)建按鈕并設(shè)置按鈕屬性
    UIButton *btn = [[UIButton alloc]init];
    [btn setBackgroundImage:[UIImage imageNamed:image] forState:UIControlStateNormal];
    [btn setBackgroundImage:[UIImage imageNamed:higImage] forState:UIControlStateHighlighted];
    [btn setBackgroundImage:[UIImage imageNamed:disabledImage] forState:UIControlStateDisabled];
    btn.frame = frame;
    
    // 監(jiān)聽(tīng)按鈕
    [btn addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
    
    // Tag
    btn.tag = tag;
    
    // 顯示在 View 視圖中
    [self.view addSubview:btn];
    
    return btn;
    

}




/** 添加按鈕 方法*/
- (void)add {
    
//    self.shopView.clipsToBounds = YES; // 超出 shopView 的隱藏
    
    
    /** 九宮格 開(kāi)始 */
    // 顯示列數(shù)
    int cols = 3;
    
    CGFloat shopsWitch = 80; // 商品的寬度
    CGFloat shopsHeight = 100; // 商品的高度：圖片+文字
    
    // 商品間隔的寬度
    CGFloat marginW = (self.shopView.frame.size.width - cols * shopsWitch) / (cols -1);
    // 商品間隔的高度
    CGFloat marginH = 20;
    
    //index索引不能為負(fù)值，所以要用NSUInteger，用int 會(huì)報(bào)錯(cuò)。添加一個(gè)modeView count為0。再添加一個(gè)modeView count為1。
    NSUInteger index = self.shopView.subviews.count; // subviews 是NSArray類(lèi)型
    
    // CGFloat：浮點(diǎn)型； col：當(dāng)前列數(shù)。 col = 索引(index) % 設(shè)置的列數(shù)(cols)
    CGFloat col = index % cols;
    // shopsX：商品的x軸
    CGFloat shopsX = col * (shopsWitch + marginW);
    
    // 行數(shù) row = 索引數(shù)(index) 除以(/) 設(shè)置行數(shù)(cols)
    NSUInteger row = index / cols;
    // shopsY：商品的Y軸
    CGFloat shopsY = row * (shopsHeight + marginH);
    
    
    /** 九宮格 結(jié)束 */
    
    // 添加一個(gè)modeView 的塊。把圖片和文字控件添加到modeView，這樣就能只算modeView的x，y軸了
    UIView *modeView = [[UIView alloc]init];
    modeView.backgroundColor = [UIColor redColor];
    modeView.frame = CGRectMake(shopsX, shopsY, shopsWitch, shopsHeight);
    
    [self.shopView addSubview:modeView];
    
 
    
    
    NSDictionary *shop = self.shops[index];
    
    // 添加圖片
    UIImageView *iconIamge = [[UIImageView alloc]init];
    iconIamge.image = [UIImage imageNamed:shop[@"icon"]];
    iconIamge.frame = CGRectMake(0, 0, shopsWitch, shopsWitch);
    
    [modeView addSubview:iconIamge];
    
    // 添加按鈕
    UILabel *label = [[UILabel alloc]init];
    label.text = shop[@"imageName"];
    label.frame = CGRectMake(0, shopsWitch, shopsWitch, shopsHeight-shopsWitch);
    label.font = [UIFont systemFontOfSize:11];
    label.textAlignment = NSTextAlignmentCenter;
    
    [modeView addSubview:label]; // 顯示到modeVeiw這個(gè)界面
    
    // 每次添加按鈕都 執(zhí)行 checkState 這個(gè)方法檢查 shopsView 有多少個(gè)
    [self checkState];
    
//        if (self.shopView.subviews.count == self.shops.count) {
//            // 添加滿(mǎn)了
//            self.addBtn.enabled = NO;
//        }
//    
//        self.removeBtn.enabled = YES;
    
    NSLog(@"add---");
}

/** 刪除按鈕 方法*/
- (void)remove {
    
    [[self.shopView.subviews lastObject] removeFromSuperview];
    [self checkState];
    
//    if (self.shopView.subviews.count == 0) {
//        self.removeBtn.enabled = NO;
//    }
//    self.addBtn.enabled = YES;
//    
    NSLog(@"remove---");
}

- (void)checkState {
    
    
//    if (self.shopView.subviews.count == self.shops.count) {
//        self.addBtn.enabled = NO;
//    }else{
//        self.addBtn.enabled =YES;
//    }
//    
    self.addBtn.enabled = (self.shopView.subviews.count < self.shops.count);
    
//    if (self.shopView.subviews.count == 0) {
//        self.removeBtn.enabled = NO;
//    }else{
//        self.removeBtn.enabled = YES;
//    }
    self.removeBtn.enabled = (self.shopView.subviews.count > 0);
    
//    if (self.shopView.subviews.count == self.shops.count) {
//        // 添加滿(mǎn)了
//        self.addBtn.enabled = NO;
//    }
//    
//    self.removeBtn.enabled = YES;
//    
//    
//    
//    if (self.shopView.subviews.count == 0) {
//        self.removeBtn.enabled = NO;
//    }
//    self.addBtn.enabled = YES;
    
    
    if (self.addBtn.enabled == NO) {
        self.hud.alpha = 1.0;
        self.hud.text = @"添加滿(mǎn)了！";
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            self.hud.alpha = 0.0;
        });
        
    }else if (self.removeBtn.enabled == NO) {
        self.hud.alpha = 1.0;
        self.hud.text = @"沒(méi)有了";
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            self.hud.alpha = 0.0;
        });
    }
    
}

@end
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容