使用StoryBoard设置Scrollview的横向滚动不用一行代码

时间:2022-02-02 21:47:20

1).创建一个空工程Single类型的工程,然后打开故事版(StoryBoard)在ViewController上添加scrollview

使用StoryBoard设置Scrollview的横向滚动不用一行代码

2).然后对scrollview添加约束,上下左右全部都是0就可以(注意:在添加上下左右约束的时候一定要取消Constrain to margins ,否则添加完的约束会出现左右各缺少20像素的边距)

使用StoryBoard设置Scrollview的横向滚动不用一行代码

3).添加完成约束后直接更新scrollview的frame.随后在scrollview上添加一个view并且添加约束上下左右也都是0.

使用StoryBoard设置Scrollview的横向滚动不用一行代码

4).在添加完成约束后会发现view上的约束报错误了,不过没事我们继续操作现在做的是scrollview的左右滑动,所以给view添加个横向约束.

使用StoryBoard设置Scrollview的横向滚动不用一行代码

5).在添加完成这个约束后需要给当前的View添加个宽度因为需要让View在ScrollView上可以滑动,所以设置View的宽度为ScrollView的宽度.选中View按住Ctrl键指向ScrollView,然后选择等宽.

使用StoryBoard设置Scrollview的横向滚动不用一行代码

6).在操作完这一步后会发现以前的错误都没有了这时候我们更新下View的frame.最后一步就是设置当前可以滑动的视图是几个ScrollView的宽度.选中当前的View查看添加好的约束的位置找到Equal Width to这个双击打开.然后设置成两倍大小.

使用StoryBoard设置Scrollview的横向滚动不用一行代码

7).最后就可以看到这样的情景,选中的就是当前View的宽度.

使用StoryBoard设置Scrollview的横向滚动不用一行代码

8).现在在上面添加控件,在控制器上添加两个View(这只是测试用添加任何控件都是可以的).最好两个View平行放置好添加约束.然后给View添加约束左边的控件添加上下左约束然后设置和ScrollView等宽,右边控件添加上下左右约束(注意添加左约束的时候一定要确定是对左边控件添加的约束),然后设置和ScrollView等宽.

使用StoryBoard设置Scrollview的横向滚动不用一行代码

使用StoryBoard设置Scrollview的横向滚动不用一行代码

使用StoryBoard设置Scrollview的横向滚动不用一行代码

使用StoryBoard设置Scrollview的横向滚动不用一行代码

9).最后更新这两个View的frame就可以运行查看效果了.

使用StoryBoard设置Scrollview的横向滚动不用一行代码

10).好的结束了这样就可以实现一行代码不写实现ScrollView的设置.

使用StoryBoard设置Scrollview的横向滚动不用一行代码的更多相关文章

  1. 使 WPF 支持触摸板的横向滚动

    微软终于开始学苹果一样好好做触摸板了(就是键盘空格键下面那一大块).然而鉴于以前没有好好做,以至于 WPF 程序甚至都没有对触摸板的横向滚动提供支持(竖向滚动是直接使用了 MouseWheel,汗-- ...

  2. 微信小程序scroll-view横向滚动

    官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效 官方没有给出css代码,横向需要设置两个css属性才行: white-space: nowrap; ----规定段落中的文本 ...

  3. storyBoard方式ScrollView的AutoLayout

    在使用storyboard和xib时,我们经常要用到ScrollView,还有自动 布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说 ...

  4. UIKit - scrollView缩放、滚动

    UIScrollView滚动 三大属性: self.scrollView.pageEnabled = NO  是否分页:n只要将UIScrollView的pageEnabled属性设置为YES,UIS ...

  5. ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题

    ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题     如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...

  6. Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》

    Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...

  7. 使用elementUI滚动条之横向滚动

    用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...

  8. 利用overflow-x实现横向滚动的xiaoguo

    在进行app开发中经常遇到横向滚动的效果,相信很多人都是用js写的吧,其实用css的overflow-x也可以写出啦哦~~~ (1)介绍overflow-x: 1)浏览器支持 所有主流浏览器都支持 o ...

  9. Android 横向列表GridView 实现横向滚动

    Android 横向列表实现,可左右滑动,如下图 1.主界面布局代码:activity_main.xml a.包裹HorizontalScrollView控件是GirdView横向滚动的基本条件b.G ...

随机推荐

  1. iOS,iOS对Android数据互通的规则

    AppStore针对数据互通的规则:在AppStore上架的应用,苹果会按照3:7的比例抽取IAP( In-App Purchase)三成的收入,作为渠道费用 11.2    Apps utilizi ...

  2. CustomerSOList

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. oracle11g 表或视图连接时有可能发生的问题

    ---------背景--------- oracle11g 有2个视图,都有一个id字段,且id字段的值相同 例如:id都有 A01 ,A02 ,A03 --------问题--------- 把2 ...

  4. Spring 设置readonly 事务只读模式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt394 在学习spring事务的时候,发现设置readOnly后不启作用. 查 ...

  5. python3随笔第一天

    1.python 语言没有{},注重书写格式,注重空格的使用,书写python程序一定要注意代码对齐,代码格式对齐是python程序书写的生命: 2.python 分支判断格式  if 条件 :  e ...

  6. SD详解-销售过程

    http://www.sapzh.com/html/Financial/SD/3113.html 7  销售过程 7.1销售执行 目的 作用与目的描述           步骤 操作过程/步骤描述 备 ...

  7. js获取浏览器对象的信息

    js中有一个对象叫 navigator,navigator 对象包含有关浏览器的信息.所有的浏览器都支持该对象. 其中经常用到的是 navigator.userAgent 属性,通常,它是在 navi ...

  8. Android -- Canvas java&period;lang&period;UnsupportedOperationException

    干货 java.lang.UnsupportedOperationException at android.view.GLES20Canvas.clipPath(GLES20Canvas.java:2 ...

  9. Keras2&period;2 predict和fit&lowbar;generator的区别

    1.使用predict时,需设置batch_size 查看keras文档中,predict函数原型:predict(self, x, batch_size=32, verbose=0) 说明:只使用b ...

  10. echarts相关属性设置(1)折线图篇

    option = { tooltip: { trigger: 'axis', // axisPointer: { // type: 'cross', // label: { // background ...