你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發基礎 >> iOS開發之多表視圖滑動切換示例(仿頭條客戶端)

iOS開發之多表視圖滑動切換示例(仿頭條客戶端)

編輯:IOS開發基礎

semi-precious-stones-602291_640.jpg

前幾天發布了一篇iOS開發之多表視圖滑動切換示例(仿"頭條"客戶端)的博客,之所以寫這篇博客,是因為一位iOS初學者提了一個問題,簡單的寫了個demo做了個示范,讓其在基礎上做擴展和改進。被CocoaChina中iOS模塊所收錄實在出乎我的意料,鏈接地址(http://www.cocoachina.com/ios/20150706/12370.html),在CocoaChina上看了下面的評論,Demo的問題確實有,優化和改進的空間也是蠻大的。首先內存問題是必須考慮的,不能把這麼多的TabalView實例化後添加到ScrollView上,只要是做過iOS的小伙伴這個問題應該不難看出。再一個是頭部按鈕多了以後會擠在一起,還有如果添加上網絡請求的話,沒做本地緩存,等一系列的問題。下面是在CocoaChina中的部分評論。這些評論只提出了顯而易見的問題,並沒給出解決方案,或者有些人只是在“吐槽”。再以後幾篇博客中會對這個組件進行優化和改進。首先也非常感謝下面評論的朋友。

1436237959889226.png

有問題並不可怕,發現問題,解決問題。這也是一個提高的過程,在今天的博客中要做兩個優化。第一:多個TableView的內存問題。第二:頭部多個按鈕的顯示問題。今天的博客的內容是在上一篇博客iOS開發之多表視圖滑動切換示例(仿"頭條"客戶端)做的優化和擴展,同時也會在gitHub上更新一下Demo的代碼,廢話不多說,開始今天博客的主題。

一、多張表視圖的內存問題解決方案

借鑒TableView中Cell的重用機制,我們就把之前的Demo中ScrollView上的TableView進行復用,在我的博客中用的是兩個TableView進行的交叉復用,當然你也可以用其他個數的TableView進行復用。下面是實例化ScrollView上的TableView的代碼,由下面的代碼可以看出只實例化2個TableView, 並且把初始化後的TableView放在了TableView的初始化的位置上。而在原來的Demo中  -(void) initDownTables 方法會實例化多個TableView, 這也是內存問題的根源。

#pragma mark --初始化下方的TableViews
-(void) initDownTables{
    
    for (int i = 0; i < 2; i ++) {
        
        UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(i * _mViewFrame.size.width, 0, _mViewFrame.size.width, _mViewFrame.size.height - TOPHEIGHT)];
        tableView.delegate = self;
        tableView.dataSource = self;
        tableView.tag = i;
        
        [_scrollTableViews addObject:tableView];
        [_scrollView addSubview:tableView];
    }
    
}

上面的代碼減少了TableView的實例化,那麼我們如何進行復用呢? 我個人采取的是改變TableView在ScrollView上的Frame, 並且刷新相應的TableView, 下面的代碼是把TableView移動到當前顯示頁數,並且刷新TableView上的數據。代碼如下:

#pragma mark --根據scrollView的滾動位置復用tableView,減少內存開支
-(void) updateTableWithPageNumber: (NSUInteger) pageNumber{
    int tabviewTag = pageNumber % 2;
    
    CGRect tableNewFrame = CGRectMake(pageNumber * _mViewFrame.size.width, 0, _mViewFrame.size.width, _mViewFrame.size.height - TOPHEIGHT);
    
    UITableView *reuseTableView = _scrollTableViews[tabviewTag];
    reuseTableView.frame = tableNewFrame;
    [reuseTableView reloadData];
}

上面的方法在那調用呢? 我是在ScrollView到達相應的頁數時進行tableView的移動和數據的刷新。具體的調用代理方法如下:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{
    if ([scrollView isEqual:_scrollView]) {
        _currentPage = _scrollView.contentOffset.x/_mViewFrame.size.width;
        
        _currentPage = _scrollView.contentOffset.x/_mViewFrame.size.width;
        
        //    UITableView *currentTable = _scrollTableViews[_currentPage];
        //    [currentTable reloadData];
        
        [self updateTableWithPageNumber:_currentPage];

        return;
    }
    [self modifyTopScrollViewPositiong:scrollView];
}

上面的代碼就可以實現TableView的復用了,並且減少了內存開支。如有更好的解決方案,還請提出,會及時的進行修改和改正。不希望大家只是“吐槽"和提出一些問題,我期待和大家交流和學習的是一些問題更好的解決方案。

二、頭部按鈕達到一定數量時,布局的顯示方案。

也是防新聞頭條的那種,按鈕多到一定個數時回使用ScrollView進行滾動。在本Demo中是超過6個按鈕就可以滑動,而6個以下是平分整個屏幕的寬度的。主要做的修改是把Button放到ScrollView上,找准時機,讓ScorllView進行滑動。下方的代碼是實例化TopScrollView,並把按鈕放到TopScrollView上:

#pragma mark -- 實例化頂部的tab
-(void) initTopTabs{
    CGFloat width = _mViewFrame.size.width / 6;
    
    if(self.tabCount = 6) {
        _topScrollView.contentSize = CGSizeMake(width * _tabCount, TOPHEIGHT);

    } else {
        _topScrollView.contentSize = CGSizeMake(_mViewFrame.size.width, TOPHEIGHT);
    }
    
    
    [self addSubview:_topMainView];
    
    [_topMainView addSubview:_topScrollView];
    
    
    
    for (int i = 0; i < _tabCount; i ++) {
        
        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(i * width, 0, width, TOPHEIGHT)];
        
        view.backgroundColor = [UIColor lightGrayColor];
        
        if (i % 2) {
            view.backgroundColor = [UIColor grayColor];
        }
        
        UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, width, TOPHEIGHT)];
        button.tag = i;
        [button setTitle:[NSString stringWithFormat:@"按鈕%d", i+1] forState:UIControlStateNormal];
        [button addTarget:self action:@selector(tabButton:) forControlEvents:UIControlEventTouchUpInside];
        [view addSubview:button];
        
        
        [_topViews addObject:view];
        [_topScrollView addSubview:view];
    }
}

以上內容實在之前的Demo的基礎上做的簡單的修改,Demo還在完善中,後期會加上網絡請求,本地緩存等。發表博客的初衷是與大家進行交流和學習,而不是看一些人進行吐槽。問題是在所難免,希望大家能提出問題所在,給出自己的解決方案,進行交流,共同進步。下方是Demo運行的效果:

把新的代碼更新到了GitHub上,優化還在繼續,歡迎大家批評指正。

Demo在GitHub上的分享地址:https://github.com/lizelu/SliderTabBar

  • 作者:青玉伏案

  • 出處:http://www.cnblogs.com/ludashi/

  • 本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。

  • 如果文中有什麼錯誤,歡迎指出。以免更多的人被誤導。

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved