UI基础 - 训练营：XIB - 低头捡石頭

UI基础 - 训练营：XIB

熟悉 XIB 的使用

1 - 首先删除故事面板，然后在 AppDelegate.m 中配置根视图 UITabBarController 使其管理三个 ViewController。在新建三个 ViewController 时使用 XIB 搭建，区分手动、自动

2 - 代码示例

① AppDelegate.m 文件如下

 1 #import "AppDelegate.h"
 2 #import "SecondViewController.h"
 3 #import "ThirdViewController.h"
 4 #import "FourhViewController.h"
 5 @implementation AppDelegate
 6 
 7 
 8 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 9     
10     // 窗口
11     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
12     self.window.backgroundColor = [UIColor whiteColor];
13     [self.window makeKeyAndVisible];
14     
15     // 手动创建 XIB
16     SecondViewController *secondVC = [[SecondViewController alloc] initWithNibName:@"SecondVC" bundle:nil];
17     secondVC.title = @"2";
18     
19     // 自动创建 XIB
20     ThirdViewController *thirdVC = [[ThirdViewController alloc] init];
21     thirdVC.title = @"3";
22     
23     // 自动创建 XIB
24     FourhViewController *fourthVC =[[FourhViewController alloc] init];
25     fourthVC.title = @"4";
26     
27     // 根视图
28     UITabBarController * tabBC = [[UITabBarController alloc] init];
29     tabBC.viewControllers = @[secondVC,thirdVC,fourthVC];
30     self.window.rootViewController = tabBC;
31     
32     return YES;
33 }

② 第二页面：使用 Slider 控制视图颜色变换

// - SecondViewController.h

 1 #import <UIKit/UIKit.h>
 2 @interface SecondViewController : UIViewController
 3 
 4 @property (weak, nonatomic) IBOutlet UIView *aView;
 5 @property (weak, nonatomic) IBOutlet UISlider *redSlider;
 6 @property (weak, nonatomic) IBOutlet UISlider *blueSlider;
 7 @property (weak, nonatomic) IBOutlet UISlider *greenSlider;
 8 
 9 // 三个 slider 共联一个方法
10 -(IBAction)change:(id)sender;
11 
12 @end

// - SecondViewController.m

 1 #import "SecondViewController.h"
 2 @implementation SecondViewController
 3 
 4 - (void)viewDidLoad {
 5     [super viewDidLoad];
 6     // Do any additional setup after loading the view.
 7 }
 8 
 9 
10 // 改变背景颜色
11 -(IBAction)change:(id)sender{
12     
13     _aView.backgroundColor = [UIColor colorWithRed:_redSlider.value green:_greenSlider.value blue:_blueSlider.value alpha:1.0];
14 }
15 @end

// - SecondVC.xib

③ 第三页面：在 XIB 中定制 Cell

// - ThirdViewController.h

1 #import <UIKit/UIKit.h>
2 @interface ThirdViewController : UIViewController
3 @property (weak, nonatomic) IBOutlet UITableView *tableView;
4 
5 @end

// - ThirdViewController.m

 1 #import "ThirdViewController.h"
 2 #import "CustomCell.h"
 3 @implementation ThirdViewController
 4 
 5 - (void)viewDidLoad {
 6     [super viewDidLoad];
 7   
 8     // 在 XIB 中可以清楚看到已经指定了代理，代码中不再需要设置
 9     // 直接唤醒 nib 文件，从 nib 文件中加载 cell
10     [self.tableView registerNib:[UINib nibWithNibName:@"CustomCell" bundle:nil] forCellReuseIdentifier:@"testCell"];
11 }
12 
13 
14 #pragma mark - <UITableViewDataSource>
15 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
16     return 8;
17 }
18 
19 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
20     return 1;
21 }
22 
23 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
24     
25     CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:@"testCell" forIndexPath:indexPath];
26     cell.contentLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
27     return cell;
28 }
29 
30 @end

// - ThirdViewController.xib

// - CustomCell.h

1 #import <UIKit/UIKit.h>
2 
3 @interface CustomCell : UITableViewCell
4 @property (weak, nonatomic) IBOutlet UILabel *contentLabel;// 属性
5 
6 @end

// - CustomCell.m：在 XIB 中定制 Cell 后我们就不再需要配置任何代码

 1 #import "CustomCell.h"
 2 
 3 @implementation CustomCell
 4 
 5 - (void)awakeFromNib {
 6     [super awakeFromNib];
 7 }
 8 
 9 - (void)setSelected:(BOOL)selected animated:(BOOL)animated {
10     [super setSelected:selected animated:animated];
11 
12     // Configure the view for the selected state
13 }
14 
15 @end

// - CustomCell.xib

④ 第四页面：在 XIB 中定制 View

// - FourhViewController.m

 1 #import "FourhViewController.h"
 2 #import "LTView.h"
 3 @implementation FourhViewController
 4 
 5 - (void)viewDidLoad {
 6     [super viewDidLoad];
 7     
 8     NSLog(@"%@",[[UINib nibWithNibName:@"LTView" bundle:nil] instantiateWithOwner:self options:nil]);
 9     // 输出：
10     // ("<LTView: 0x7fac1fd1ed20;frame = (0 0; 349 116); autoresize = LM+RM+TM+BM;layer = <CALayer: 0x600000236480>>")
11     
12     // 获取 LTView 实例对象
13     LTView *ltView = [[[UINib nibWithNibName:@"LTView" bundle:nil] instantiateWithOwner:self options:nil] firstObject];
14     ltView.layer.cornerRadius = 10;
15     ltView.frame = CGRectMake(60, 80, 320, 140);
16     [self.view addSubview:ltView];
17 }
18 
19 
20 @end

// - LTView.h

1 #import <UIKit/UIKit.h>
2 
3 @interface LTView : UIView
4 @property (weak, nonatomic) IBOutlet UILabel *titleLabel;
5 @property (weak, nonatomic) IBOutlet UITextField *textField;
6 
7 @end

// - LTView.m

 1 #import "LTView.h"
 2 @implementation LTView
 3 
 4 -(instancetype)initWithFrame:(CGRect)frame{
 5     self = [super initWithFrame:frame];
 6     if (self) {
 7         NSLog(@"---- initWithFrame ----");
 8     }
 9     
10     return self;
11 }
12 
13 // 从 nib 加载的时候，不会调用 initwithframe 而是执行 awakeFromNib
14 -(void)awakeFromNib{
15     [super awakeFromNib];
16      NSLog(@"==== awakeFromNib ====");
17     self.textField.text = @"awakeFromNib";
18 }
19 
20 @end