高仿網易新聞客戶端首頁滑動切換頁面框架--LXScrollContentView

心靈的遠足發表於2017-03-27
客戶端框架View

LXScrollContentView

高仿網易新聞客戶端左右滑動切換頁面的框架

github連結：github.com/LiuXingCode…

簡書連結：www.jianshu.com/p/4ca324102…

1. LXScrollContentView描述

這是一個高仿網易新聞客戶端首頁滑動切換頁面的框架。支援點選上方標題，切換下方內容頁面，也支援滑動下方內容區域，切換上方的標題。

高仿網易新聞客戶端首頁滑動切換頁面框架--LXScrollContentView
點選上方標題下方頁面切換

高仿網易新聞客戶端首頁滑動切換頁面框架--LXScrollContentView
滑動切換內容頁面上方標題跟隨切換

2.安裝方法

LXScrollContentView支援CocoaPods安裝

pod 'LXScrollContentView'複製程式碼

也可以下載示例Demo,把裡面的LXScrollContentViewLib資料夾拖到你的專案中即可

3.API使用說明

本框架有 LXScollTitleView 和 LXScrollContentView 兩個類，它們完全獨立，可以根據專案需求選擇使用。

LXScollTitleView表示上方標題區域，它的具體使用方法如下：

/**
 文字未選中顏色，預設black
 */
@property (nonatomic, strong) UIColor *normalColor;

/**
 文字選中和下方滾動條顏色，預設red
 */
@property (nonatomic, strong) UIColor *selectedColor;


/**
 第幾個標題處於選中狀態，預設為0
 */
@property (nonatomic, assign) NSInteger selectedIndex;


/**
 每個標題寬度,預設85.f
 */
@property (nonatomic, assign) CGFloat titleWidth;


/**
 標題字型font，預設14.f
 */
@property (nonatomic, strong) UIFont *titleFont;

/**
 下方滾動指示條高度，預設2.f
 */
@property (nonatomic, assign) CGFloat indicatorHeight;

/**
 選中標題回撥block
 */
@property (nonatomic, copy) BMPageTitleViewSelectedBlock selectedBlock;


/**
 重新整理介面

 @param titles 標題陣列
 */
- (void)reloadViewWithTitles:(NSArray *)titles;複製程式碼

LXScrollContentView 表示下方滾動內容區域，它的具體使用方法如下：

/**
 設定當前滾動到第幾個頁面，預設為0
 */
@property (nonatomic, assign) NSInteger currentIndex;


/**
 頁面滾動停止時觸發block回撥
 */
@property (nonatomic, copy) LXScrollContentViewBlock scrollBlock;


/**
 重新整理頁面內容

 @param childVcs 當前View需要裝入的控制器集合
 @param parentVC 當前View所在的父控制器
 */
- (void)reloadViewWithChildVcs:(NSArray<UIViewController *> *)childVcs parentVC:(UIViewController *)parentVC;複製程式碼

以下是一個在ViewController中具體使用案例

//初始化UI
- (void)setupUI{
    self.titleView = [[LXScollTitleView alloc] initWithFrame:CGRectZero];
    __weak typeof(self) weakSelf = self;
    self.titleView.selectedBlock = ^(NSInteger index){
        __weak typeof(self) strongSelf = weakSelf;
        strongSelf.contentView.currentIndex = index;
    };
    self.titleView.backgroundColor = [UIColor colorWithWhite:0.95 alpha:1];
    self.titleView.titleWidth = 60.f;
    [self.view addSubview:self.titleView];

    self.contentView = [[LXScrollContentView alloc] initWithFrame:CGRectZero];
    self.contentView.scrollBlock = ^(NSInteger index){
        __weak typeof(self) strongSelf = weakSelf;
        strongSelf.titleView.selectedIndex = index;
    };
    [self.view addSubview:self.contentView];
}

//調整titleView和contentView的frame
- (void)viewDidLayoutSubviews{
    [super viewDidLayoutSubviews];
    self.titleView.frame = CGRectMake(0, 0, self.view.frame.size.width, 35);
    self.contentView.frame = CGRectMake(0, 35, self.view.frame.size.width, self.view.frame.size.height - 35);
}

//重新整理titleView和contentView的資料來源，根據專案需求自行選擇資料來源
- (void)reloadData{
    NSArray *titles = @[@"首頁",@"體育",@"科技",@"生活",@"本地",@"視訊",@"娛樂",@"時尚",@"房地產",@"經濟"];
    [self.titleView reloadViewWithTitles:titles];

    NSMutableArray *vcs = [[NSMutableArray alloc] init];
    for (NSString *title in titles) {
        LXTestViewController *vc = [[LXTestViewController alloc] init];
        vc.category = title;
        [vcs addObject:vc];
    }
    [self.contentView reloadViewWithChildVcs:vcs parentVC:self];
}複製程式碼

4.期望

1.這是 LXScrollContentView 框架釋出的第一個版本，還有很多不完善的地方，歡迎大家提出bug。

2.LXScollTitleView 暫時只有一種樣式，我會盡快增加更多樣式。

3.LXScrollContentView目前使用UICollectionView滑動，在效能方面已經比較優秀。接下來考慮加入cache功能，爭取達到更加順滑的效果。

4.大家如果覺得本框架不錯，希望你們可以 Star 一下，我會更有動力的去不斷完善。

5.我的郵箱賬號：liuxinghenau@163.com ，簡書地址：www.jianshu.com/u/f367c6621… ，大家有問題可以隨時聯絡。

相關文章