项目地址：https://github.com/yohaohge/iOS-Himalayan/tree/master/
Tab栏
首先我们要实现的是最下面的Tab栏，也是一开始就遇到的难题——中间的突出按钮的实现。他山之石可以攻玉，我们先看看别人遇到这种是不是意见提供了解决方案。果不其然，在Github上找到了开源代码( https://github.com/boctor/idev-recipes/tree/master/RaisedCenterTabBar) 。
这个问题基本的思路是，我们不能自定义一个UITabBarItem（系统没有提供），那么我们就正常的用TabBarController，然后我们将自定义的按钮添加在TabBar上面，覆盖下面的TabBarItem。（Our basic recipe is then to create a subclass of UITabBarController and add a custom UIButton on top of the UITabBar. ）根据上面提供的方法，初步完成Tab栏如下：
tab栏
其中遇到的问题值得一提的是：
由于得到的图片时图和文字一起组成的，所以设置的时候没有设置文字（自由图片，下面的文字时图片的一部分），会出现图片整体偏上的感觉，我们希望能够图片在y方向居中。还好系统提供了解决方案, UITabBarItem有一个setImageInsets的方法，我们将上下设置成一样的就可以使图片居中了。
没有解决的问题，看上面的图片对比一下原app，发现tabBar上面多了一条分割线（看右边的图看的更清晰），我们希望去掉这个分割线。仔细观察还有阴影效果的问题，我们没有实现阴影效果。下面我们来解决一下这些问题。
1）如何消除UITabBarController的分割线（边框黑线）
首先是分割线的问题，系统默认的UITabBarController 的UITabBar是有分割线的（UINavigationViewControoller的TabBar也有一条分割线解决方法和UITabBarController差不多），需要自己设置默认图片和阴影图片，分别是调用setBackgroundImage，setBackgroundImage，可将颜色转成图片设置，这样就可以消除分割线。要消除UINavigationViewControoller的分割线还需要调用设置一下setBackIndicatorTransitionMaskImage。
2）如何给TabBar添加阴影效果。
image
首页实现之主要的分段选择栏的实现（控件封装）
封装控件在iOS开发中是常遇到的事，如果项目比较赶的话，我们可以用别人写好的开源项目，但是对于技术提升来说，最好还是自己封装，这是一个app的模仿，我们的目的就是要提高技术水平，所以尝试封装一下。记录自己的思路，有时间对比一下别人的思路，可以收获更多，当然自己思考在前，免得受到别人的影响。下面就这个项目而言，我们封装一下分段选择栏。
基本看一下app就会发现分段选择栏在多处被用到了。分析一下它们的特点，找出共性，这样方便设计出可复用的组件。我们来列一下它们的共同点：
1）和TabBar一样，每个小按钮都是可选择的，并且有选择效果。
2）布局上是等分布局。
3）选择时下面的线有滑动动画。
4）除了点击子项目外，滑动下面的View也可以切换选择。
5）点击后除了自身的点击效果，还可以添加处理事件。
然后我们看一下它们的不同点，这样方便我们设计接口时确定参数。不同点如下：
1）标题和标题的个数不同。
2）下滑线的长度不同。
3）字体大小（提高扩展性能，我们让颜色也是可选择的）
4）再多观察一下，可能不全部是等分布局。子项目太多的时候，标题长度是不一样，而且可能会超出屏幕。
到这里我们可以给出几个初步设计方案了。
1）直接封装一个UIView的子类，在UIView上添加子项目，能够处理点击时间，子项目选择UIButton。
2）考虑到超出屏幕的时候需要滑动，所以选择UIScrollView可能更好。
3）但是再考虑一下复用的问题，我们可不可以尝试一下UICollectionView。
当然上面的思路也只是一个初步的设计。经过仔细考虑与实验，设计类FDSegment，设计过程：
1）对基本UI元素的设计，我们选择继承UIScrollView，这样可以实现滑动效果，而且布局上并不复杂，选择用UICollectionView有点浪费。Item我们选择UIButton，因为UIButton已经满足我们的需求了，不再对Item做进一步的封装。指示器直接用UIView就好。
2）布局不用自动布局这种方式，因为我们希望封装的空间能够直接提取出来，所以要尽量不去依赖其他开源项目（自动布局的话Masonry比较好用），而且自动布局效率比较低。对于本项目中的分段选择栏的实现，布局上照考虑的是Item的宽度问题。由于不是所有情况都是等分的，所有我们需要设计一个设置Item宽度的接口，这种情况和UITableView设置cell的高度的情况极为类似，所以我们参考UITableView的设计，设计一个dataSource的代理。同样我们可以将titles做为数据源，放在代理中。点击时间的处理也和cell被选择后的处理情况基本相似，所以我们设计一个处理事件的代理delege。
3）
其代码如下：
//// FDSegment.h// Himalayan//// Created by fdd_zhangou on 16/3/7.// Copyright © 2016年 fdd_zhangou. All rights reserved.//
#import @class FDSegment;
@protocol FDSegmentDataSource
- (
NSArray *)titlesForSegment:(FDSegment *)segment;
- (
CGFloat)segment:(FDSegment *)segment widthForItemAtIndex:(NSInteger)index;
- (
CGFloat)segment:(FDSegment *)segment widthForIndicatorAtIndex:(NSInteger)index;
@end
@protocol FDSegmentDelegate
- (
void)segment:(FDSegment *)segment didSelectedItemAtIndex:(NSUInteger)index;
@end
@protocol FDSegmentDataSource;
@protocol FDSegmentDelegate;
@interface FDSegment : UIScrollView
@property (nonatomic) NSUInteger seletedIndex;
@property (nonatomic) CGFloat heightForIndicator;
@property (nonatomic, weak) id dataSource;
@property (nonatomic, weak) id delegate;
@property (nonatomic, strong) UIFont *font;
@property (nonatomic, strong) UIColor *textColor;
@property (nonatomic, strong) UIColor *selectedColor;
- (void)reloadData;
@end
//// FDSegment.m// Himalayan//// Created by fdd_zhangou on 16/3/7.// Copyright © 2016年 fdd_zhangou. All rights reserved.//
#import "FDSegment.h"
#import
"NSString+Extension.h"@interface FDSegment ()
@property (nonatomic, strong) NSMutableArray *titles;
@property (nonatomic, strong) NSMutableArray *items;
@property (nonatomic, strong) UIView *indicator;
@property (nonatomic) CGFloat height;
@end
@implementation FDSegment
- (
instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.contentSize = frame.size;
self.showsHorizontalScrollIndicator = NO;
self.showsVerticalScrollIndicator = NO;
}
return self;
}
- (
void)layoutSubviews
{
if (self.titles){
CGFloat x = 0;
for (int i = 0; i < self.titles.count; i++)
{
UIButton *item = [self itemAtIndex:i];
if (!item.superview )
{
[
self addSubview:item];
}
item.
frame = CGRectMake(x, 0, [self widthForItemAtIndex:i], self.height - self.heightForIndicator);
x += item.
frame.size.width;
}
self.contentSize = CGSizeMake(x, self.frame.size.height);
[
self addSubview:self.indicator];
UIView *selectedItem = [self itemAtIndex:self.seletedIndex];
CGFloat centerX = selectedItem.center.x;
if (!self.indicator.superview)
{
[
self addSubview:self.indicator];
}
self.indicator.frame = CGRectMake(centerX - [self widthForIndicatorAtIndex:self.seletedIndex]/2 , self.height - self.heightForIndicator, [self widthForIndicatorAtIndex:self.seletedIndex] ,self.heightForIndicator);
}
}
- (
CGFloat)widthForItemAtIndex:(NSUInteger)index
{
if (self.dataSource && [self.dataSource respondsToSelector:@selector(segment:widthForItemAtIndex:)])
{
return [self.dataSource segment:self widthForItemAtIndex:index];
}
return self.frame.size.width/self.titles.count;
}
- (
CGFloat)widthForIndicatorAtIndex:(NSUInteger)index
{
if (self.dataSource && [self.dataSource respondsToSelector:@selector(segment:widthForIndicatorAtIndex:)])
{
return [self.dataSource segment:self widthForIndicatorAtIndex:index];
}
UIButton *item = [self.items objectAtIndex:index];
NSString *title = [self.titles objectAtIndex:index];
UIFont *font = [item.titleLabel font];
return [self string:title sizeWithFont:font maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)].width + 2;
}
- (
CGFloat)heightForIndicator
{
if (_heightForIndicator > 0) {
return _heightForIndicator;
}
return 2;
}
- (
void)setSeletedIndex:(NSUInteger)seletedIndex
{
_seletedIndex = seletedIndex;
for (int i = 0; i < self.titles.count; i++) {
UIButton *item = [self itemAtIndex:i];
if (_seletedIndex == item.tag)
{
item.
selected = YES;
}
else
{
item.
selected = NO;
}
}
[
UIView animateWithDuration:0.1 animations:^{
UIView *selectedItem = [self itemAtIndex:_seletedIndex];
CGFloat centerX = selectedItem.center.x;
if (!self.indicator.superview)
{
[
self addSubview:self.indicator];
}
self.indicator.frame = CGRectMake(centerX - [self widthForIndicatorAtIndex:_seletedIndex]/2 , self.height - self.heightForIndicator, [self widthForIndicatorAtIndex:_seletedIndex] ,self.heightForIndicator);
}];
if (self.delegate && [self.delegate respondsToSelector:@selector(segment:didSelectedItemAtIndex:)])
{
[
self.delegate segment:self didSelectedItemAtIndex:seletedIndex];
}
}
#pragma -mark
- (
NSMutableArray *)items
{
if (!_items) {
_items = [[NSMutableArray alloc] init];
}
return _items;
}
- (
NSMutableArray *)titles
{
if (!_titles) {
if (self.dataSource && [self.dataSource respondsToSelector:@selector(titlesForSegment:)])
{
_titles = [[self.dataSource titlesForSegment:self] mutableCopy];
}
else
{
NSLog(@"must set titles for segment");
}
}
return _titles;
}
- (
UIView *)indicator
{
if (!_indicator) {
_indicator = [[UIView alloc] init];
_indicator.backgroundColor = [UIColor redColor];//默认颜色
}
return _indicator;
}
- (
UIButton *)itemAtIndex:(NSUInteger)index
{
if (index >= self.items.count) {
UIButton *item = [[UIButton alloc] init];
[item
setTitle:[self.titles objectAtIndex:index] forState:UIControlStateNormal];
[item
setTitle:[self.titles objectAtIndex:index] forState:UIControlStateSelected];
[item
setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[item
setTitleColor:self.selectedColor forState:UIControlStateSelected];
[item
addTarget:self action:@selector(selectedItem:) forControlEvents:UIControlEventTouchUpInside];
item.
tag = index;
[
self.items addObject:item];
}
return [self.items objectAtIndex:index];
}
- (
void)selectedItem:(UIButton *)item
{
self.seletedIndex = item.tag;
}
- (
void)reloadData
{
self.titles = nil;
}
- (
UIColor *)selectedColor
{
if (!_selectedColor) {
_selectedColor = [UIColor redColor];
}
return _selectedColor;
}
- (
CGFloat)height
{
return self.frame.size.height;
}
-(
CGSize)string:(NSString *)string sizeWithFont:(UIFont *)font maxSize:(CGSize)maxSize
{
NSDictionary *attrs = @{NSFontAttributeName : font};
return [string boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}
@end
效果如下：
image
image
上面两种情况，分别对应开始我们看到的几个页面中的分段选择栏的情况。是基本满足目前的要求的，关于超出屏幕的内容，需要滑动效果的，也基本实现了，但是可能有些小瑕疵，我们后面具体遇到了再解决。
网友评论