IOS 一个仿美团导航（分类）

前言：仿美团导航，先来张效果团。

代码调用：

NSArray *bcImageArray = [NSArray arrayWithObjects:@"b_cup",@"b_book",@"b_bag",@"b_fruit",@"b_ball",@"b_tool",@"b_lipstick",@"b_hotel",@"b_clock",@"b_shopping_car",@"b_question",@"b_all", nil];
NSArray *bcTitleArray = [NSArray arrayWithObjects:@"餐饮美食",@"教育培训",@"休闲娱乐",@"地方特产",@"运动健身",@"技术服务",@"时尚丽人",@"酒店住房",@"居家生活",@"海外代购",@"咨询服务",@"全部",nil];
CGRect bcFrame = CGRectMake(0, 10, self.view.frame.size.width, 160);
IWBusinessCategorySV *businessCategorySV = [IWBusinessCategorySV businessCategorySVWithFrame:bcFrame imageArray:bcImageArray titleArray:bcTitleArray target:self action:@selector(clickBusinessCategoryBtn:)];
[self.view addSubview:businessCategorySV];

正常我们是将这个View添加tableview的头部。

代码实现：

#import <UIKit/UIKit.h>

UIKIT_EXTERN const NSInteger KCategoryTag;

@interface IWBusinessCategorySV : UIView

/**
 实例化

 @param frame      frame
 @param imageArray 图片数组
 @param titleArray 标题数组
 @param target     target
 @param action     分类按钮点击事件

 @return 分类视图
 */
+ (IWBusinessCategorySV *)businessCategorySVWithFrame:(CGRect)frame imageArray:(NSArray *)imageArray titleArray:(NSArray *)titleArray target:(id)target action:(SEL)action;

@end

#import "IWBusinessCategorySV.h"
#import "IWItemButton.h"

const NSInteger KCategoryTag = 100;
static const NSInteger KPageCount = 8;//一页的个数
static const NSInteger KPageSection = 2;//一页的行数

@implementation IWBusinessCategorySV

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //1.设置背景颜色
        self.backgroundColor = [UIColor whiteColor];
    }
    return self;
}

+ (id)businessCategorySV
{
    return [[self alloc] init];
}

+ (IWBusinessCategorySV *)businessCategorySVWithFrame:(CGRect)frame imageArray:(NSArray *)imageArray titleArray:(NSArray *)titleArray target:(id)target action:(SEL)action
{
    IWBusinessCategorySV *businessCategorySV = [self businessCategorySV];
    businessCategorySV.frame = frame;
    
    //1.添加UIScrollView
    UIScrollView *categoryScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
    categoryScrollView.pagingEnabled = YES;
    categoryScrollView.showsHorizontalScrollIndicator = NO;
    categoryScrollView.showsVerticalScrollIndicator = NO;
    NSInteger page = (titleArray.count + KPageCount - 1)/KPageCount;
    categoryScrollView.contentSize = CGSizeMake(frame.size.width * page, frame.size.height);
    [businessCategorySV addSubview:categoryScrollView];
    
    //2.添加button
    CGFloat itemBtnW = frame.size.width/(KPageCount/KPageSection);
    CGFloat itemBtnH = frame.size.height/KPageSection;
    for (int i = 0; i < titleArray.count; i ++) {
        IWItemButton *itemBtn = [IWItemButton buttonWithType:UIButtonTypeCustom];
        itemBtn.tag = i + KCategoryTag;
        [itemBtn setImage:[UIImage imageNamed:imageArray[i]] forState:UIControlStateNormal];
        [itemBtn setTitle:titleArray[i] forState:UIControlStateNormal];
        [itemBtn setTitleColor:[UIColor colorWithRed:99/255.0 green:99/255.0 blue:99/255.0 alpha:1.0] forState:UIControlStateNormal];
        CGFloat itemBtnX = i/KPageCount *frame.size.width + (i%(KPageCount/KPageSection))*itemBtnW;
        CGFloat itemBtnY = ((i - (i/KPageCount)*KPageCount)/(KPageCount/KPageSection))*itemBtnH;
        itemBtn.frame = CGRectMake(itemBtnX, itemBtnY, itemBtnW, itemBtnH);
        [itemBtn addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
        [categoryScrollView addSubview:itemBtn];
    }
    
    return businessCategorySV;
}

@end

按钮子类

#import <UIKit/UIKit.h>

@interface IWItemButton : UIButton

@end

#import "IWItemButton.h"

// 文字的高度比例
static const CGFloat kTitleRatio = 0.4;

@implementation IWItemButton

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        //1.设置文字居中
        self.titleLabel.textAlignment = NSTextAlignmentCenter;
        //2.设置文字大小和颜色
        self.titleLabel.font = [UIFont systemFontOfSize:12.0f];
        [self setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
        //3.设置图片居中
        self.imageView.contentMode = UIViewContentModeScaleAspectFit;
    }
    return self;
}

#pragma mark 覆盖父类的方法
- (void)setHighlighted:(BOOL)highlighted{}


#pragma mark - 设置图片和文字居中
- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    CGFloat imageX = 0;
    CGFloat imageY = contentRect.size.height*0.1;
    CGFloat imageW = contentRect.size.width;
    CGFloat imageH = contentRect.size.height * (1 - kTitleRatio) - imageY;
    return CGRectMake(imageX, imageY, imageW, imageH);
}

- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    CGFloat titleX = 0;
    CGFloat titleH = contentRect.size.height * kTitleRatio;
    CGFloat titleY = contentRect.size.height - titleH;
    CGFloat titleW = contentRect.size.width;
    return CGRectMake(titleX, titleY, titleW, titleH);
}

@end

demo下载： http://download.csdn.net/detail/u011154007/9667869