Xcode - XIB训练营

准备工作

1 - 删除故事面板，并在 AppDelegate.m 中配置根视图 UITabBarController 并管理三个 ViewControllers

2 - 三个 ViewControllers 的新建使用 XIB 搭建（区分手动、自动）

3 - 在每个 ViewController 中熟练 XIB 的使用

代码实现

1 - 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 }

2 - 实现步骤

① 第二页面

// - SecondViewController.h

 1 #import 
 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

② 第三页面

// - ThirdViewController.h

1 #import 
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 
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

③ 第四页面

// - 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     // (">")
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 
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

// - LTView.xib：拖进两个 label

运行效果：第二页 | 第三页 | 第四页