技术好文共享:第七章美化DetailView界面

简介: 技术好文共享:第七章美化DetailView界面

本项目是《beginning iOS8 programming with swift》中的项目学习笔记==》全部笔记目录


------------------------------------------------------------------------------------------------------------------


1. 往DetailViewController里拖一个Tabel View控件,设置prototype cells为1,将imageView控件在文档视图中拖到Table View里面,作为Header,设置表格的数据源和代理。


2. Aspect Fit等图片设置原理如下图:


3. 往原型Cell里拖入两个Label控件,分别设置文字为Name和Value。并新建一个自定义UITableViewCell类DetailTableViewCell,并定义两个成员变量,关联到控件上。


4. 修改DetailViewController中的成员变量为Restaurant,实现表格数据源方法(貌似这里不用连线tableView到IBOutlet):


func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {


let cell = tableView.dequeueReusableCellWithIdentifier("DetailTableCell", forIndexPath: indexPath) as DetailTableViewCell


switch indexPath.row {


case 0:


cell.nameLabel.text = "Name"


cell.valueLabel.text = restaurant.name


case 1:


cell.nameLabel.text = "Type"


cell.valueLabel.text = restaurant.type


case 2:


cell.nameLabel.text = "Location"


cell.valueLabel.text = restaurant.location


case 3:


cell.nameLabel.text = "Been here"


cell.valueLabel.text = restaurant.isVisited ? "I've been here" : "No"


default:


cell.nameLabel.text = ""


cell.valueLabel.text = ""


}


// 设置单元格背景色


cell.backgroundColor = UIColor.clearColor()


// 清除多余的表格行


tableView.tableFooterView = UIView(frame: CGRectZero)


// 自定义单元格分割线


tableView.separatorColor = UIColor.orangeColor()


return cell


}


效果图:


5. 自定义导航栏主题


在didFinishLaunchingWithOptions方法中自定义导航栏,也可以自定义一个导航控制器类,并在initialize方//代码效果参考:http://www.lyjsj.net.cn/wx/art_23989.html

法中设置导航栏主题

// 设置导航栏背景色


UINavigationBar.appearance().barTintColor = UIColor.orangeColor()


// 设置导航栏上面Item的颜色


UINavigationBar.appearance().tintColor = UIColor.whiteColor()


// 设置导航栏文字字体


UINavigationBar.appearance().titleTextAttributes = 【NSForegroundColorAttributeName: UIColor.whiteColor(), NSFontAttributeName: UIFont.systemFontOfSize(22.0)】


6. 设置返回按钮文字为空(viewDidLoad):


self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .Plain, target: nil, action: nil)


7. 设置导航栏标题(Detail的viewDidLoad):


self.title = restaurant.name


8. 设置滑动隐藏导航栏。可以在storyboard中设置OnSwipe勾上,但是这样会对全局的导航栏生效,所以如果只想Restaurant表格滑动隐藏导航栏而Detail表格滑动不隐藏,最好是在代码里设置。可以在哪儿设置合适呢?viewDidLoad中吗?如果在Restaurant中设置true,在Detail中设置false,但是导航后并不能按照预期的变化。因为viewDidLoad方法只会在界面初次加载的时候执行一次。因此,在Restaurant控制器和Detail控制器的viewWillAppear方法中分别执行:


override func //代码效果参考:http://www.lyjsj.net.cn/wx/art_23987.html

viewWillAppear(animated: Bool) {

super.viewWillAppear(animated)


self.navigationController?.hidesBarsOnSwipe = true


}


override func viewWillAppear(animated: Bool) {


super.viewWillAppear(animated)


self.navigationController?.hidesBarsOnSwipe = false


self.navigationController?.setNavigationBarHidden(false, animated: true)


}


9. 现在导航栏文字颜色是白色,但是状态栏颜色是黑色,需要处理一下。


9.1 如果是修改一个控制器的状态栏:


override func preferredStatusBarStyle() ->UIStatusBarStyle {


return .LightContent


}


9.2 如果是修改整个应用程序的状态栏:


1. 修改View controller-based status bar appearance设置为NO


  2. 在didFinishLaunchingWithOptions方法中:


UIApplication.sharedApplication().statusBarStyle = .LightContent

相关文章
|
3月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
351 1
|
3月前
|
UED
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
73 0
|
4月前
|
前端开发
网页设计04 WEB端按钮设计技巧,交互规范参考资料,点击事件,什么是3:1 ,3:1 的介绍,网页设计牵扯的知识整理成口诀
网页设计04 WEB端按钮设计技巧,交互规范参考资料,点击事件,什么是3:1 ,3:1 的介绍,网页设计牵扯的知识整理成口诀
|
6月前
|
移动开发 算法 数据可视化
🚀独立开发,做的页面不好看?我总结了一些工具与方法🚀
🚀独立开发,做的页面不好看?我总结了一些工具与方法🚀
|
6月前
|
JavaScript Java 测试技术
基于微信小程序的插画共享平台的设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序的插画共享平台的设计与实现(源码+lw+部署文档+讲解等)
|
11月前
|
C# 数据库
C#桌面文案小工具 ,详细带解说图(带源码)
C#桌面文案小工具 ,详细带解说图(带源码)
|
编解码 数据可视化 定位技术
Axure交互大全 全交互案例模板及视频教程
Axure交互大全 全交互案例模板及视频教程
|
小程序 UED 开发者
小程序开发必备功能的吐血整理【个人中心界面样式大全】
小程序开发必备功能的吐血整理【个人中心界面样式大全】
675 1
小程序开发必备功能的吐血整理【个人中心界面样式大全】
|
小程序 API Android开发
小程序开发-第三章第四节点击查看大图,保存壁纸-全栈工程师之路-中级篇
小程序开发-第三章第四节点击查看大图,保存壁纸-全栈工程师之路-中级篇
166 0
小程序开发-第三章第四节点击查看大图,保存壁纸-全栈工程师之路-中级篇
|
SQL 开发框架 小程序
小程序开发-第二章第二节小程序电影卡片模板-全栈工程师之路-中级篇
小程序开发-第二章第二节小程序电影卡片模板-全栈工程师之路-中级篇
107 0
小程序开发-第二章第二节小程序电影卡片模板-全栈工程师之路-中级篇