iOS自定義控制元件：UISegmentedControl+UIScrollView製作QQ音樂主頁面

利用原生的UISegmentedControl和UIScrollView組合繪製這樣的頁面。 可能不是很好的做法。 程式碼如下

#import "ViewController.h"
// 示例Controller
#import "TestViewController.h"
#import "TestTableViewController.h"

#define SEG_SCREEN_WIDTH UIScreen.mainScreen.bounds.size.width

@interface ViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) UISegmentedControl *segmentedControl;
@property (nonatomic, strong) NSArray *titleArray;
@property (nonatomic, strong) NSMutableArray *vcArray;
@property (nonatomic, strong) UIScrollView *scrollView;

@end

@implementation ViewController

#pragma mark =============== Getter && Setter ===============
- (UISegmentedControl *)segmentedControl {
    if (!_segmentedControl) {
        _segmentedControl = [[UISegmentedControl alloc] initWithItems:self.titleArray];
        // 預設選擇第一個
        _segmentedControl.selectedSegmentIndex = 0;
        // 隱藏自帶的邊框
        _segmentedControl.tintColor = UIColor.clearColor;
        NSDictionary *selectedDic = [NSDictionary dictionaryWithObjectsAndKeys:[UIColor redColor], NSForegroundColorAttributeName,[UIFont systemFontOfSize:20],NSFontAttributeName,nil];
        [_segmentedControl setTitleTextAttributes:selectedDic forState:UIControlStateSelected];
        NSDictionary *normalDic = [NSDictionary dictionaryWithObjectsAndKeys:[UIColor blackColor],NSForegroundColorAttributeName,[UIFont systemFontOfSize:15],NSFontAttributeName,nil];
        [_segmentedControl setTitleTextAttributes:normalDic forState:UIControlStateNormal];
        // 新增點選事件
        [_segmentedControl addTarget:self action:@selector(segmentedControlChange:) forControlEvents:UIControlEventValueChanged];
    }
    return _segmentedControl;
}

- (UIScrollView *)scrollView {
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc] init];
        _scrollView.delegate = self;
        _scrollView.frame = self.view.frame;
        _scrollView.pagingEnabled = true;
        _scrollView.showsHorizontalScrollIndicator = false;
        _scrollView.contentSize = CGSizeMake(SEG_SCREEN_WIDTH * self.titleArray.count, 0);
        // 預設載入第一個VC檢視
        UIViewController *vc = self.vcArray[0];
        [self.scrollView addSubview:vc.view];
    }
    return _scrollView;
}

#pragma mark =============== LifeCycle ===============
- (void)viewDidLoad {
    [super viewDidLoad];
    [self initData];
    
    if ([self respondsToSelector:@selector(edgesForExtendedLayout)]){
        self.edgesForExtendedLayout = UIRectEdgeNone;
    }
    
    [self.navigationItem setTitleView:self.segmentedControl];
    [self.view addSubview:self.scrollView];
}

#pragma mark =============== 載入預設資料 ===============
- (void)initData {
    self.titleArray = @[@"我的",@"音樂館",@"發現"];
    
    NSArray *vArray = @[@"TestViewController",@"TestTableViewController",@"TestViewController"];
    
    self.vcArray = [NSMutableArray array];
    for (int i = 0; i < vArray.count; i++) {
        Class class = NSClassFromString(vArray[I]);
        UIViewController *vc = [[class alloc] init];
        vc.view.frame = CGRectMake(SEG_SCREEN_WIDTH * i, 0, SEG_SCREEN_WIDTH, self.view.frame.size.height);
        [self.vcArray addObject:vc];
    }
}

#pragma mark =============== UISegmentedControl點選事件 ===============
- (void)segmentedControlChange:(UISegmentedControl *)sgementControl {    
    UIViewController *vc = self.vcArray[sgementControl.selectedSegmentIndex];
    [self.scrollView addSubview:vc.view];
    self.scrollView.contentOffset = CGPointMake(SEG_SCREEN_WIDTH * sgementControl.selectedSegmentIndex, 0);
}

#pragma mark =============== UIScrollViewDelegate ===============
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat contentOffsetX = scrollView.contentOffset.x;
    NSInteger index = contentOffsetX/SEG_SCREEN_WIDTH;
    UIViewController *vc = self.vcArray[index];
    [self.scrollView addSubview:vc.view];
    self.segmentedControl.selectedSegmentIndex = index;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

@end
複製程式碼

效果圖

Demo地址 https://github.com/wudan-ios/UISegmentedControl-UIScrollView.git