美文网首页iOS DeveloperiOS 开发
iOS Autolayout自动布局仿喜马拉雅FM的首页界面

iOS Autolayout自动布局仿喜马拉雅FM的首页界面

作者: cb6a1e2768d1 | 来源:发表于2016-04-14 00:23 被阅读441次

要看UICollection的...可以不用看了...
这是一篇学习使用Autolayout后的记录
怕自己以后忘记...适配的问题

喜马拉雅FM和蜻蜓FM的布局一个


喜马拉雅FM

实现:


我的效果

有一个需求:
不同尺寸的适配
一个图片、按钮、View根据手机屏幕的大小做等比例缩放适配
还有文字大小也要等比例变化

意思是,喜马拉雅FM在
iPhone4s时Cell距离小、图片小、文字小
iPhone6s时Cell距离变大、图片变大、文字变大

就是这种


Preview

约束操作动画:


约束
简而言之就是使用Equal Widths.
约束解释:

1.wAny | hAny 的情况下
storyboard宽度是600,所以Multiple出现的(150:600)比例就是这样来的
因为是放3个等宽等高的图片(Aspect Ratio),所以应该低于宽度200的,我随便选了宽度150
如果你的图片太小,会出现拉伸图片的情况(当然你可以改变Mode使图片不拉伸)
2.Google告诉我,添加1/3这种除不尽的数值好像在iOS7会崩...我没iOS7环境...谁测试一下麻烦告诉我,解决办法可以用0.333333来代替1/3
3.我是如何计算出1/3和5/3的?居中是3/3,两个控件之间间隔一个1/3。
4.选中控件,按住option键不放,可以看俩控件之间的距离,如下图


按住option键

蜻蜓FM也是一样的。


蜻蜓FM

Cell的高度
根据手机屏幕的高度*百分比
设置高度就是tableview的代理,谁有其它办法?告诉我吧!

#define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return SCREEN_HEIGHT * 0.35;   
}

表头HeadView也可以在storyboard里自定义
拖View控件进上面三个黄红红之间,然后就可以view就可以关联到Controller里了。


HeadView

tableview选择的style是Group,然后返回刚刚自定义的View

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    return self.customHeadView;
}

之后再设置一下section head view的高度就是了。

还要说一下屏幕适配的一个问题,就是文字大小


适配文字大小

Font上可以添加不同尺寸的文字大小
但是看图


size class
只有4s/5/5s/6/6s,并没有plus的,如果选Final Values
有些在4s/5s上面字体看起来还可以,但是到plus和6上面就觉得小了

如果你调大了,在4s、5s上就又觉得字大了...

这个时候...(谁告诉我咋办!你有什么办法?)

问Google...

我找到一个别人写好的...
传送:https://github.com/mmoaay/MBFontAdapter

呵呵...马上下载...

选中要适配的Label,把Class的自定义下载的类填上就行了
如果是button就选button的类


文字适配

就是这么简单...

demo源码传送:
https://github.com/icharlie2014/AutolayoutMul

最后,这个软件为什么都是方图?可是我电脑里没有方图啊。盒盒。

相关文章

网友评论

    本文标题:iOS Autolayout自动布局仿喜马拉雅FM的首页界面

    本文链接:https://www.haomeiwen.com/subject/qgxglttx.html