先上效果图,如果你觉得还不错的话,请往下喵多几眼~喵?
效果图.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记
网友评论