先上效果圖,如果你覺得還不錯的話,請往下喵多幾眼~喵?
效果圖.gif
實現思路(個人感覺特別Low,但是實用)
界面布局(這里用的是StroyBoard)
主要分為兩部分:
</br>1.頭部視圖(MysegmnetView)
只是布局麻煩了一點..這里的分割線用了點小技巧來寫,其實這個View的背景是灰色的,用白色UIView來放入每一個按鈕然后每個間隔1px這樣就做成了分割線的效果了~再也不用蛋疼的拖一坨1px的View來做分割線了..
</br>2.滾動部分的視圖
這里布局就比較簡單了,我就不多說了,剛開始做的時候,我是利用UIScorllView來做的,做出來的效果之后非常不理想,內存占用大,而且需要For循環添加視圖.所以后來(也就是現在的完成品)就換成了UICollectionView,利用其重用機制來做更加適合.
故事板視圖.png
實現方法
</br>
1.頭部動畫及按鈕高亮思路(這里,比較Low有好的方法記得告訴我)
首先說下MysegmnetView底部滑動條的實現思路:直接初始化一個View,設置其位置 X:0 Y:頭部視圖的高/item的個數 W:里面Item的寬 H:2 (如果你不嫌煩的話,可以在故事板創建,再拉線過來),顏色為灰色,監聽滾動部分的視圖的X變化,實時改變其X的位置,即可以達到聯動的效果.
至于按鈕高亮實現比較Low,設置每次按鈕的Tag值分別為15,每次滾動算出當前的__Page+1__(因為Page是從0開始的),然后根據Tag找出按鈕設置為選中狀態,利用for循環15取消其他按鈕的選中狀態
</br>
2.滾動視圖的實現思路
根據傳入來的VC數組來注冊不同的Cell,其ID為類名,每個Item的Size為父視圖的Frame(self.bounds.size),在這里要注意監聽ScrollView的變化傳回給MysegmnetView至于為什么,前面說了
//控制器數組
private lazy var vcs = [UIViewController]()
//寫一個設置方法用來初始化(因為這里是用故事板來寫的,就不重寫其初始化方法了)
func setPageView(vcs:[UIViewController],parentViewController:UIViewController,segmentView:MySegmentView){
self.vcs = vcs
//視圖控制器
self.parentViewController = parentViewController
//頭視圖
self.segmentView = segmentView
self.segmentView?.delegate = self
//分別注冊Cell
self.vcs.forEach{
self.collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: String($0))
}
self.collectionView.reloadData()
}
上面就搞好現在搞CollectViewItem里面的控制器把
直接上圖,我相信你能懂的(#滑稽)
控制器
寫好之后我們要做的事情就是把這里的控制器視圖全部塞到滾動視圖里面,開搞~
這里我使用的是Extension中的方法
func initView(){
self.myPageViewContainer.setPageView(self.setFilterVc(), parentViewController: self,segmentView: self.mySegmentView)
}
private func setFilterVc()->[UIViewController]{
let pictrue = StoryboardWithIdentifier("MyPageViewsStoryboard", Identifier: "pictureCollection") as! MyPictrueCollectionViewController
let collection = StoryboardWithIdentifier("MyPageViewsStoryboard", Identifier: "collection") as! MyCollectionViewController
let love = StoryboardWithIdentifier("MyPageViewsStoryboard", Identifier: "love") as! MyLoveViewController
let dynamic = StoryboardWithIdentifier("MyPageViewsStoryboard", Identifier: "dynamic") as! MyDynamicViewController
let notice = StoryboardWithIdentifier("MyPageViewsStoryboard", Identifier: "notice") as! MyNoticeViewController
return [pictrue,collection,love,dynamic,notice]
}
extension NSObject{
/*!
根據SB的名字和標識獲取其控制器
- parameter storyboardName: 故事板名字
- parameter Identifier: 標識
- returns: Con
*/
func StoryboardWithIdentifier(storyboardName:String,Identifier:String)-> UIViewController{
let temStoryboard = UIStoryboard(name: storyboardName, bundle: nil)
let vc = temStoryboard.instantiateViewControllerWithIdentifier(Identifier)
return vc
}
}
代碼部分
MySegmentView.Swift
import UIKit
protocol MySegmentViewDelegate:class{
func segmentViewMove(index:Int)
}
class MySegmentView: UIView {
@IBOutlet weak var notice: UIButton!
@IBOutlet weak var huaerDynamic: UIButton!
@IBOutlet weak var myCollection: UIButton!
@IBOutlet weak var love: UIButton!
@IBOutlet weak var pictureCollect: UIButton!
var pageTemp = 0
weak var delegate:MySegmentViewDelegate?
/// 遮蓋層
private lazy var coverLayer: UIView = {[unowned self] in
let cover = UIView(x: 0, y: 38, w:MainW/5, h: 2)
cover.backgroundColor = UIColor.grayColor()
return cover
}()
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.addSubview(self.coverLayer)
}
func moveToPoint(x:CGFloat,page:Int){
//防止多次調用
if page != pageTemp{
self.pageTemp = page
self.changeButtonStat(page + 1)
}
UIView.animateWithDuration(0.1) {
self.coverLayer.frame = CGRectMake(x, 38,MainW/5, 2)
}
}
@IBAction func segmentViewbuttonTouch(sender:UIButton){
self.changeButtonStat(sender.tag)
self.delegate?.segmentViewMove(sender.tag - 1)
}
private func changeButtonStat(buttonTag:Int){
//取消之前按鈕的選中狀態
for i in 1...5{
let button = self.viewWithTag(i) as! UIButton
button.selected = false
}
//標記目標按鈕
let selectButton = self.viewWithTag(buttonTag) as! UIButton
selectButton.selected = true
}
}
MyPageViewContainer.Swift
import UIKit
class MyPageViewContainer: UIView,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,MySegmentViewDelegate{
private weak var segmentView:MySegmentView?
private lazy var vcs = [UIViewController]()
private weak var parentViewController:UIViewController?
@IBOutlet weak var collectionView:UICollectionView!
func setPageView(vcs:[UIViewController],parentViewController:UIViewController,segmentView:MySegmentView){
self.vcs = vcs
self.parentViewController = parentViewController
self.segmentView = segmentView
self.segmentView?.delegate = self
//分別注冊Cell
self.vcs.forEach{
self.collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: String($0))
}
self.collectionView.reloadData()
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return vcs.count
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let vc = self.vcs[indexPath.row]
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(String(vc), forIndexPath: indexPath)
vc.view.frame = bounds
cell.contentView.addSubview(vc.view)
//讓根VC托管這個控制器
vc.didMoveToParentViewController(parentViewController)
return cell
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return self.bounds.size
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets{
return UIEdgeInsetsMake(0, 0, 0, 0)
}
func scrollViewDidScroll(scrollView: UIScrollView) {
let offset = scrollView.contentOffset
let page = Int(offset.x / MainW)
self.segmentView?.moveToPoint(offset.x/5,page:page)
}
func segmentViewMove(index: Int) {
if index >= self.vcs.count{return}
self.collectionView.scrollToItemAtIndexPath(NSIndexPath(forItem: index, inSection: 0), atScrollPosition: UICollectionViewScrollPosition.None, animated: true)
}
}
基本上如果你不嫌煩的話,很多東西都可以用故事板拉線代替~,以上就是這些啦,文章寫的有點Low,不服你來打我啊啊啊啊啊
花早
16年520記
