You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

iOS中如何同时使用自动高度与Scroll View实现登录页横竖屏适配

纯Storyboard实现自适应横竖屏登录页方案
  • 第一步:搭建基础滚动视图层级
    先拖一个UIScrollView到ViewController的根视图上,给ScrollView加四边约束贴满根视图,上下左右约束值都设为0。
    再往ScrollView里拖一个普通UIView作为内容容器,给容器加约束:四边贴满ScrollView的Content Layout Guide,宽度等于ScrollView的Frame Layout Guide宽度,再加一个高度 ≥ ScrollView的Frame Layout Guide高度的约束,将这个高度约束的优先级设置为750(低于默认的1000优先级)。
  • 第二步:配置TextField的自适应高度约束
    给每个TextField添加两条高度约束:
    1. 高度 ≥ 40,优先级保持默认1000(最高优先级,必须满足)
    2. 高度等于根视图高度的0.07倍,优先级设置为750(低于最小高度约束的优先级)
      这套约束会自动生效:当屏幕高度的0.07倍大于40时,自动使用比例高度;当比例值小于40时,自动保持40的最小高度,无需任何代码判断。
  • 第三步:完成内容布局
    按需求往容器View中添加logo、TextField、按钮等所有登录页元素,按正常排版给所有元素添加上下左右约束,确保所有元素的上下约束能撑满容器View的上下边界,让容器可以自动计算内容总高度。

这套方案完全不需要写逻辑代码,系统会自动判断当前屏幕尺寸:

  • 竖屏状态下,比例计算的TextField高度大于40,容器高度撑满全屏,ScrollView不可滚动,内容自动适配全屏
  • 横屏状态下,TextField自动保持40最小高度,如果内容总高度超过当前屏幕高度,容器自动适配内容高度,ScrollView进入可滚动状态,避免输入框被挤压过小

效果参考:
竖屏模式
横屏模式


内容的提问来源于stack exchange,提问作者Rehan Ali Khan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.04 15:39:02