zoukankan      html  css  js  c++  java
  • (五十三)屏幕适配初步

    使用AutoResizing可以快速的完成屏幕的适配,AutoResizing的设置包括外面四条线和内部两条线,外部设置相对位置、内部设置相对大小。


    图中给出了Autoresizing的位置,通过鼠标点击相应位置可以实现对不同位置的设定。

    四周的线如果被选中,代表特定方向与相应的外边距离保持不变,尺寸变化时会进行拉伸。

    内部的线如果被选中,则会针对水平和垂直方向进行拉伸。

    例如要让登陆框与下边的距离不变,可以勾选下面的线,取消上面的线。为了保持登录框宽度不变,可以勾选内部的横线。


    在不同屏幕上的显示效果:

    iPhone4s:


    iPhone6:



    可以发现,勾选了内部横线后,屏幕尺寸变化依然可以填满父视图的水平方向,并且与底部的相对距离不变。


    如果要使用代码改变,通过设定autoresizingMask实现:

    self.view.autoresizingMask
    可以使用的值通过NS_OPTIONS给出:

    typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) {
        UIViewAutoresizingNone                 = 0,
        UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,
        UIViewAutoresizingFlexibleWidth        = 1 << 1,
        UIViewAutoresizingFlexibleRightMargin  = 1 << 2,
        UIViewAutoresizingFlexibleTopMargin    = 1 << 3,
        UIViewAutoresizingFlexibleHeight       = 1 << 4,
        UIViewAutoresizingFlexibleBottomMargin = 1 << 5
    };
    这里使用了移位运算符,是为了保证可以同时设定多个属性,如果要同时设定多个,直接使用或运算即可。


  • 相关阅读:
    小程序学习过程中遇到的问题
    小程序云函数调用webservice接口
    小程序云函数调用http或https请求外部数据
    MQTT Web Toolkit
    mqtt.mini.js 使用
    MQTT 浏览器 mqttws31.min.js
    MQTT.js browser node 均支持
    mqtt开源服务器 EMQX ,客户端MQTTX5.0,使用指南
    vue调试工具vue-devtools安装及使用方法
    Js 类继承 extends
  • 原文地址:https://www.cnblogs.com/aiwz/p/6154198.html
Copyright © 2011-2022 走看看