APP 的编程学习

6.编写Home页面 -PageTitleView 顶部导航

2017-06-06  本文已影响29人  whong736

1.先封装 PageTitleView

1.1自定义View,自定义构造函数

1.2添加子控件,1> 添加UIScrolView 2>设置Titlelabel 3>设置顶部的线段

2.再封装PageContentView

3.处理PageTitleView和PageContentView 的逻辑关系


这个功能是通用功能,放在Main中

1.新建文件

2.UIView  命名为PageTitleView

点击确定,默认进去什么都没有,我们需要对系统的默认构造函数进行扩展编程一个自定义的构造函数。传入一个需要显示的titles数组

重写了自定义的构造函数,需要是先一个方法,点击红色小圆圈,会进行提示,点击Fix-it插入即可

self.titles = titles

回到HomeViewController 

// MARK:闭包定义懒加载的PageTitleView

fileprivate lazy var pageTitleView:PageTitleView= {

在闭包中创建PageTitleView

}()

创建Frame 需要传入一些x,y, width,height参数, 这里需要定义成常量

这里可以进行一次封装

在Tools新建swift文件,如之前的步骤。这里不重复截图。命名为Common

删掉Foundation,导入成UIKit

分别定义状态栏高度常量、导航栏高度常量,选项卡高度,屏幕宽度,屏幕高度

继续回到HomeViewCOntroller编写 PageTitleView的闭包创建

1.搞定titleFrame的创建

//3.定义构建PageTitleView的第二个参数:titles标题数组

let titles = ["推荐","游戏","娱乐","趣玩"]

//4.调用PageTitleView的自定义构造函数来构建PageTitleView

let  titleView =PageTitleView(frame: titleFrame, titles: titles)

//5.返回PageTitleView

return titleView

到设置UI方法中,添加pageTitleView,运行没有看到效果

view.addSubview(pageTitleView)

运行效果:无任何显示

为了能看到pageTitleView ,找到创建pageTitleView创建的函数,添加一个背景颜色

再次运行,还是看不到文字,因我们在PageTitleView的函数并没有编写任何用于展现传入的titles数组内容的代码。

回到自定义的PageTitleView 这个自定义的View中来编写用于显示传入的titles数组的代码。

PageTitleView 编写设置UI的函数,添加UIScrolView

1.扩展PageTitleView,定义设置UI函数,先不编写具体代码

2.调用设置UI函数

3.闭包创建UIScrolView

创建ScrollView

在设置UI的函数中添加ScrollView

需要将传入的titles转化为ScrollView的lable中,定义title转化为lable的方法

并设置lable的属性

定义工具类,UIColor-Extension


在设置lable的属性是需要设置lable的颜色,可以进行一些抽取,在类的顶部定义成常量

继续定义lable的属性

将label添加到ScrollView中

如果直接运行,这时候label还是不会显示到scrollView中的,因为系统会默认给Scrollview添加高度,这里要回到HomeViewController,在构建UI时,不设置ScrollView的内边距

运行效果:

因为之前为了显示能看到,设置了背景颜色为蓝色,这时候可以去掉背景颜色

去掉背景颜色重新运行

这时候title已经加进来了,下一步就是继续给导航栏增加下划线和滑块功能

回到PageTitleView,在原来设置万label的基础上继续设置添加下划线和滑动快

运行效果:显示了下划线,接下来要设置滑动快

设置滑块,通过第一个label来确定相关frame的值

懒加载一个数组

//懒加载titleLabels

fileprivate lazy var titleLabels : [UILabel] = [UILabel]()

在创建lable的地方,添加上  titleLabels.append(label)


运行效果:可以显示被选中的效果

上一篇下一篇

猜你喜欢

热点阅读