iOS -swift-模仿今日頭條滾動(dòng)界面(多種使用場(chǎng)景封裝)

前言###

隨著swift3.0推出之后什往,我們廣大的iOS同胞都慢慢的走向swift開發(fā)向叉,當(dāng)然小編也不例外丈冬,也在靜下心來(lái)了解了解swift傲武,但是單純的這樣看文檔那也不是一個(gè)好辦法回官,因?yàn)閷?duì)于我來(lái)講曹宴,代碼才是最親切的朋友,所以索性就是直接看代碼歉提、寫代碼最直接笛坦。

代碼下載地址:
swift版本:高仿今日頭條、網(wǎng)易新聞UI結(jié)構(gòu)
OC版本:高仿今日頭條

正文#####

小編琢磨著苔巨,在OC中我們經(jīng)常用到一些經(jīng)典的UI結(jié)構(gòu)(都不知道寫了多少次了)都是已經(jīng)封裝好的版扩,那么以后在使用swift的時(shí)候,不是也是需要這樣封裝好的UI結(jié)構(gòu)嗎侄泽?反正邏輯都是差不多的礁芦,只是寫的方式改改,下面是多種使用場(chǎng)景的效果圖


高仿今日頭條01.gif

高仿今日頭條02.gif

高仿今日頭條03.gif

實(shí)現(xiàn)可以設(shè)置的功能有:
1悼尾、可以標(biāo)題欄是否可以滾動(dòng)柿扣,注意標(biāo)題都是滾動(dòng)到中心位置

var  pageStyleModel = LZBPageStyleModel()
    pageStyleModel.isScrollEnable = true

調(diào)節(jié)選中的標(biāo)題到中心位置

 //調(diào)整位置
 func adjustTargetOffset(){
    let  targetLabel = self.titleLabels[currentIndex]   //當(dāng)前選中的標(biāo)題的索引
    var  offsetX = targetLabel.center.x - scrollView.bounds.width * 0.5
    if offsetX < 0{
        offsetX = 0
    }
    let  maxOffsetX = self.scrollView.contentSize.width - scrollView.bounds.width
    if offsetX > maxOffsetX{
        offsetX = maxOffsetX
    }
    scrollView.setContentOffset(CGPoint(x: offsetX, y: 0), animated: true)
}

2、可以設(shè)置是否縮放選中標(biāo)題

//4.拖動(dòng)contentView闺魏,改變字體大小
    if self.style.isNeedScale {
        let deltaScale = self.style.maxScale - 1.0
        soureLabel.transform = CGAffineTransform(scaleX: self.style.maxScale - deltaScale * progress, y: self.style.maxScale - deltaScale * progress)
        targetLabel.transform =  CGAffineTransform(scaleX: 1.0 + deltaScale * progress, y: 1.0 + deltaScale * progress)
    }

3窄刘、可以設(shè)置是否下滑線長(zhǎng)度與文字對(duì)齊

let deltaWidth = targetLabel.frame.width - soureLabel.frame.width
    let deltaX = targetLabel.frame.origin.x - soureLabel.frame.origin.x
    //3.拖動(dòng)contentView,下劃線漸變
    if self.style.isShowBottomLine {
        bottomLine.frame.size.width = soureLabel.frame.width + deltaWidth * progress
        bottomLine.frame.origin.x = soureLabel.frame.origin.x + deltaX * progress
    }

4.可以設(shè)置文字顏色漸變

//2.顏色漸變
    soureLabel.textColor = UIColor(r: (self.selectColor.0 - deltaColor.0) * progress, g: (self.selectColor.1 - deltaColor.1) * progress, b: (self.selectColor.2 - deltaColor.2) * progress)
    targetLabel.textColor = UIColor(r: (self.normalColor.0 + deltaColor.0) * progress, g: (self.normalColor.1 + deltaColor.1) * progress, b: (self.normalColor.2 + deltaColor.2) * progress)

5、可以設(shè)置遮罩漸變

//4.拖動(dòng)contenView舷胜,mask漸變
    if self.style.isNeedMask {
        self.lableMaskView.frame.size.width = self.style.isScrollEnable ? soureLabel.frame.width + 2 * self.style.maskInsetMargin + deltaWidth * progress : soureLabel.frame.width + deltaWidth * progress
        self.lableMaskView.frame.origin.x = self.style.isScrollEnable ? soureLabel.frame.origin.x -  self.style.maskInsetMargin + deltaX * progress : soureLabel.frame.origin.x + deltaX * progress
    }

所有可以配置的參數(shù)都可以通過(guò)LZBPageStyleModel配置

var  titleViewHeight : CGFloat = 44  //標(biāo)題欄默認(rèn)高度
 var  titleViewTitleNormalColor : UIColor = UIColor(r: 0, g: 0, b: 0)  //正常情況默認(rèn)黑色
var  titleViewTitleSelectColor : UIColor = UIColor(r: 255, g: 0, b: 7) //選中情況默認(rèn)紅色
var  titleViewTitleFont : UIFont = UIFont.systemFont(ofSize: 14.0)  //默認(rèn)字體
var  isScrollEnable : Bool = false   //默認(rèn)不可以滾動(dòng)
var  titleViewMargin :  CGFloat = 20.0  //默認(rèn)間距
var  isShowBottomLine : Bool = true      //是否顯示底部線
var  bottomLineHeight : CGFloat = 2.0   //底部線的默認(rèn)高度
var  bottomLineColor : UIColor = UIColor.red    //底部線默認(rèn)顏色
var isNeedScale : Bool = false   //是否需要放大
var maxScale : CGFloat = 1.2   //縮放的最大值
var isNeedMask : Bool = false   //是否需要遮罩
var maskColor  : UIColor = UIColor(white: 0.4, alpha: 0.5)  //遮罩顏色
var maskInsetMargin : CGFloat = 10.0  //遮罩內(nèi)部間距
var maskHeight : CGFloat = 25.0  //遮罩高度
var maskLayerRadius : CGFloat = 12.5  //遮罩圓角

封裝UI使用步驟###

1娩践、創(chuàng)建標(biāo)題欄標(biāo)題數(shù)組活翩,注意必須與后面控制器對(duì)應(yīng)

  let titles = ["英雄聯(lián)盟","火藍(lán)","提姆隊(duì)長(zhǎng)","史前巨鱷","洛克薩斯之手","狗頭","武器"]

2、創(chuàng)建控制器數(shù)組翻伺,根據(jù)自己項(xiàng)目具體不同而使用不同的控制器
> var childvcs = UIViewController
for i in 0..<titles.count
{
let vc = UIViewController()
let backgroundcolor = UIColor.getRandomColor() //獲取隨機(jī)顏色
vc.view.backgroundColor = backgroundcolor
childvcs.append(vc)
}
3材泄、創(chuàng)建樣式,根據(jù)項(xiàng)目自己配置

var  pageStyleModel = LZBPageStyleModel()
    pageStyleModel.isScrollEnable = true  //是否可以滾動(dòng)
    pageStyleModel.isNeedScale = true  //是否需要放大
    pageStyleModel.isShowBottomLine = false  /是否需要底部線
    pageStyleModel.isNeedMask = true  //是否需要遮罩

4吨岭、創(chuàng)建pageView

let pageView = LZBPageView(frame: pageFrame, titles: titles, pageStyle: pageStyleModel, childVcs: childvcs, parentVc: self)
  view.addSubview(pageView)

代碼結(jié)構(gòu)清晰拉宗、并且有注釋,集成度高辣辫、耦合性低旦事,方便使用

代碼下載地址:
swift版本:高仿今日頭條、網(wǎng)易新聞UI結(jié)構(gòu)
OC版本:高仿今日頭條

最后贈(zèng)言###

如果覺得文章對(duì)您有幫助急灭,不要忘記star哦!??姐浮,star 是對(duì)程序猿最大的鼓勵(lì)!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末葬馋,一起剝皮案震驚了整個(gè)濱河市卖鲤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌畴嘶,老刑警劉巖蛋逾,帶你破解...
    沈念sama閱讀 207,248評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異窗悯,居然都是意外死亡区匣,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門蒋院,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)沉颂,“玉大人,你說(shuō)我怎么就攤上這事悦污。” “怎么了钉蒲?”我有些...
    開封第一講書人閱讀 153,443評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵切端,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我顷啼,道長(zhǎng)踏枣,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,475評(píng)論 1 279
  • 正文 為了忘掉前任钙蒙,我火速辦了婚禮茵瀑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘躬厌。我一直安慰自己马昨,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鸿捧,像睡著了一般屹篓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上匙奴,一...
    開封第一講書人閱讀 49,185評(píng)論 1 284
  • 那天堆巧,我揣著相機(jī)與錄音,去河邊找鬼泼菌。 笑死谍肤,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的哗伯。 我是一名探鬼主播荒揣,決...
    沈念sama閱讀 38,451評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼笋颤!你這毒婦竟也來(lái)了乳附?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,112評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤伴澄,失蹤者是張志新(化名)和其女友劉穎赋除,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體非凌,經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡举农,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了敞嗡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颁糟。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖喉悴,靈堂內(nèi)的尸體忽然破棺而出棱貌,到底是詐尸還是另有隱情,我是刑警寧澤箕肃,帶...
    沈念sama閱讀 33,803評(píng)論 4 323
  • 正文 年R本政府宣布婚脱,位于F島的核電站,受9級(jí)特大地震影響勺像,放射性物質(zhì)發(fā)生泄漏障贸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3 307
  • 文/蒙蒙 一吟宦、第九天 我趴在偏房一處隱蔽的房頂上張望篮洁。 院中可真熱鬧,春花似錦殃姓、人聲如沸袁波。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)锋叨。三九已至垄分,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間娃磺,已是汗流浹背薄湿。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留偷卧,地道東北人豺瘤。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像听诸,于是被迫代替她去往敵國(guó)和親坐求。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)晌梨、插件桥嗤、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,033評(píng)論 4 62
  • 【31】 安葬了我奶奶,眨眼到了2010年仔蝌,我爹再不能像以前那樣為所欲為了泛领,因?yàn)閮晌嘧樱鶄€(gè)人敛惊,七八個(gè)心眼兒渊鞋,他...
    子魚ziyu閱讀 490評(píng)論 0 1
  • 耶穌基督本有上帝的形象與光輝,反倒虛己瞧挤,道成肉身锡宋,以人子的身份來(lái)到做兒女起步的人當(dāng)中。 聽特恬,且要聽他的教...
    墨姨閱讀 4,582評(píng)論 0 0
  • 文/以恒 ‖ 2017堅(jiān)持簡(jiǎn)書日更 第199篇 ‖ 轉(zhuǎn)載請(qǐng)聯(lián)系作者授權(quán) 今天最主要的事就是陪我家大胡去市里的醫(yī)科大...
    Amy啊愛米呀閱讀 595評(píng)論 1 1
  • 所有的相遇执俩,都是久別重逢! 感恩我們相遇在這里癌刽! 奇跡30第20班開始招生役首,包括新推出的【靈性之美】系列落...
    日光傾城52fhx閱讀 84評(píng)論 0 0