• 熱門專題

半糖iOS版首頁實現與基本理揭秘

作者_|_369官方网彩票:  發布日期_--丧尸围城2 绝密档案:2016-12-26 20:23:33
Tag標簽_-_云顶国际怎么提现不了:首頁  
  • 很久以前_|_包河区民政局,一個學弟的曾問過我如何實現半糖iOS版本首頁效果_|-新商盟无法登陆,我當時一看覺得這個效果挺酷炫|-|峡口冷烟低,然後去github上搜了一下|__国培总结,很多自稱是仿半糖首頁的__|亿彩彩票是否合法,我下載之後發現其實很多代碼都沒有實現主要的代碼-_|汕尾台风网。有些代碼也做了一些簡單的嚐試-|_漏 navinfo,但是最後都放棄了|-234彩票v100,所以說這個效果還是沒有很好的實現|_和绳媲美。我於是打算研究一下這個有趣的效果|_防狼水,經過工作之餘一段時間的研究|--古董估价。有時候路上也會想一想|_168彩票手机app苹果,做了很多的嚐試-违章动物mv,一點一點的把遇到的問題解決了|__云联惠2018年最新消息。於是寫下這篇文章-_-众彩彩票是真的吗,把自己的一些嚐試和想法與大家分享|-168开奖官方网站。

    有的開發者可能會覺得這麼簡單的東西別拿來忽悠我|零之轨迹 金手指,可以自己親自嚐試去做一個__云谷彩票账号注册,並沒有想象的那麼簡單|__五个人火了。

    實現上滑的的效果

    這一步是首頁效果的基礎|易彩堂五万可以提现吗,實現這一步後-|1q币购物券,才有繼續其它步的必要|_宝利格改装卡宴,這裏麵難度不是很大_-3k娱乐平台负盈利,關鍵是要想到一個好方法不容易__|18彩彩票网站。下麵就具體講講是如何實現的|||制作银行卡。

    有一點可以確定的是||_固话积分查询,使用的肯定是KVO的做法|-_云购彩票登录。通過監聽contentOffset的變化來進行相應的處理_青岛华臣影院影讯。但是具體怎麼做|_-金华烟草网,怎麼來劃分層次___2019年122期精准五肖,真的是一個讓人腦殼痛的問題_|_青年宫影城。

    怎麼下手呢||-易彩彩民测速,開始真的毫無思緒--注册送3868彩金,然後想到了一個利器-|038彩票网提现快吗?,Reveal--关于大自然的诗。不管別的中兴彩票app下载,先用Reveal看看圖層結構再說_楚汉传奇若姜。關於Reveal的使用_-_众发彩票吧,在我的另外一篇文章裏麵有_|惠蒙网。使用Reveal查看任意iOS App的圖層結構--成人奶妈网站。通過圖層查看後---01彩票app是不是正规的,下麵是一個ScrollView-印度电视剧新娘之无悔的爱,上麵是幾個TableView-_|万科集团总部地址。於是這個立刻把我帶入了坑-|至尊彩输惨了,很多網上的Demo都是這樣嚐試__-焦煤上市公司,把TableView放到ScrollView上麵|_|润美娇,然後對它們的contentOffset都添加監聽_-幼儿园中班教育随笔。通過判斷偏移量來禁用TableView或是Scrollew的手勢|_亿博娱乐登录。經過無數次的嚐試最後還是放棄了|--倩女幽魂伏魔牌,手勢衝突這個問題不可能這樣很好的解決||1995反水05彩票网。

    然後我搜了資料_|-新七天电器直销网,有人說可以使用contentInset這個屬性_阳光卫视陈平,這是用來設定ScrollView及其子類的內容顯示區域--诺基亚n79软件下载,通過改變這個屬性的值|_|132彩票com苹果版,達到類似的滑動的效果__低端单反。也就是在KVO的實現方法裏麵不斷的改變contentInset的值|_-莫小晓,然後模擬上推的效果__o记实录刑警。沒有試過這個屬性的可以嚐試一下||_注册即送19元彩金彩票。我使用之後|--柯露玛,出現的問題就是卡頓-|火焰之纹章圣魔之光石金手指,特別卡--北仑教科网,而且很難控製值_|重庆419,這就造成了完全沒有流暢性可言-_脉搏士。間接說明了使用這個根本沒法達到這個效果|__3cp上彩票官方。

    然後我實在是想不到什麼好辦法-|芭蕾舞剧牡丹亭,打算用UISwipGesturer,不過想想這就算了吧|-_北京男性科建国医院。太愚蠢了-_许君浩,而且也會很麻煩||金枝玉叶花卉。像我這樣懶的||_南京手机贴膜,總想少寫幾行代碼|||日奈森亚梦h。怎麼辦呢-花颜 匪我思存,再想想-长沙职工大学。有一天在地鐵上拿出半糖的APP來研究_|_132彩票的用户名,突然靈光一閃-_1588彩票官网,想到了||儿童画春天。因為既然這麼流暢|索爱w750,那一定是使用了原生的UITableView,然後再使用scrollIndicatorInsets這個屬性就可以偽裝出tableView是從下麵開始的效果,然後我的tableView從坐標(0,0)的位置開始-致命交易市长放过我。上麵添加一個空白的View把內容往下麵撐即可實現類似的效果---惠安三中网。如圖(為了便於看清楚布局---2019香港青蛙彩票,我給每個視圖留了一個邊距)

    這裏寫圖片描述

    能想到這一步其實完成了很大的工作了|__众盈彩票是黑彩吗。接下來就是給上麵的搜索框和輪播頁麵添加坐標變化的事件了---血族德鲁依。

    頭部三個View的坐標改變

    給TableView添加監聽-_众购彩票官方网址,然後在如下方法裏麵根據contentOffset的值改變輪播和分類選擇控價的坐標|11选5任7万能34组。

     (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
    {
        UITableView *tableView = (UITableView *)object;
    
        if (![keyPath isEqualToString:@'contentOffset']) {
            [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
            return;
        }
    
        CGFloat tableViewoffsetY = tableView.contentOffset.y;
        self.lastTableViewOffsetY = tableViewoffsetY;
    
        if ( tableViewoffsetY>=0 && tableViewoffsetY<=136) {
            self.segmentScrollView.frame = CGRectMake(0, 200tableViewoffsetY, SCREEN_WIDTH, 40);
            self.cycleScrollView.frame = CGRectMake(0, 0tableViewoffsetY, SCREEN_WIDTH, 200); 
        }else if( tableViewoffsetY < 0){
            self.segmentScrollView.frame = CGRectMake(0, 200, SCREEN_WIDTH, 40);
            self.cycleScrollView.frame = CGRectMake(0, 0, SCREEN_WIDTH, 200);
    
        }else if (tableViewoffsetY > 136){
            self.segmentScrollView.frame = CGRectMake(0, 64, SCREEN_WIDTH, 40);
            self.cycleScrollView.frame = CGRectMake(0, 136, SCREEN_WIDTH, 200);
        }
    }
    

    我們需要添加一個坐標的限製|-亿发彩票机器人计划,因為偏移量有時候會無限大或者是無限小_||工程款支付申请表。而我們的輪播和分類選擇器的區間是固定不變的-|_下堂妻七日离婚契约。所以需要找對坐標進行限製|--蓝波宽带,一旦偏移量超過了這個坐標就不進行改變_--太普儿,而是保持固定的值不變_金立a5游戏下载。

    為了模塊的劃分清晰一些--陈丽阳,我把上麵的搜素框單獨的劃分到了JQHeaderView裏麵-||3M彩票官网。所以需要把外麵的tableView傳到裏麵去|苏西黄。然後在裏麵同樣進行了監聽然後事件處理_-_宠物花卉。

     (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
    {
    
        if (![keyPath isEqualToString:@'contentOffset']) {
            [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
            return;
        }
        UITableView *tableView = (UITableView *)object;
        CGFloat tableViewoffsetY = tableView.contentOffset.y;
    
        UIColor * color = [UIColor whiteColor];
        CGFloat alpha = MIN(1, tableViewoffsetY/136);
    
        self.backgroundColor = [color colorWithAlphaComponent:alpha];
    
        if (tableViewoffsetY < 125){
    
            [UIView animateWithDuration:0.25 animations:^{
                self.searchButton.hidden = NO;
                [self.emailButton setBackgroundImage:[UIImage imageNamed:@'home_email_black'] forState:UIControlStateNormal];
                self.searchBar.frame = CGRectMake((self.width60), 30, self.width80, 30);
                self.emailButton.alpha = 1alpha;
                self.searchButton.alpha = 1alpha;
    
    
            }];
        } else if (tableViewoffsetY >= 125){
    
            [UIView animateWithDuration:0.25 animations:^{
                self.searchBar.frame = CGRectMake(20, 30, self.width80, 30);
                self.searchButton.hidden = YES;
                self.emailButton.alpha = 1;
                [self.emailButton setBackgroundImage:[UIImage imageNamed:@'home_email_red'] forState:UIControlStateNormal];
            }];
        }
    
    }

    做完以上工作後-_河南省基础教研室,我們應該可以看到的是這樣的效果_|-泷泽罗拉种子下载。

    這裏寫圖片描述


    添加下拉刷新的文字效果

    下拉刷新我單獨分離出來了JQRefreshHeaader文件_|k歌迷。實現的原理一樣是用了KVO_-吴尊的qq号是多少。使用偏移量進行相應的圖片替換-吴雪雯电影全集,在某個偏移量開始出現圖片-|-有没有比我更帅的人,在另一個偏移量結束-__杨幂被性侵全图。這中間每兩個像素的偏移量替換為一張圖片|||吉全手机论坛, 然後隱藏其它所有的圖片_|-娱乐天地新版登录,就顯示當前的圖片-||御诚电脑配件,當偏移量的絕對值大於某個值時|_雷公根粉,顯示所有的圖片||电脑桌面壁纸高清非主流,小於某個值時隱藏所有的圖片--节日花篮。當然這裏麵還值得推敲|_易旺彩票注册,感覺可以簡化一些步驟---铁粉吧,

     (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
    {
    
    
        if (![keyPath isEqualToString:@'contentOffset']) {
            [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
            return;
        }
    
        UITableView *tableView = (UITableView *)object;
        CGFloat tableViewoffsetY = tableView.contentOffset.y;
    
        if ( tableViewoffsetY <= 0  &&tableViewoffsetY > 35) {
    
            [self hideAllImageView];
    
        }else if(tableViewoffsetY < 35){
    
            if (tableViewoffsetY < 59) {
    
                [self showAllImageView];
            }else {
                CGFloat offset = fabs(tableViewoffsetY)35;
                NSInteger imageCount = offset/2.0;//兩個偏移量切換一張圖片
                [self hideImageViewExcept:imageCount];
            }
    
        }else if (tableViewoffsetY <136){
    
        }
    
    }
    

    把這裏麵使用的圖片是我自己用PS做的_--雷神2影评,所以看起來很醜-|重庆医科大学校徽,實現後的效果如下
    這裏寫圖片描述

    添加分類滑動

    首先是單純的實現左右滑動的效果|-重庆歪歌横行,這裏我使用了簡單的ScrollView來實現這個效果|_-隆昌地图。上麵的分類選擇是一個ScrollView-金佳景,下麵的也是ScrlloView_-oppo智能手机803,在切換時候修改對應的偏移量即可_365彩票改名了吗?。當然實現方式很多_-娱乐天地线路登录app,網上也有很多的框架-_现任北京市委书记是谁,不過該項目的分類選擇控件需要實現上下滑動-_|阿杰路,所以我還是自己實現了_北京58同城二手车。實現原理很簡單

    首先是點擊上麵的分類控件實現下麵ScrollView的滑動|-奥特曼之超决战。我們隻需要在改變改變分類控件偏移量的同時改變下麵內容ScrollView的偏移量

     [UIView animateWithDuration:0.3 animations:^{
            if (index == 0) {
                self.currentSelectedItemImageView.frame = CGRectMake(PADDING, self.segmentScrollView.frame.size.height  2,currentButton.frame.size.width, 2);
    
            }else{
    
                UIButton *preButton = self.titleButtons[index  1];
    
                float offsetX = CGRectGetMinX(preButton.frame)PADDING*2;
    
                [self.segmentScrollView scrollRectToVisible:CGRectMake(offsetX, 0, self.segmentScrollView.frame.size.width, self.segmentScrollView.frame.size.height) animated:YES];
    
                self.currentSelectedItemImageView.frame = CGRectMake(CGRectGetMinX(currentButton.frame), self.segmentScrollView.frame.size.height2, currentButton.frame.size.width, 2);
            }
            self.bottomScrollView.contentOffset = CGPointMake(SCREEN_WIDTH *index, 0);
    
        }];
    

    然後們在滑動下麵的ScrollView的時候滑動在代理方法裏麵分類選擇控件也跟著進行滑動即可||10元可提现的彩票网站。

        [UIView animateWithDuration:0.3 animations:^{
            if (index == 0) {
                self.currentSelectedItemImageView.frame = CGRectMake(PADDING, self.segmentScrollView.frame.size.height  2,currentButton.frame.size.width, 2);
    
            }else{
    
    
                UIButton *preButton = self.titleButtons[index  1];
    
                float offsetX = CGRectGetMinX(preButton.frame)PADDING*2;
    
                [self.segmentScrollView scrollRectToVisible:CGRectMake(offsetX, 0, self.segmentScrollView.frame.size.width, self.segmentScrollView.frame.size.height) animated:YES];
    
                self.currentSelectedItemImageView.frame = CGRectMake(CGRectGetMinX(currentButton.frame), self.segmentScrollView.frame.size.height2, currentButton.frame.size.width, 2);
            }
    
        }];
    
    

    這樣簡單實現的滑動控件肯定有很多值得優化的地方___陈思远微博,最簡單優化就是把下麵的UIScrollView換成UICollectionView_|-scc江智背景,這樣就可以複用Cell從而優化內存-|云购彩票注册。

    實現後的基本效果如下
    這裏寫圖片描述

    為分類滑動添加上下滑動的交互

    到這一步感覺這也是一件非常費腦子的事情-|淘宝体通缉令,每一個分類都要能滑動上麵的分類控件和推薦控件--_2000彩账号注册,而且在滑動到任意位置之後_南滨市,切換分類後還需要能夠繼續滑動視圖-_synergykm。

    首先我們來解決第一個問題_|-娱乐天地点检安卓,如何讓所有的分類都可以有類似的效果呢||-青岛台东八路洗头房。其實很簡單-_银魂62,弄一個數組_-_猊龙狮,把所有的控製器裏麵的TableView放到裏麵去|静安火灾,然後給所有的TableView的contentOffset都添加KVO就好了---一点色。當然基本思路就是這樣___htcg55,具體實踐的時候可能會遇到很多的問題-|自贡富顺二中,讀者可以自行嚐試研究qq2011下载正式版免费下载。當然我們的下拉刷新控件也需要添加到每一個tableView上麵

    for (int i = 0; i<CATEGORY.count; i++) {
    
                JSDTableViewController *jsdTableViewController = [[JSDTableViewController alloc] init];
                jsdTableViewController.view.frame = CGRectMake(SCREEN_WIDTH * i, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    
                jsdTableViewController.view.backgroundColor = colors[i];
                [self.bottomScrollView addSubview:jsdTableViewController.view];
    
                [self.controlleres addObject:jsdTableViewController];
                [self.tableViews addObject:jsdTableViewController.tableView];
    
                //下拉刷新動畫
               JQRefreshHeaader *jqRefreshHeader  = [[JQRefreshHeaader alloc] initWithFrame:CGRectMake(0, 212, SCREEN_WIDTH, 30)];
                jqRefreshHeader.backgroundColor = [UIColor whiteColor];
                jqRefreshHeader.tableView = jsdTableViewController.tableView;
                [jsdTableViewController.tableView.tableHeaderView addSubview:jqRefreshHeader];
    
    
                NSKeyValueObservingOptions options = NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld;
                [jsdTableViewController.tableView addObserver:self forKeyPath:@'contentOffset' options:options context:nil];
    
            }
    

    這樣的話-365爱购网靠谱吗,我在切換之後其它的控製器也可以實現上滑的效果至尊心水app安全吗。不過如果我滑了一部分沒有到最上麵或是最下麵的話_-31选7大星走势图,就會出現錯亂的情況|-_八千网。要保持各個控製器能夠連續滑動-|_2019管家婆王中王资料。我們可以記錄下上一次的偏移量|_-观赏鱼之家zadull水族,然後在切換的時候對其它的tableView也設置同樣的偏移量-|铁梨花41,這樣就可以保證都保持統一的偏移量|苑新雨,當然我做了類似半糖的判斷_-|健康666,就是當偏移量大於最大值當時候設置為最大值-构橘,小於最小值的時候設置為0.

    self.currentTableView  = self.tableViews[index];
        for (UITableView *tableView in self.tableViews) {
    
            if ( self.lastTableViewOffsetY>=0 &&  self.lastTableViewOffsetY<=136) {
                tableView.contentOffset = CGPointMake(0,  self.lastTableViewOffsetY);
    
            }else if(  self.lastTableViewOffsetY < 0){
                tableView.contentOffset = CGPointMake(0, 0);
    
            }else if ( self.lastTableViewOffsetY > 136){
                tableView.contentOffset = CGPointMake(0, 136);
            }
    
        }
    
    

    最後實現的效果如下所示|-中国军衔等级胸章,感覺還可以吧_|168彩票是国家还是个人。
    這裏寫圖片描述

    最後

    裏麵的點擊事件我都沒有添加|_35彩票官网,這些都很簡單_|3550幸运彩票安全吗。|日升丰。不想浪費時間在這上麵_||蜜宝团。

    工程裏麵的Resource目錄下是我抓包到的一些數據|云帆app,為了防止半糖修改權限下載不到圖片_-|公车系列强x轮,我把需要的圖片都提前下載一份|-fj 12530,一旦下載失敗就使用本地圖片-__海华癫痫,還有一些自己的圖片__-赢彩彩票可靠吗。為了方便大家學習使用-_广东特产批发,我沒有把圖片文件放入Assets.xcassets目錄下||-众博平台是黑平台吗,因為放入這裏|-科瑞计算簿注册码,對於需要圖片學習複用的時候需要一張圖片一隻圖片拷貝出來___mellow高敏爱,費時間費力氣_邪恶少年eb的小站。裏麵關於半糖的數據僅用於交流和學習|-松阳电大,若用於商業用途__-谈爱 李白,後果自負||-电视剧至爱亲朋。

    如果你博客給你了一些幫助-|易发彩票靠谱吗,希望點一波CSDN的關注_诺基亚套件官方下载。最後附上Demo地址JSDBanTangHomeDem|_金山升一艺能事务所,如果覺得滿意_建筑工程机械配件,請給個Satr-波特卡斯d提娜。

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯係方式
本站內容來自於互聯網,僅供用於網絡技術學習,學習中請遵循相關法律法規
秒速牛牛sg飞艇亿客隆彩票宝马彩票捷豹彩票众购彩票

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!