Swift版-表情键盘展示和仿网易新闻首页左右滑动

Swift仿网易新闻首页左右滑动切换页面

顶部标题左右滑动切换控制器是一种非常用的左右滚动切换效果,几乎每一个APP都有用到,在这里介绍一下我自己封装的一个Swift版本的简单框架;代码中注释相对详细,故文中没有做过多的解释;废话不多少,直接上效果图:

效果图1.png

效果图2.png

一.框架介绍

github地址

Snip20170612_18.png

TJTitleStyle.swift  //控制框架所有显示样式的参数值TJTitleView.swift //顶部标题的处理viewTJContentView.swift //处理所有控制器的viewTJPageView.swift  //控制整体框架的总试图View

TJTitleStyle.swift

    /// 是否是滚动的Title    var isScrollEnable : Bool = false    /// 普通Title颜色    var normalColor : UIColor = UIColor(r: 0, g: 0, b: 0)    /// 选中Title颜色    var selectedColor : UIColor = UIColor(r: 255, g: 127, b: 0)    /// Title字体大小    var font : UIFont = UIFont.systemFont(ofSize: 14.0)    /// 滚动Title的字体间距    var titleMargin : CGFloat = 20    /// title的高度    var titleHeight : CGFloat = 44    /// 是否显示底部滚动条    var isShowBottomLine : Bool = false    /// 底部滚动条的颜色    var bottomLineColor : UIColor = UIColor.orange    /// 底部滚动条的高度    var bottomLineH : CGFloat = 2    /// 是否进行缩放    var isNeedScale : Bool = false    var scaleRange : CGFloat = 1.2    /// 是否显示遮盖    var isShowCover : Bool = false    /// 遮盖背景颜色    var coverBgColor : UIColor = UIColor.lightGray    /// 文字&遮盖间隙    var coverMargin : CGFloat = 5    /// 遮盖的高度    var coverH : CGFloat = 25    /// 设置圆角大小    var coverRadius : CGFloat = 12

TJPageCollectionLayout.swift自定义布局

代码如下,注释比较详尽,不做赘述

    //    在该方法中设定一些必要的layout的结构和初始需要的参数    override func prepare() {        super.prepare()        //0.计算item的宽度和高度        let itemW = ((collectionView?.bounds.width)! - sectionInset.left - sectionInset.right - minimumInteritemSpacing * CGFloat(cols - 1)) / CGFloat(cols)        let itemH = ((collectionView?.bounds.height)! - sectionInset.top - sectionInset.bottom - minimumLineSpacing * CGFloat(rows - 1)) / CGFloat(rows)        //1.获取一共多少个组        let sectionCount = collectionView!.numberOfSections        //2.获取每个组中有多少个item        var prePageCount : Int = 0    //页数        for i in 0..<sectionCount {            let itemCount = collectionView!.numberOfItems(inSection: i)            for j in 0..<itemCount {                //2.1获取cell对应的indexPath                let indexpath = IndexPath(item: j, section: i)                //2.2根据indexPath创建UICollectionViewLayoutAttributes                let attr = UICollectionViewLayoutAttributes(forCellWith: indexpath)                // 2.3.计算j在该组中第几页                let page = j / (cols * rows)                let index = j % (cols * rows)                //2.4设置attrs的frame                let itemY = sectionInset.top + (itemH + minimumLineSpacing) * CGFloat(index / cols)                let itemX = CGFloat(prePageCount + page) * collectionView!.bounds.width +  sectionInset.left + (itemW + minimumInteritemSpacing) * CGFloat(index % cols)                attr.frame = CGRect(x: itemX, y: itemY, width: itemW, height: itemH)                //2.5加入到数组中                cellAttrs.append(attr)            }            prePageCount += (itemCount - 1) / (cols * rows) + 1        }        //计算最大宽度        maxWidth = CGFloat(prePageCount) * collectionView!.bounds.width    }

TJPageCollectionView.swift

创建collectionView显示布局内容,设置代理方法和对外暴露的方法

代理方法

protocol TJPageCollectionViewDateSource : class {   //返回section的个数    func numberOfSections(in pageCollectionView : TJPageCollectionView) -> Int    //返回每个section中item的个数    func pageCollectionView(_ collectionView : TJPageCollectionView, numberOfItemsInSection section : Int) -> Int    //cell    func pageCollectionView(_ pageCollectionView : TJPageCollectionView, _ collectionView : UICollectionView, cellForItemAt indexPath : IndexPath) -> UICollectionViewCell}protocol TJPageCollectionViewDelegate : class {    //cell点击事件处理    func pageCollectionView(_ pageCollectionView : TJPageCollectionView, didSelectorItemAt indexPath : IndexPath)}

二.首页左右滑动调用方法

1.设置显示样式

let style  = TJTitleStyle()//是否可以滚动style.isScrollEnable = true//是否显示下划线style.isShowBottomLine = true//是否显示遮挡试图viewstyle.isShowCover = true

2.初始化方法

/**初始化方法* frame    : 坐标* titles   : 标题数组* style    : 样式* childVcs : 自控制器数组* parentVc : 父控制器*/let pageView = TJPageView(frame: frame, titles: titles, style: style, childVcs: childVcs, parentVc: self)view.addSubview(pageView)

三.底部类似表情键盘布局调用方法

1.初始化

// 1.设置显示样式let style = TJTitleStyle()style.isShowBottomLine = true//2.设置cell布局Layoutlet layout = TJPageCollectionLayout()layout.cols = 7 // 列layout.rows = 3 // 行layout.minimumLineSpacing = 0layout.minimumInteritemSpacing = 0layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)//3.创建collectionViewlet pageCollection = TJPageCollectionView(frame: CGRect(x: 0, y: UIScreen.main.bounds.height - 250, width: UIScreen.main.bounds.width, height: 250), style: style, titles: ["普通", "粉丝"], isTitleInTop: false, layout: layout)pageCollection.delegate = selfpageCollection.dataSource = self//4.注册cellpageCollection.register(nib: UINib(nibName: "EmoticonViewCell", bundle: nil), identifier: kEmoticonCellID)//5.添加到视图中view.addSubview(pageCollection)

2.遵循协议

//MARK: TJCollectionViewDateSourceextension NextViewController : TJPageCollectionViewDateSource{    func numberOfSections(in pageCollectionView: TJPageCollectionView) -> Int {        return 5    }    func pageCollectionView(_ collectionView: TJPageCollectionView, numberOfItemsInSection section: Int) -> Int {        return 40    }    func pageCollectionView(_ pageCollectionView: TJPageCollectionView, _ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kEmoticonCellID, for: indexPath) as! EmoticonViewCell        return cell    }}//MARK: TJPageCollectionViewDelegateextension NextViewController : TJPageCollectionViewDelegate{    func pageCollectionView(_ pageCollectionView: TJPageCollectionView, didSelectorItemAt indexPath: IndexPath) {        print(indexPath)    }}

框架代码中可能还有不足之处,还望大神多多指教.

菜鸟一枚,多多交流.

github地址