简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)

项目介绍:直接上图说明。
效果图:


简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第1张图片
Simulator Screen Shot 2016年12月8日 18.13.19.png

说明图:


简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第2张图片
F710A7DF-DDE3-4CEC-9F8B-E0D57D628BAE.png

详细说明:搜索框不用多说,固定在最顶部,高度固定为44.下面为菜单栏,高度为屏幕宽的四分之一,在做这个菜单栏的布局时,先放一个承载四个按钮的view,然后在view上放四个一样大的按钮,在这里利用控件布局的宽高比约束就可以轻松完成。接着下面就是放一个scrollView,占满剩余的空间。接着在scrollView里放一个tableView,和scrollView的frame(注意:是和frame一样大,不是scrollView的contentSize。就是占满剩余的空间)一样大。这时约束就会报错,接着玩下看。。。。

这个是菜单栏的布局


简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第3张图片
MenuView1.png

这个也是菜单栏的布局


简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第4张图片
MenuView2.png

在没往scrollView里放tableView时没有报约束错误,接着我拖一个tableView进去


简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第5张图片
scroll1.png

// 仅仅是拖一个tableView放到scrollView里,不做任何操作,出现约束错误


简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第6张图片
scroll2.png

// 约束错误截图。两个约束的意思就是scrollView存在不明确的contentSize。


简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第7张图片
scroll3.png

下面,我们来解决scrollView的contentSize问题。
首先:为scollView添加一个承载scrollView内部控件的View.暂时先忽略那个tableView,后面会对其进行布局


简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第8张图片
scroll4.png

做到这里,我们理清一下我们的思绪:scrollView存在一个frame,但是contentSize未确定,scrollView里的View也存在一个frame,而scrollview的contentSize是由其内部的控件大小决定的。所以我们现在给定View的宽度和高度就可以了。

简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第9张图片
scroll5.png

现在scrollView的contentSize大小和scrollView自身的Size一样大,因此,还是不能滚动,我所负责的项目是可以左右滑动,四个屏幕的宽度,所有更改view的宽度高度即可。

简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第10张图片
scroll6.png

到这里,约束总算没问题了

简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第11张图片
scroll7.png

接下来,对tableview进行布局,scrollView里的控件全部放到View视图里面,在这里注意要把view设置为clearColor.这里把tableview的宽度设置为view的四分之一。

简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width)_第12张图片
scroll8.png

demo链接:https://pan.baidu.com/s/1o7ZGjkm

你可能感兴趣的:(简年14: iOS开发-UIScrollView做自动布局详解(Has ambiguous scrollable content width))