1. 程式人生 > >IOS 高仿boss直聘---優雅使用UIButton與UIScrollView打造滑動標籤

IOS 高仿boss直聘---優雅使用UIButton與UIScrollView打造滑動標籤

設計初衷:本工具主要來自俺個人練手小專案,仿boss直聘。文末有原始碼地址

先來看設計的效果:


分析:

1.控制元件選擇分析:頂部為3個標籤並且每個標籤都有點選事件,控制元件的選擇上有很多種。一般都選擇UiButton ,因為這個控制元件可以直接為其繫結點選事件,換成其他的控制元件,就需要為其新增手勢操作了。

2.控制元件數量的分析:對於這個一個控制元件,首先應滿足擴充套件性,比如說,在當前這個例子中,是3個標籤,萬一哪天產品又有了另一個主意,她覺得需要再加一個或是減一個才能體現她的意圖,那麼這裡就需要處理這種情況,不能因為小需求的變動,而又要重新設計一個控制元件,那樣工作效率太低了,也違背了程式設計原則。

在本例中,為了解決這個問題,使用了一個可孌列表儲存標題標籤,根據列表的個數建立標籤

3.底部滑動條的建立:可以使用圖片,也可以使用UIView或其子類,設定其背景色即可;

對於平滑滑動可以使用基本動畫中的位移動畫:程式碼如下:

//private method---線條移動啟動動畫
-(void) startLineMoveAnimFromValue:(id) fromValue toValue:(id) toValue  duration:(CFTimeInterval) time{
    
    self.moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    self.moveAnimation.fromValue = fromValue;
    self.moveAnimation.toValue = toValue;
    self.moveAnimation.delegate = self;
    self.moveAnimation.removedOnCompletion = NO;
    self.moveAnimation.fillMode = kCAFillModeForwards;
    self.moveAnimation.duration = time;
    
    [self.bottomLine.layer removeAllAnimations];
    [self.bottomLine.layer addAnimation:self.moveAnimation forKey:@"onStart"];
   

}

小tips:在使用基本動畫時,特別是屬性動畫,雖然表現位置發生了變化,但其frame屬性卻沒變,這也就是為什麼出現,動畫執行完畢之後,點選按鈕時事件不響應。因為點選的區域根本沒有落到按鈕身上。

4.中間滾動檢視的建立:

  滾動檢視使用經典的UIScrollView設計 ,UIScrollView的frame尺寸在本例中,width=螢幕寬, height= 螢幕高減去上下導航條的高度。

contentSize = width * 標題的數量

滑動的事件,可以實現其滑動協議,也可以使用KVO機制,本例中使用KVO機制來觀察x座標的變化。

其程式碼設定如下:

//本介面主要,建立中間滾動檢視
-(void)initSegmentView:(NSMutableArray*) views{

    if([views count] == 0 ) return;
    //建立中間的滑動檢視
    self.segmentScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 42.5, SCREEN_WIDTH, SCREEN_HEIGHT)];
    self.segmentScroll.contentSize = CGSizeMake(SCREEN_WIDTH * [self.titleList count], SCREEN_HEIGHT);
    self.segmentScroll.alwaysBounceHorizontal = YES;
    self.segmentScroll.pagingEnabled = YES;
    [self addSubview:self.segmentScroll];
    
    //使用kvo來監聽uiscroll的滑動事件,代替它的協議介面
    //添加註冊實現contentOffset監聽
    [self.segmentScroll addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
    
    
    [views enumerateObjectsUsingBlock:^(UIView* layout, NSUInteger idx, BOOL * _Nonnull stop) {
        
        if(idx > [views count]) *stop = true;
        
        [self.segmentScroll addSubview:layout];
        
    }];


}

其中,中間檢視也應該用一個列表儲存起來,並在外面算好其在UIScrollView中位置,這樣才能達到一個標籤對應一個檢視容器的效果。

為了使滑動時標籤上的指示條與標籤本身也隨著發生狀態變化(這裡主要批顏色與指示條的位置變化)需要在KVO當中監聽UIScrollView的contentSize的x座標,其計算程式碼如下:

//-------------------kvo 實現觀察主題 ----------------
//對於滑動翻頁使用kvo監聽機制
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
    
    CGPoint offset = [change[NSKeyValueChangeNewKey] CGPointValue];
    CGPoint oldOffset = [change[NSKeyValueChangeOldKey] CGPointValue];
    CGFloat oldOffsetX = oldOffset.x;
    CGFloat deltaOfOffsetX = offset.x - oldOffsetX;


    [self.bottomLine.layer removeAllAnimations];
    CGRect frame = self.bottomLine.frame;
    frame.origin.x = deltaOfOffsetX / SCREEN_WIDTH * self.itemWidth;
    self.bottomLine.frame = frame;
    [self.bottomLine layoutIfNeeded];
 
    self.nCurIndex = deltaOfOffsetX / SCREEN_WIDTH;
    [self updateTitleBtnStatus:self.nCurIndex];
    
}

-(void)dealloc{
    [self.segmentScroll removeObserver:self forKeyPath:@"contentOffset" context:nil];
}
//-------------------kvo 實現觀察主題 end----------------


相關推薦

IOS 仿boss---優雅使用UIButtonUIScrollView打造滑動標籤

設計初衷:本工具主要來自俺個人練手小專案,仿boss直聘。文末有原始碼地址 先來看設計的效果: 分析: 1.控制元件選擇分析:頂部為3個標籤並且每個標籤都有點選事件,控制元件的選擇上有很多種。一

從零學習Fluter(六):Flutter仿bossv1.0重構

今天繼續學習flutter,覺得這個優秀的東西,許多方面還需要完善,作為一個後來者,要多向別人學習。俗話說,“學無先後,達者為師”。今天呢,我又重新把flutter_boss這個專案程式碼 從頭到腳看了一遍,並進行重構。 廢話不多說,展示出來分享給大家。本專案原始碼已上傳GitHub,文末給出地址。 一

安卓仿BOSS的那種選擇國家、地區和地區程式碼的列表

最近在工作之餘,擠了點時間寫這篇部落格,是公司專案要實現一個功能,就是:選擇國家和地區還有對應的編號,類似於下拉選擇聯絡人的列表一樣的,上張圖: 1.MainActivity package com.city.list.main; import

android 仿Boss訊息介面

最近好久沒有更新我的部落格了,之前5月份由於在一家苦逼的初創公司,一直有時間更新blog,上週離職了,好好休息了兩天,上週面了一家公司感覺挺好的,這兩天一邊找工作一邊寫寫部落格吧。祝我順利等到offer吧^_^(不過北京這一段時間的Android行情不是特別好啊

iOS-仿優雅的好奇心日報

好奇心日報關於好奇心有這樣一句話: 之所以叫好奇心日報,是因為我們認為好奇心是人類最美好的品質之一,我們篩選最有價值的資訊,你能看到全球最有想法,最有關注的各界動態,以及他們背後的故事 正是出於好奇心偶然間下載安裝了這個好奇心日報,開啟這個APP首先吸引我的就是它簡潔乾淨的介面

使用VUE模仿BOSSAPP

調試接口 本地 的人 使用 .... sage 文檔 在線 ons 一、碎碎念: 偶爾在群裏看到一個小夥伴說:最近面試的人好多都說用vue做過一個餓了麽。當時有種莫名想笑。 為何不知道創新一下?於是想寫個DEMO演練一下。那去模仿誰呢?還是BOSS直聘(跟我沒關系,不是

簡易python爬蟲爬取boss職位,並寫入excel

python爬蟲寫入excel1,默認城市是杭州,代碼如下#! -*-coding:utf-8 -*-from urllib import request, parsefrom bs4 import BeautifulSoupimport datetimeimport xlwt starttime = dat

scrapy-boss

ssm 解決 arc cep mac os x head mic exception gin   Hi,大家好。有段時間沒來更新scrapy爬取實例信息了,前2天同事說爬取拉勾,boss直聘等網站信息比較困難。昨天下午開始著手爬取boss直聘內Python爬蟲的信息,比想象

python3 + scrapy 抓取boss崗位

前言:本文為記錄工程實現過程,會引用其他文章,如果又不清晰的地方可以檢視原文章。本文主旨在於記錄,所以部分作者瞭解的部分可能不會介紹而直接操作,如果有疑問請留言或者直接使用搜索引擎。 引用: windows安裝scrapy 建立第一個scrapy工程 一、安裝scrapy 管理員模式開啟power

BOSS走進復旦,95後分享招聘大資料

上海2018年11月14日電 /美通社/ -- 日前,在復旦大學“生涯領航,指引未來”生涯活動月系列講座上,網際網路人力資源服務平臺BOSS直聘研究院院長常濛受邀為同學們帶來《第一份工作應該如何“選風口”》的資料分享。在交流互動環節,這些“95後”學子們爭相提問,“我有一個問題,如果我入

Boss微簡歷(個人例項)本人找實習工作中,歡迎聯絡

我的問答 回答會展示在微簡歷下方 已回答問題 17 個 個人情況 個人工作的規劃 想先在杭州長期發展,找一份前端工作,想在中小企業共同發展,來施展才華。 工作再忙,也得逛逛CSDN,學習新的知識,充實自我。 實習過後,希望能轉正,能留在單位,為單位出一份力 婚姻狀況 未婚

python--boss資料視覺化

python 資料視覺化 本文中主要使用matplotlib和Pandas對資料進行視覺化 資料來源:爬取的BOOS直聘資料分析資料 資料展示 本文中針對以上資料,對salary,company_info,work_time,education這幾個資訊進行資料視覺化,做出

爬蟲進階:Scrapy抓取boss、拉勾心得經驗

關於使用Scrapy的體會,最明顯的感受就是這種模板化、工程化的腳手架體系,可以說是拿來即可開箱便用,大多僅需按一定的規則套路配置,剩下的就是專注於編寫跟爬蟲業務有關的程式碼。絕大多數的反反爬蟲策略,大多有以下幾種: 忽略robots.txt協議 新增隨機請求

BOSS網站資料分析崗位資訊爬取

          感謝BOSS直聘上比較可靠的招聘資訊,讓我們有機會對資料分析崗位進行簡單的爬取與分析。 語言:Python3 目錄 一、資訊爬取 二、資料分析      2.1 資料解析      2.2 資料分析          2.2.1 資料清洗

Python的scrapy之爬取boss

在我們的專案中,單單分析一個51job網站的工作職位可能爬取結果不太理想,所以我又爬取了boss直聘網的工作,不過boss直聘的網站一次只能展示300個職位,所以我們一次也只能爬取300個職位。 jobbossspider.py: # -*- coding: utf-8 -*- import

Pyhton抓取BOSS職位描述和資料清洗,很簡單沒有那麼難

一、抓取詳細的職位描述資訊 詳情頁分析 Python學習資料或者需要程式碼、視訊加Python學習群:960410445   在詳情頁中,比較重要的就是職位描述和工作地址這兩個 由於在頁面程式碼中崗位職責和任職要求是在一個 div 中的,所以在抓的時候就不太好分,

Python的scrapy之爬取boss網站

在我們的專案中,單單分析一個51job網站的工作職位可能爬取結果不太理想,所以我又爬取了boss直聘網的工作,不過boss直聘的網站一次只能展示300個職位,所以我們一次也只能爬取300個職位。 jobbossspider.py: # -*- coding: utf-8 -*- import scrapy

iOS仿今日頭條6.2.6 帶原始碼

登入的使用者是臨時遊客使用者大家可以任意測試 粗略的實現了重新整理控制元件動畫和互動勿噴。 覺得還行star一下 抓取的介面和實現的其他的看效果圖 1:獲取導航分類 2:獲取導航標題擴充套件 3:獲

智聯,拉鉤,boss,三款網際網路招聘應用競品分析

近年來在移動網際網路浪潮的衝擊下,憑藉更好的使用者體驗和新穎的盈利模式,拉勾網和Boss直聘脫穎而出,成為了網際網路垂直招聘模式中的佼佼者。雖然前程無憂和智聯招聘兩大傳統招聘巨頭也受到影響,在尋求轉型中,但依然牢牢佔據了市場近六成份額。思維導圖競品選擇市場分析市場趨勢從近年營

Bossscrapy爬蟲

爬取boss直聘熱門崗位資訊,原始碼如下 -- coding: utf-8 -- import scrapy from Boss.items import BossItem from scrapy import Request from copy im