项目介绍:直接上图说明。
效果图:
说明图:
详细说明:搜索框不用多说,固定在最顶部,高度固定为44.下面为菜单栏,高度为屏幕宽的四分之一,在做这个菜单栏的布局时,先放一个承载四个按钮的view,然后在view上放四个一样大的按钮,在这里利用控件布局的宽高比约束就可以轻松完成。接着下面就是放一个scrollView,占满剩余的空间。接着在scrollView里放一个tableView,和scrollView的frame(注意:是和frame一样大,不是scrollView的contentSize。就是占满剩余的空间)一样大。这时约束就会报错,接着玩下看。。。。
这个是菜单栏的布局
这个也是菜单栏的布局
在没往scrollView里放tableView时没有报约束错误,接着我拖一个tableView进去
// 仅仅是拖一个tableView放到scrollView里,不做任何操作,出现约束错误
// 约束错误截图。两个约束的意思就是scrollView存在不明确的contentSize。
下面,我们来解决scrollView的contentSize问题。
首先:为scollView添加一个承载scrollView内部控件的View.暂时先忽略那个tableView,后面会对其进行布局
做到这里,我们理清一下我们的思绪:scrollView存在一个frame,但是contentSize未确定,scrollView里的View也存在一个frame,而scrollview的contentSize是由其内部的控件大小决定的。所以我们现在给定View的宽度和高度就可以了。
现在scrollView的contentSize大小和scrollView自身的Size一样大,因此,还是不能滚动,我所负责的项目是可以左右滑动,四个屏幕的宽度,所有更改view的宽度高度即可。
到这里,约束总算没问题了
接下来,对tableview进行布局,scrollView里的控件全部放到View视图里面,在这里注意要把view设置为clearColor.这里把tableview的宽度设置为view的四分之一。