UI进阶06——UI综合

自定义UITabBar

• 系统自带的UITabBarControlle，有个内置的UITabBar，给系统的UITabBarButton设置图片，会导致显示不正常。

• 如何自定义UITabBar？

  1. 首先要自定义UITabBarController，新建一个类，继承自UITabBarController。
  2. 新建一个类，继承自UIView，用来做UITabBar，封装内部的按钮。
  3. 重写initWithFrame:方法创建内部的按钮，重写- (void)layoutSubviews方法设置每个按钮的frame。
  4. 在自定义的UITabBarController中创建自定义的UITabBar，添加到默认的UITabBar上面。

• 实现被点击的时候变成“高亮图片”？

  • 当点击按钮的时候把当前的按钮状态改为selected状态。
  • 因UIControlEventTouchUpInside事件在手指按下弹起来的时候触发，而UIControlEventTouchDown事件手指一按下就会触发，因此在定义UITabBar中按钮的事件应使用UIControlEventTouchDown事件。
  • 通过一个属性，记录当前被点击的按钮，当点击下一个按钮的时候，把上一个按钮的状态改回去，这样只有被点击过后的当前按钮为高亮状态。

• 解决按钮按下时，高亮显示问题？

  1. 当长按某个按钮的时候，默认会显示黑色图片。
  2. 如何让长按某个按钮的时候依然显示高亮的图片，只需重写按钮的setHighlighted方法，方法内部什么都不做。

• 实现点击UITabBar按钮，切换控制器？

  1. 设置UITabBarController控制器的selectedIndex属性，即可在UITabBarController中切换控制器。
  2. 在自定义UITabBar中，给按钮绑定tag，通过代理切换控制器。

---

导航栏主题

• 设置导航栏的图片背景和文字样式？
  1. 可以单独设置某个导航控制器的导航栏背景图片和文字属性。
  2. 也可以统一设置，获取所有导航控制器的导航栏的外观代理对象，然后通过外观代理对象统一修改导航栏的外观。

// 单独设置
UINavigationController *navHall = [self loadControllerWithStoryboardName:@"Hall"];
[navHall.navigationBar setBackgroundImage:[UIImage imageNamed:@"NavBar64"] forBarMetrics:UIBarMetricsDefault];

// 统一设置
// 1. 获取导航栏的"外观"代理对象
UINavigationBar *navBarProxy = [UINavigationBar appearance];
// 2. 统一设置背景图片
[navBarProxy setBackgroundImage:[UIImage imageNamed:@"NavBar64"] forBarMetrics:UIBarMetricsDefault];
// 3. 统一设置所有导航栏上的 title 的文字样式
NSDictionary *attrs = @{NSForegroundColorAttributeName : [UIColor whiteColor]};
[navBarProxy setTitleTextAttributes:attrs];

• 设置所有的状态栏文字为白色？

  1. 方式一：通过在控制器中实现- (UIStatusBarStyle)preferredStatusBarStyle;方法来控制状态栏样式，。
  2. 方式二：通过UIApplication统一设置状态栏：
     • 先修改Info.plist文件，增加一项View controller-based status bar appearance = NO。
     • 通过UIApplication对象设置状态栏样式：[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;
     • 注意：如果勾选了Hide Status Bar，那么当设置了上面的白色状态栏后，就看不到状态栏了。在代理方法的程序启动完毕的方法中执行：application.statusBarHidden = NO;。

• 设置导航栏的UINavigationItem？

  1. 方式一：直接放一个UIBarButtonItem，但是采用这种方式设置完图片后，图片模式是渲染成了蓝色，需要手动修改图片的渲染模式。
  2. 方式二：直接放一个UIButton，然后设置UIButton的Image图片属性，不要设置背景图片(背景图片不会自动根据图片调整按钮大小)，设置按钮高亮不调整图片Highlighted Adjusts Image。

• 交换按钮中图片和文字的位置？

  1. 按钮中默认图片在左边，文字在右边。
  2. 可以通过重写-(void)layoutSubviews;方法，手动交换文字图片的位置。

// 无论是通过什么文件创建的控件，都会执行这个方法
- (id)initWithCoder:(NSCoder *)aDecoder;
// 只要是通过xib或者storyboard创建的控件，都会执行这个方法
- (void)awakeFromNib;

---

UICollectionViewController

• UICollectionViewController的使用？
  1. 在控制器的viewDidLoad方法中注册cell。
  2. 实现UICollectionViewDataSource协议中的数据源方法。
  3. 从缓存池中取出cell。
  4. 重写init方法，指定UICollectionView的布局参数。

// 注册cell(告诉collectionView将来创建怎样的cell)
[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"product"];
// 从缓存池中取出cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"product" forIndexPath:indexPath];
    return cell;
}
// 重写init方法，创建布局参数
- (id)init
{
    // 1.流水布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    // 2.每个cell的尺寸
    layout.itemSize = CGSizeMake(100, 100);
    return [super initWithCollectionViewLayout:layout];
}

• UICollectionViewFlowLayout？
  1. UICollectionViewFlowLayout称为“流水布局”，用来约束cell的显示。
  2. UICollectionViewFlowLayout继承自UICollectionViewLayout。

// cell的尺寸
@property (nonatomic) CGSize itemSize;
// cell之间的水平间距
@property (nonatomic) CGFloat minimumInteritemSpacing;
// cell之间的垂直间距
@property (nonatomic) CGFloat minimumLineSpacing;
// 四周的内边距
@property (nonatomic) UIEdgeInsets sectionInset;

---

UIWebView

• 加载本地网页？

// 创建URL
NSURL *url = [[NSBundle mainBundle] URLForResource:@"abc.html" withExtension:nil];
// 创建请求
NSURLRequest *request = [NSURLRequest requestWithURL:url];  
// 发送请求加载网页
[webView loadRequest:request];

• 让webView执行一段Javascript？

[webView stringByEvaluatingJavaScriptFromString:js];

• 监听webView的加载？
  1. 设置代理，遵守UIWebViewDelegate协议。
  2. 实现相应的代理方法。

// webView已经开始加载完毕
- (void)webViewDidStartLoad:(UIWebView *)webView;
// webView已经加载完毕
- (void)webViewDidFinishLoad:(UIWebView *)webView;

---

补充

• initialize、load方法的区别？
  1. initialize和load方法都是类方法。
  2. 当一个类被装载进内存时，就会调用一次load方法(当时这个类还不可用)。
  3. 当第一次使用某个类时，就会调用一次initialize方法。

---