05.项目实战百思不得姐精华基本界面搭建

2016-01-27 本文已影响539人 Liwx

@(iOS 项目实战)[项目实战]

作者: Liwx
邮箱: 1032282633@qq.com

目录

05.项目实战百思不得姐精华基本界面搭建
1.界面分析
- 精华界面结构分析
2.精华界面标题栏
- 标题栏的结构
- 标题栏的实现
- 知识点补充
3.精华界面的scrollView
- 滚动切换界面和选中标题
- UITableView重要属性分析

1.界面分析

精华界面结构分析

1.精华界面结构

精华界面结构: 由一个占据整个屏幕的UIScrollView和一个标题栏UIView组成,UIScrollView内嵌5个UITableView,标题栏UIView加到控制器的view上.

精华界面结构.png

2.精华界面标题栏

标题栏的结构

标题栏UIView内部子控件: 5个标题按钮和1个下划线(UIView)组成.

标题栏的结构.png

标题栏的实现

1.创建一个UIView类型的标题栏,添加到控制器的view,并添加5个按钮到标题栏titleView.

将5个标题按钮平均分布到标题栏titleView.
设置点击选中按钮时,选中按钮的文字为红色

实现方案有三种:
- 直接改颜色(不推荐)
[titleButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
- 切换按钮选中状态.(可以重复点击,本项目使用该方式)
需取消按钮高亮状态,自定义按钮,重写按钮的setHighlight:方法,setHighlight:方法不做任何操作.

  - 如果`不要重复点击,可以用按钮的disable状态`.(不可以重复点击)

监听按钮点击,点击按钮切换按钮的选中状态.(切换中状态三部曲)

    // 切换中状态
    self.selectedButton.selected = NO;
    button.selected = YES;
    self.selectedButton = button;

设置标题栏的背景颜色为白色透明色.(三种方式任选一种)

// 设置背景色为白色透明色
titlesView.backgroundColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.5];
titlesView.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.5];
titlesView.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:0.5];

标题栏实现参考代码

  // ----------------------------------------------------------------------------
  // 设置标题栏
  - (void)setupTitleView
  {
      // 1.创建titleView
      UIView *titleView = [[UIView alloc] init];
      titleView.backgroundColor = [UIColor colorWithWhite:1 alpha:0.7];
      titleView.frame = CGRectMake(0, WXNavMaxY, screenW, WXTitlesViewH);
      [self.view addSubview:titleView];
      self.titleView = titleView;
      
      // 2.添加titleView的按钮
      [self setupTitleViewButtons];
      
      // 3.添加下划线
      [self setupUnderline];
  }
  // ----------------------------------------------------------------------------
  // 添加标题栏按钮
  - (void)setupTitleViewButtons
  {
      // 按钮文字
      NSArray *titles = @[@"全部", @"视频", @"声音", @"图片", @"文字"];
      
      NSInteger count = titles.count;
      CGFloat btnX = 0;
      CGFloat btnY = 0;
      CGFloat btnW = self.titleView.wx_width / count;
      CGFloat btnH = self.titleView.wx_height;
      for (NSInteger i = 0; i < count; i++) {
          
          // 1.创建按钮,并设置属性
          WXTitleButton *button = [WXTitleButton buttonWithType:UIButtonTypeCustom];
          button.tag = i;
          [button setTitle:titles[i] forState:UIControlStateNormal];
          [button addTarget:self action:@selector(titleButtonClick:) forControlEvents:UIControlEventTouchUpInside];
          
          // 2.计算x值
          btnX = i * btnW;
          // 3.设置按钮的frame
          button.frame = CGRectMake(btnX, btnY, btnW, btnH);
          
          // 4.添加到titleView
          [self.titleView addSubview:button];
      }
  }
  
  // ----------------------------------------------------------------------------
  // 添加标题栏的下划线
  - (void)setupUnderline
  {
      // 1.创建下划线view
      UIView *underLineView = [[UIView alloc] init];
      WXTitleButton *firstButton = self.titleView.subviews.firstObject;
      CGFloat underLineH = 2;
      underLineView.frame = CGRectMake(0, self.titleView.wx_height - underLineH, 100, underLineH);
      underLineView.backgroundColor = [firstButton titleColorForState:UIControlStateSelected];
      [self.titleView addSubview:underLineView];
      self.underLineView = underLineView;
      
      // 计算下划线的宽度,直接通过按钮Label的宽度
      [firstButton.titleLabel sizeToFit];
      underLineView.wx_width = firstButton.titleLabel.wx_width;
      underLineView.wx_centerX = firstButton.wx_centerX;
      
      // 设置默认选择
      firstButton.selected = YES;
      self.selectedButton = firstButton;
  }

2.添加底部下划功能实现步骤
- 1.获取titleView中任意一个按钮,如获取第一个按钮.获取按钮的主要目的是为了拿到其按钮内部titleLabel的宽度和选中状态下文字的字体颜色.
- 2.创建高度为2的UIView类型的下划线添加到titleView标题栏,设置下划线的背景颜色为按钮选中状态下的文字颜色.
  通过titleColorForState:方法获取按钮指定状态的文字颜色.
- 3.获取下划线宽度.为实现下划线的宽度和按钮文字长度一致,获取按钮文字宽度有三种方法.
  - 方法一: 先currentTitle方法: 获取当前状态的标题,再使用sizeWithFont:方法(过期): 传入字体计算一段文字的宽度(只能计算一行).
    - 方法二: 先currentTitle方法: 获取当前状态的标题,再使用sizeWithAttributes:方法: 获取按钮文字的宽度.
    - 3.方法三: 通过获取按钮的titleLabel的宽度,titleLabel的宽度就等于按钮文字的宽度(本项目使用该方法)
- 设置下划线宽度为按钮titleLabel的宽度.
  - 注意: 设置下划线的宽度和中心点时,需先设置宽度,再设置中心点.
    在viewDidLoad方法不能获取到控件的真实frame,所以需在设置下划线宽度和中心点前先获取到按钮titleLabel的真实尺寸,使用sizeToFit方法让按钮的titleLabel立即更新为真实尺寸.
- 点击按钮让下划线的中心点x值等于被点击按钮的中心点x(动画改变).
- 设置默认选中第0个按钮
- 下划线功能实现参考代码
```
  // ----------------------------------------------------------------------------
  // 添加标题栏的下划线
  - (void)setupUnderline
  {
      // 1.创建下划线view
      UIView *underLineView = [[UIView alloc] init];
      WXTitleButton *firstButton = self.titleView.subviews.firstObject;
      CGFloat underLineH = 2;
      underLineView.frame = CGRectMake(0, self.titleView.wx_height - underLineH, 100, underLineH);
      underLineView.backgroundColor = [firstButton titleColorForState:UIControlStateSelected];
      [self.titleView addSubview:underLineView];
      self.underLineView = underLineView;
      
      // 计算下划线的宽度,直接通过按钮Label的宽度
      [firstButton.titleLabel sizeToFit];
      underLineView.wx_width = firstButton.titleLabel.wx_width;
      underLineView.wx_centerX = firstButton.wx_centerX;
      
      // 设置默认选择
      firstButton.selected = YES;
      self.selectedButton = firstButton;
      
  }
```

知识点补充

按钮不能点击的两种方法
- enable = NO; 无法点击,并且进入UIControlStateDisable状态.
- userInteractionEnable = NO;按钮不能点击,保持原有的状态.

指定构造方法
- 方法声明后面带有NS_DESIGNATED_INITIALIZER的构造方法.
- 特点: 子类如果重写了指定构造方法,那么久必须用super来调用父类的一个指定构造方法.否则会有警告.重写构造方法时如果是用NS_DESIGNATED_INITIALIZER修饰的构造方法,必须调用super的构造方法,因为系统内部可能会对其做一些处理.
  警告如下图所示:
  
  警告.png
- init方法内部会调用initWithFrame:方法,所以在initWithFrame:调用init方法会死循环
- 如系统UIView的构造方法
```
  // 带有`NS_DESIGNATED_INITIALIZER`的构造方法
  - (instancetype)initWithFrame:(CGRect)frame NS_DESIGNATED_INITIALIZER;
  - (nullable instancetype)initWithCoder:(NSCoder *)aDecoder NS_DESIGNATED_INITIALIZER;
```

KSImageNamed图片提示注意点
- 如果用KSImageNamed图片提示插件,只有标记imageset才是放在Assets.xcassets资源包里面.
  有标记imageset.png
- 注意: 如果是放在第三方类库,比如放在SVProgressHUD.bundle中的这些图片用imageName是获取不到的.
  SVProgressHUD.bundle的图片.png

按钮知识点补充
- currentTitle方法: 获取当前状态的标题
- sizeWithFont:方法(过期): 传入字体计算一段文字的宽度(只能计算一行).
- sizeWithAttributes:方法: 传入字典参数(富文本属性),凡是有Attributes和NSDictionary混用就是描述富文本属性.

富文本属性宏定义头文件:
iOS7之前: 在UIStringDrawing.h头文件,key的格式: UITextAttributeXXX.
iOS7之后: 在NSAttributedString.h头文件,key的格式: NSXXXAttributeName.
NS开头能用在Mac/iOS开发,UI开头只能在iOS开发.

// 设置富文本属性
NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
// iOS7之后: NSFontAttributeName在NSAttributedString.h头文件
attrs[NSFontAttributeName] = [UIFont systemFontOfSize:20];
// iOS7之前: UITextAttributeFont在`UIStringDrawing.h`头文件
attrs[UITextAttributeFont] = [UIFont systemFontOfSize:20];

3.精华界面的scrollView

1.创建scrollView
- 设置frame和代理delegate属性.
- 设置scrollView的滚动范围contentSize属性
- 设置开启分页功能,隐藏水平垂直滚动条.
2.给精华控制器添加5个子控制器(继承自UITableViewController)
3.添加5个子控制器的view分别添加到scrollView对应位置.(此方式有性能不好,暂不考虑性能,后续会优化)
- 此时UITableView布局存在问题,如下图所示:
  UITableView布局存在问题.png
- tableView全屏穿透,并且不会被NavBar,TabBar挡住,那么必须有2个条件
- 1.UITableView的尺寸根屏幕一样大,占据整个屏幕.(重要).
- 2.设置UITableView的顶部和底部的内边距.
- 让TableView全屏正常显示解决方案
1.设置scrollView不添加额外滚动区域
self.automaticallyAdjustsScrollViewInsets = NO;
2.是指tableView的y值为0,且高度为scrollView的高度
vc.tableView.wx_y = 0;
vc.tableView.wx_height = self.scrollView.wx_height;
3.在各个子控制器设置额外滚动区域
顶部额外滚动区域: 导航条高度64+标题栏高度35 底部额外滚动区域: TabBar的高度49.
self.tableView.contentInset = UIEdgeInsetsMake(WXNavMaxY + WXTitlesViewH, 0, WXTabBarH, 0);

按钮点击scrollView滚动到对应的TableView上,显示tableView的内容.

#pragma =======================================================================
#pragma mark - titleButton按钮点击
// ----------------------------------------------------------------------------
// 监听按钮点击
- (void)titleButtonClick:(WXTitleButton *)button
{
    // 切换中状态
    self.selectedButton.selected = NO;
    button.selected = YES;
    self.selectedButton = button;
    
    [UIView animateWithDuration:0.25 animations:^{
        
        // TODO: 设置下划线的宽度和中心点
        self.underLineView.wx_width = button.titleLabel.wx_width;
        self.underLineView.wx_centerX = button.wx_centerX;
        
        // 切换到对应的view
        self.scrollView.contentOffset = CGPointMake(self.scrollView.wx_width * button.tag, self.scrollView.contentOffset.y);
    }];
}

滚动切换界面和选中标题

在监听按钮点击方法中获取按钮在titleView的index
- 方法一: 使用按钮的tag值获取index,用于设置滚动偏移量.
  self.scrollView.contentOffset = CGPointMake(self.scrollView.wx_width * button.tag, self.scrollView.contentOffset.y);
- 方法二: 使用contentOffset.x计算index,使用indexOfObject:方法获取按钮在父控件titleView的index
  NSUInteger index = [self.titlesView.subviews indexOfObject:titleButton];
  CGFloat offsetX = index * self.scrollView.wx_width;

代理监听scrollView滚动完毕

#pragma =======================================================================
#pragma mark - UIScrollViewDelegate代理方法
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 1.获取索引
    NSInteger index = self.scrollView.contentOffset.x / self.scrollView.wx_width;
    
    // 2.根据索引获取按钮
    WXTitleButton *titleButton = self.titleView.subviews[index];
    
    // 3.调用按钮的点击事件
    [self titleButtonClick:titleButton];
}

viewWithTag方法实现原理
- 控件默认的tag值是0
- viewWithTag会先比较本身的tag,再对比子控件的tag.
- 递归查找tag(从前往后遍历).
- 使用viewWithTag性能低.因为需要递归遍历查找.
- 如果在scrollViewDidEndDecelerating:代理方法中用viewWithTag获取按钮,当拖动到第0个TableView是,会报错:-[UIView setSelected:]: unrecognized selector sent to instance 0x7fb4335958b0,原因是viewWithTag会先比较本身的tag,默认view本身的tag是0,如果返回的是view本身,而不是按钮.view 没有setSelected:方法,所以调用会出错.最好不要使用viewWithTag,因为它是通过遍历来查找的,效率低,性能差.
```
  @implementation UIView
  
  - (UIView *)viewWithTag:(NSInteger)tag
  {
      // 如果自己的tag复合条件，返回自己
      if (self.tag == tag) return self;
      
      for (UIView *subview in self.subviews) {
          UIView *resultView = [subview viewWithTag:tag];
          if (resultView) return resultView;
      }
      
      return nil;
  }
  
  @end
```

经典错误分析

// UIView 调用了setSelected:方法,找不到该方法
-[UIView setSelected:]: unrecognized selector sent to instance 0x7fb4335958b0

// 将WXPerson当字符串使用报错
-[WXPerson length]: unrecognized selector sent to instance 0x7fb4073958b0
NSString *str = [[XMGPerson alloc] init];
str.length;

// 将WXPerson当数组使用报错
-[WXPerson count]: unrecognized selector sent to instance 0x7f35355958b0
NSArray *array = [[XMGPerson alloc] init];
array.count;

// 将WXPerson当字典使用报错
-[WXPerson setObject:forKeyedSubscript:]: unrecognized selector sent to instance 0x7843335958b0
NSMutableDictionary *dict = [[XMGPerson alloc] init];
dict[@"name"] = @"jack";

UITableView重要属性分析

tableView重要属性概念

contentSize : 内容大小
contentOffset : 偏移量
contentInset : 内边距
frame : 矩形框,以父控件内容左上角为坐标原点

tableView重要属性总结

contentSize.height : 【内容】的总高度
【内容】: cell,tableHeaderView,tableFooterView,sectionHeader\Footer.
contentOffset.y : 【内容顶部线】和【frame顶部线】的差值.contentOffset和contentSize都不包含内边距.也就是说contentOffset和contentSize不受contentInset影响.

contentInset : 在【内容】的周围增加一段间距

UITableView重要属性分析图解

UITableView重要属性分析图解.png

05.项目实战百思不得姐精华基本界面搭建

1.界面分析

精华界面结构分析

2.精华界面标题栏

标题栏的结构

标题栏的实现

知识点补充

3.精华界面的scrollView

滚动切换界面和选中标题

UITableView重要属性分析

猜你喜欢

热点阅读

05.项目实战 百思不得姐 精华基本界面搭建

1.界面分析

精华界面结构分析

2.精华界面标题栏

标题栏的结构

标题栏的实现

知识点补充

3.精华界面的scrollView

滚动切换界面和选中标题

UITableView重要属性分析

猜你喜欢

热点阅读

05.项目实战百思不得姐精华基本界面搭建