iOS UI设计实战

本文主要记录了本人在使用Storyboard时遇到的一些问题以及解决方案,主要涉及到ScrollView,TableView,CollectionView,导航栏,动态变化,适配等问题。

我们的目标,完成设计师所提供的UI设计


最终效果

Scorllview

要下滑的 ,为了更方便的查看整个view
可以把控制器设置为任意尺寸的

Freeform

这样可以直接把scrollview里的东西放进去
要scrollview(设置好四边的约束) 然后再在里面设置一个view (设置好约束)根据滑动方向,设置x对齐或者y对齐(不设置就可以随便动),然后设置好contentsize!! 比如用一个高度约束(下滑) 才可以使用 必须要确定contentsize。背景颜色也是由contentview决定的
加入scrollview的组件(看关系)才能被滑动,否则是固定的!

Gallery所在的view没有加入scrollview中,所以可以保持不动,然后再提供一个透明度,即可实现下图的效果


效果

设置透明度之后状态栏效果


调节前

调节view的背景颜色即可(默认default为黑?)


调节后

圆角阴影设置

myChart.layer.masksToBounds = false
myChart.layer.cornerRadius = 10
myChart.layer.shadowColor = UIColor.black.cgColor
myChart.layer.shadowOpacity = 0.8
myChart.layer.shadowOffset = CGSize(width: 0, height: 3)
并没有圆角

这是没有圆角的!
masksToBounds必须设为false 否则没有阴影 (默认就是false)
masksToBounds:是类CALayer的属性,如果设置为yes,则其子view不显示超出父View layer的部分,因此,对于imageview圆角和阴影不能兼得。(需要外加shadowview)


对整个view设置阴影圆角

对包含label和imageview的整个视图设置阴影时,其子视图都会有阴影。所以要在这个view里再放一个shadowview和子控件并列,如果把testView.layer.masksToBounds = true并把外面的view设置圆角。

目前效果

但这样阴影也无法显示,因为阴影也是存在图层之外的(masksToBounds = true会导致无法显示阴影)

于是考虑masksToBounds = false然后对里面的imageview加圆角


目前效果

所以考虑对图片进行单独设置圆角(上面两个角)

//设置左上和右上圆角 ios11+
myChart.layer.cornerRadius = 10
myChart.layer.masksToBounds = true
myChart.layer.maskedCorners = [CACornerMask.layerMinXMinYCorner , CACornerMask.layerMaxXMinYCorner]
完成

为什么圆角和阴影一起的时候设置为false圆角还能显示?单独圆角的时候不是要true才能保证圆角的显示吗
imageView要设置圆角必须设置true,而普通的view、button等是可以不设置的 true false都可以显示圆角。阴影和圆角都可以单独设置,但是不能一起因为一个true一个false。
可以理解为 imageview 外面是一个view 里面是一个image,false的话 图肯定会遮掉圆角。


测试

因此imageview涉及到阴影的地方,可以外加一个shadowview来做。

Tableview

设置好的效果

注意自定义的cell需要设置给cell而不是view


cell
消除分割线

要有shadow的话要注意,shadow不能太大 ,如果和cell一样大 ,那都看不见效果了。

最终效果

静态tablevie:一定要在tableviewcontroller里才能用,否则会报错


静态tableView
静态cell

阴影直接加在tableview上,加在cell上容易导致cell的阴影互相影响。

dataSource和delegate

view中的tableview要设置这个,直接拉线到这个vc就行。

设置高度

设置好高度不然内容显示不全

Collectionview

实现一个可以横向滑动的Collectionview。
build时,item必须是1。


item设置

设置item可以方便你调试tableview的大小


效果

注意scroll和tableview一起用的时候要注意,scroll的containview的大小要和tableview底边界一样,不然会有留白的地方
direction控制滚动的方向!

设置代理
重用cell
注意,collection数据量过少可能会导致不能滑动!
(后来发现是由于collectionview设置的太长了 其实只要和屏幕一样大小就可以了 数据量没有超过collectionview的话是不能滑动的)
另外 storyboard更改 在真机上是不能看见改变的 模拟器可以(好像是中文汉化的问题)

collectionview要实现的函数
func collectionView(_ collectionView:UICollectionView, numberOfItemsInSection section: Int)->Int{}
func collectionView(_ collectionView:UICollectionView, cellForItemAt indexPath: IndexPath)->UICollectionViewCell{}
不同设备使用发现cell的宽度由于是sb中设置的,是无法改变的,任何设备都一样,所以导致效果不好,于是想更改适配,发现这个width是get-only

无法更改width

可以使用flowlayout进行重新布局,针对不同设备进行选择

//重新布局一下 可以改变cell的宽度 否则适配很有问题
flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSize(width: screenwidth - 30 , height: 256)
flowLayout.scrollDirection = .horizontal
collectionView.setCollectionViewLayout(flowLayout, animated: true)

日期处理

根据当前时间和存储的时间,显示Today Yesterday xx days ago或者具体日期

//处理时间 "2018-06-08-18:05"
        var splitedArray0 = data.mydate.components(separatedBy: "-")
        let year = Int(splitedArray0[0])!
        let month = Int(splitedArray0[1])!
        let day = Int(splitedArray0[2])!
        let time = splitedArray0[3]
        //获取当前时间
        let calendar = Calendar.current
        let date = Date()
        let dateComponents = calendar.dateComponents([.year,.month, .day, .hour,.minute,.second], from: date)
Calendar.current和dateComponents

进行分割然后对比

设置可以动态变化的View

想设置根据数值变化的矩形,首先在IB里要提供足够的约束 不然可能默认位置无法确认导致无法显示。


效果

发现更改frame的size没有用,然后发现可以把约束给拖进去,然后约束有一个constant值,可以直接进行修改


修改约束constant值
ios9 以前获取高度和宽度
let screenh = UIScreen.mainScreen().applicationFrame.size.height
let screenw = UIScreen.mainScreen().applicationFrame.size.width
ios9 以后获取高度和宽度
let screenh = UIScreen.main.bounds.size.height
let screenw = UIScreen.main.bounds.size.width
根据数据计算长度

CGFloat不能和Float进行乘法,要转换为CGFloat,非单纯数值的需要进行转换然后比较。

最终效果:


效果

Searchbar

样式

设置searchbar的样式为Minimal则实际没有边框线(不显示背景)


效果

设置placehold

Placeholder效果,直接设置text的话相当于提前输入进去


效果

约束设置

向右约束结果

最好往左约束,如果往右约束,那么如果变成三位数,一位数,结果的起始位置都是不一样的,所以要从左约束


向左约束

修改结果

导航

大标题

导航栏大标题,会使导航栏变厚


大标题设置

效果

右边没设置detail的时候会觉得很奇怪 因为Detail那行还是在的

传递数据

segue中传递数据,这时候直接访问timeLabel会是nil,会崩溃,所以还是要通过自定一个属性来传

最终效果

效果

效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,142评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,298评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,068评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,081评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,099评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,071评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,990评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,832评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,274评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,488评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,649评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,378评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,979评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,625评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,643评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,545评论 2 352

推荐阅读更多精彩内容

  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,369评论 8 265
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,096评论 1 32
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,979评论 3 119
  • 读书打卡第4天 《十几岁孩子的正面管教》第一章《怎样知道你的孩子进入了青春期》第14到18页今天读了第一章的最后3...
    小羊肖恩杨阅读 96评论 0 0
  • 今天是感恩的一天。 1 晨间起来,老公已出门。来到阳台,看到晾晒的衣服还在滴水,瞬间被幸福包围。何时他已出门我不得...
    琴素亲子阅读 311评论 3 4