iOS開發商城時會遇到 商品 詳情 評論 三個視圖篩選的頁面, 這裏封裝了一個框架,可以使隨意切換子視圖界面,繼承簡單,也封裝了滑條框架.效果圖如下:
滑條框架.h文件
#import <UIKit/UIKit.h>
@interface SectionView : UIView//
@property(nonatomic,copy)void (^sectionViewClick)(int index);
//添加一個Secion按鈕
- (void)adSectionItemWithtitle:(NSString *)title font:(CGFloat)font;
//添加一個Secion按鈕
- (void)adSectionItemWithtitle:(NSString *)title img:(NSString *)imgName selectImg:(NSString *)selectImgName font:(CGFloat)font;
// 設置選中的按鈕
@property(nonatomic,assign)NSInteger selectItemIndex;
//提供一個方法給設置文字
- (void)setTitleContent:(NSString *)title index:(int)index;
@end
滑條框架.m文件
#import "SectionView.h"
#define kSectionTitleFont 16
// 正常時候的文字顏色
#define kSectionItemNormalColor [UIColor colorWithRed:126/255.0 green:127/255.0 blue:126/255.0 alpha:1]
#define kSectionItemSelectColor [UIColor redColor]
#define kinditorWidth 80
@interface SectionView ()
{
UIButton * _currentSelectBtn;
// 指示器
UIView * _inditorView;
// 底部分割顯示
UIView * _seperateView;
// 裝按鍵
UIView * _containerItemView;
}
@end
@implementation SectionView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
_containerItemView = [[UIView alloc] init];
_containerItemView.frame = self.bounds;
[self addSubview:_containerItemView];
// 指示器
_inditorView = [[UIView alloc]init];
_inditorView.backgroundColor = kSectionItemSelectColor;
_inditorView.bounds = CGRectMake(0, 0,kinditorWidth ,2);
[self addSubview:_inditorView];
//底部分割線
// _seperateView = [[UIView alloc] initWithFrame:CGRectMake(0, self.frame.size.height-0.5, frame.size.width,0.8)];
// _seperateView.backgroundColor = [UIColor redColor];
// [self addSubview:_seperateView];
}
return self;
}
//添加一個按鈕
- (void)adSectionItemWithtitle:(NSString *)title font:(CGFloat)font{
UIButton * item = [UIButton buttonWithType:UIButtonTypeCustom];
// 文字
[item setTitle:title forState:UIControlStateNormal];
[item setTitleColor:kSectionItemNormalColor forState:UIControlStateNormal];
[item setTitleColor:kSectionItemSelectColor forState:UIControlStateSelected];
item.titleLabel.numberOfLines = 0;
item.titleLabel.textAlignment = NSTextAlignmentCenter;
item.titleLabel.font = [UIFont systemFontOfSize:font];
item.adjustsImageWhenHighlighted = NO;
[item addTarget:self action:@selector(clickItem:) forControlEvents:UIControlEventTouchDown];
[_containerItemView addSubview:item];
// 調節位置
[self adjusetItemFrame];
}
- (void)adSectionItemWithtitle:(NSString *)title img:(NSString *)imgName selectImg:(NSString *)selectImgName font:(CGFloat)font{
UIButton * item = [UIButton buttonWithType:UIButtonTypeCustom];
[item setImage:[UIImage imageNamed:imgName] forState:UIControlStateNormal];
[item setImage:[UIImage imageNamed:selectImgName] forState:UIControlStateSelected];
// 文字
[item setTitle:title forState:UIControlStateNormal];
[item setTitleColor:kSectionItemNormalColor forState:UIControlStateNormal];
[item setTitleColor:kSectionItemSelectColor forState:UIControlStateSelected];
item.titleLabel.numberOfLines = 0;
item.titleLabel.textAlignment = NSTextAlignmentCenter;
item.titleLabel.font = [UIFont systemFontOfSize:font];
item.adjustsImageWhenHighlighted = NO;
[item addTarget:self action:@selector(clickItem:) forControlEvents:UIControlEventTouchDown];
[_containerItemView addSubview:item];
// 調節位置
[self adjusetItemFrame];
}
// 按鍵
- (void)clickItem:(UIButton *)item{
_currentSelectBtn.selected = NO;
item.selected = YES;
_currentSelectBtn = item;
[self setInditorCenter:item];
if(_sectionViewClick){
_sectionViewClick((int)item.tag -10);
}
}
// 調節位置
- (void)adjusetItemFrame{
NSInteger itemCount = _containerItemView.subviews.count ;
CGFloat itemWidth = self.frame.size.width / (itemCount);
CGFloat itemHeight = self.frame.size.height;
for (NSInteger i =0; i <itemCount; i++) {
UIButton * btn = (UIButton *)_containerItemView.subviews[i];
btn.frame = CGRectMake(i * (itemWidth+1), 0, itemWidth, itemHeight);
if(i ==0){
btn.selected = YES;
_currentSelectBtn = btn;
//默認只是第一個
_inditorView.center = CGPointMake(_currentSelectBtn.center.x, self.frame.size.height - 0.75);
}
btn.tag = i + 10;
}
_inditorView.bounds = CGRectMake(0, 0,self.frame.size.width /itemCount -20 , 1.2);
}
- (void)setInditorCenter:(UIButton*)item{
[UIView animateWithDuration:0.2 animations:^{
_inditorView.center = CGPointMake(item.center.x, self.frame.size.height - 0.75);
}];
}
// 設置當前選中那個按鈕
- (void)setSelectItemIndex:(int)selectItemIndex{
if(selectItemIndex >=_containerItemView.subviews.count )return;
UIButton * item = _containerItemView.subviews[selectItemIndex];
[self selectItemIndex:item];
}
- (void)selectItemIndex:(UIButton *)item
{
// 1.讓當前的item取消選中
_currentSelectBtn.selected = NO;
// 2.讓新的item選中
item.selected = YES;
// 3.讓新的item變爲當前選中
_currentSelectBtn= item;
[self setInditorCenter:item];
// 4.調用block
if(_sectionViewClick){
_sectionViewClick((int)item.tag -10);
}
}
// 設置文字內容
- (void)setTitleContent:(NSString *)title index:(int)index{
if(index>=_containerItemView.subviews.count)return;
UIButton * item = _containerItemView.subviews[index];
if([title containsString:@"\n"]){
NSMutableAttributedString * str = [[NSMutableAttributedString alloc] initWithString:title];
NSRange sep = [title rangeOfString:@"\n"];
NSRange range = NSMakeRange(sep.location +1,title.length - sep.location -1);
[str addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:11] range:range];
item.titleLabel.attributedText = str;
}
[item setTitle:title forState:UIControlStateNormal];
}
@end
最後是父視圖控制器,只需要拷貝.m文件裏面代碼即可,裏面的子視圖可以自己隨意修改
//
// FirstViewController.m
// 商品詳情
//
// Created by HandsomeC on 2017/12/28.
// Copyright © 2017年 趙發生. All rights reserved.
//
#import "FirstViewController.h"
#import "SecondViewController.h"
#import "ThirdViewController.h"
#import "FourthViewController.h"
#import "SectionView.h"
@interface FirstViewController ()<UIScrollViewDelegate>
@property (strong, nonatomic) UIScrollView *scrollerView;
@property (nonatomic,strong) SectionView *headerBtn;
@end
@implementation FirstViewController
//設置滑動視圖
- (UIScrollView *)scrollerView{
if (!_scrollerView) {
_scrollerView = [[UIScrollView alloc] initWithFrame:CGRectZero];
_scrollerView.frame = self.view.bounds;
_scrollerView.showsVerticalScrollIndicator = NO;
_scrollerView.showsHorizontalScrollIndicator = NO;
_scrollerView.pagingEnabled = YES;
_scrollerView.bounces = NO;
_scrollerView.delegate = self;
[self.view addSubview:_scrollerView];
}
return _scrollerView;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
self.scrollerView.backgroundColor = self.view.backgroundColor;
[self setUPButton];
[self addChildViewContrlllers];
[self changeChildViewController];
self.scrollerView.contentSize = CGSizeMake(self.view.frame.size.width * self.childViewControllers.count, 0);
}
//設置頂部篩選按鈕
- (void)setUPButton{
NSArray *titles = @[@"商品",@"詳情",@"評價"];
_headerBtn = [[SectionView alloc] initWithFrame:CGRectMake(self.view.frame.size.width/3,24,self.view.frame.size.width/3,40)];
_headerBtn.backgroundColor = [UIColor whiteColor];
for (int i = 0; i < 3; i++) {
[_headerBtn adSectionItemWithtitle:titles[i] font:15];
}
self.navigationItem.titleView = _headerBtn;
__block FirstViewController * ctl = self;
_headerBtn.sectionViewClick = ^(int index)
{
[UIView animateWithDuration:0.2 animations:^{
[ctl contentOffSet:index];
}];
};
}
//滑動切換子視圖控制器
- (void)changeChildViewController{
NSInteger index = _scrollerView.contentOffset.x / _scrollerView.frame.size.width;
UIViewController *childVc = self.childViewControllers[index];
if (childVc.view.superview) return; //判斷添加就不用再添加了
childVc.view.frame = CGRectMake(index * _scrollerView.frame.size.width, 0, _scrollerView.frame.size.width, _scrollerView.frame.size.height);
[_scrollerView addSubview:childVc.view];
}
//獲取點擊或者滑動偏移量
- (void)contentOffSet:(NSInteger)index{
CGPoint offset = _scrollerView.contentOffset;
offset.x = _scrollerView.frame.size.width * index;
[_scrollerView setContentOffset:offset animated:YES];
}
//添加子視圖控制器
- (void)addChildViewContrlllers{
SecondViewController *secVC = [[SecondViewController alloc] init];
[self addChildViewController:secVC];
ThirdViewController *thirdVC = [[ThirdViewController alloc] init];
[self addChildViewController:thirdVC];
FourthViewController *fourthVC = [[FourthViewController alloc] init];
[self addChildViewController:fourthVC];
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
NSInteger index = scrollView.contentOffset.x / scrollView.frame.size.width;
_headerBtn.selectItemIndex = index;
[self contentOffSet:index];
[self changeChildViewController];
}
//實現滑動視圖的代理方法
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
[self changeChildViewController];
}
@end