文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Android 屏幕适配】屏幕适配通用解决方案 ③ ( 自定义组件解决方案 | 获取设备状态栏高度 | 获取设备屏幕数据 )

② ( 自定义组件解决方案 | 需要解决的问题 : 设计稿坐标数据转为屏幕真实坐标数据 | 实现步骤 ) 中 , 提出 如果要实现将 宽高为 720 x 1232 的设计稿 , 对应 手机屏幕中除 状态栏之外的...fieldValue); 完整代码 : /** * 通过反射 com.android.internal.R$dimen 类, 获取其中的某些字段 * @param context 上下文对象...; 通过 DisplayMetrics # heightPixels 可以获取屏幕高度 , 通过 DisplayMetrics # widthPixels 可以获取屏幕宽度 ; DisplayMetrics..., 状态栏在上侧 this.screenWidth = displayMetrics.widthPixels; this.screenHeight..., 状态栏在上侧 this.screenWidth = displayMetrics.widthPixels; this.screenHeight

97810

【Android 屏幕适配】屏幕适配通用解决方案 ⑤ ( 自定义组件解决方案 | 自定义 ViewGroup 组件 onMeasure 方法中计算每个子组件坐标数据 | 自定义组件完整代码 )

② ( 自定义组件解决方案 | 需要解决的问题 : 设计稿坐标数据转为屏幕真实坐标数据 | 实现步骤 ) 中 , 提出 如果要实现将 宽高为 720 x 1232 的设计稿 , 对应 手机屏幕中除 状态栏之外的.../** * 自定义布局中的子组件坐标数据是否需要进行换算 */ static boolean isCaculateFlag = true; /** * 屏幕适配参考宽度.../ 设计稿宽度 */ public final float REFERENCE_WIDTH = 720; /** * 屏幕适配参考高度 / 设计稿高度 *...public float screenWidth; /** * 设备布局实际高度 */ public float screenHeight; /** * 上下文对象..., 状态栏在上侧 this.screenWidth = displayMetrics.widthPixels; this.screenHeight

32110
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Web 隐藏技术：几中隐藏 Web 中的元素方法及优缺点

    可访问性对hidden的影响 从可访问性的角度来看，hidden将元素完全隐藏在web页面之外，因此屏幕阅读器无法访问它。一定要避免使用它来隐藏仅用于表示目的的元素。...除此之外，opacity值为1以外的元素将创建一个新的堆叠上下文。 image.png 在上图中，蓝皮书仅在视觉上隐藏。...Positioning 要隐藏带有position属性的元素，我们应该将它移到屏幕外，并将其大小设置为0(宽度和高度)。个例子就是跳转导航链接。...考虑下面的图: image.png 要将链接放置在屏幕之外，我们应该添加以下内容 css .skip-link { position: absolute; top: -100%; }...-- --> 在上面的例子中，我们有一个带有标签和图标的菜单按钮。为了向屏幕阅读器隐藏图标，添加了aria-hidden。

    5.1K30

    canvas 快速入门

    理解这一点是很重要的，所以我再强调一下：「绘图是在2D渲染上下文中进行的，而不是在canvas元素中进行。」可以通过canvas元素访问和显示2D渲染上下文。...有时候坐标系统的1个单位相当于2个像素（例如，在一些高分辨率显示器中），但是一般的经验法则是1个坐标单位等于1个屏幕像素。 2.2 访问 2D 渲染上下文 暂时不解释这个概念，先来使用一下。...--Insert fallback content here --> 如果现在运行，你不会看到任何内容，因此我们要访问2D渲染上下文，这样就可以开始绘图了。...在上下文变量声明语句之后添加下面这行代码： context.fillRect(40, 40, 100, 100); 刷新页面，你会看到一些令人惊奇的变化，页面上出现一个黑色的矩形，这个矩形是黑色的，因为...❝注意有一个问题可能不太明显，如果你绘制的图形原点位于canvas元素之外，那么它将无法显示在屏幕上。只有当图形的原点或者某些部分位于canvas元素之内时，它才是可见的。

    1.7K20

    超越媒体查询：使用更新的特性进行响应式设计

    如前所述，我们没有将一个图像（通常是较大的高分辨率版本）发送到所有屏幕尺寸并将其缩放到视口宽度，而是指定了一组图像以在特定情况下使用。...除了这个之外，我们定义图像的第二大版本picture-lg.png，并且大小按降序减小，直到最小的版本picture-sm.png。...这使我们可以更细粒度地控制元素在不同响应上下文中的响应方式。 vh是视口高度或可见屏幕高度的首字母缩写。 100vh代表视口高度的100％（取决于设备）。...同样，vw代表视口宽度，这意味着设备的可视屏幕宽度，而100vw则代表视口宽度的100％。...它们只是为开发人员带来更多的可选性，可让我们更好地控制确定元素在不同上下文中的行为。 无论是使用字体大小，分辨率，宽度，焦点还是其他任何东西，我们对用户体验的控制都比以往任何时候都要精细。

    4.1K10

    最佳网页宽度及其实现

    设计网页的时候，确定宽度是一件很苦恼的事。 以minifun.cn为例，根据Google Analytics的统计，半年多以来，访问者的屏幕分辨率一共有81种。...举例来说，一张400px宽的图片，在800px的屏幕上会占据50%的宽度，而在1920px的屏幕上（Windows Vista的流行设置），只占据20%。 2....目前，常见的屏幕分辨率宽度大概有6种：800px，1024px，1280px，1440px，1680px和1920px。...第二种：采用弹性布局（Fluid Width Layout），实现网页宽度的自适应。 第一种方法的优点是，可以根据不同屏幕分辨率，采用完全不同的布局，缺点是要设计和维护多张样式表，比较麻烦。...下文就根据css-tricks上的解决方案，讨论如何实现第二种方法，实际上是很简单的。 ? 3. 首先，网页的缺省宽度，确定为满足1024px宽度的显示器。

    1.4K30

    关于响应式布局，你需要了解的知识点

    在上面的代码中，最核心的代码是如下这段代码，如下代码所示。...举个很简单的例子，我们只想针对打印机或打印机预览使用某些 CSS 样式，那么我们可以这么写： @media print { /* … */ } 如果我们只想对除了打印机或打印机预览之外的其他所有设备适用...定义设备的最大分辨率 grid 用来查询输出设备是否使用栅格或点阵 等等 更多的媒体特性取值可参考：@media - CSS: Cascading Style Sheets | MDN 举个很简单的例子，我们想针对所有屏幕宽度小于...768px的设备应用某些样式，那么我们可以这么写： @media (max-width:768px) { /* … */ } 如果我们想针对所有屏幕宽度小于 768px 并且屏幕高度小于 500px...除此之外，其他的类似于管理后台、工具类站点，使用到响应式布局的需求还是非常少的。 这次关于响应式布局的分享就到此结束，如果你喜欢这篇文章，那就点赞支持转发支持我吧！

    52310

    前端面试之CSS重点概念精讲

    你能所学到的知识点 ❝ 选择器 流、元素 盒模型 元素超出宽度...处理 元素隐藏 层叠规则 块级格式化上下文 元素居中 flex布局 Chrome支持小于12px 的文字 CSS 优化处理 (6个)...:visited：选取已被访问的链接 :active：选择活动链接 :hover ：鼠标指针浮动在上面的元素 伪元素选择器 有连续两个冒号(::)的选择器 ::before : 选择器在被选元素的内容前面插入内容...wrap:换行，第一行在上方。...发生变化导致其他节点联动，需要重新计算布局； 重绘：修改了一些不影响布局的「属性」，比如颜色； 直接合成：「合成层」的transform、opacity修改，只需要将多个图层「再次合并」，而后「生成位图」，最终展示到屏幕上...重绘触发时机 ❝触发回流一定会触发重绘 ❞ 除此之外还有一些其他引起重绘行为： 「颜色」的修改 「文本方向」的修改 「阴影」的修改 浏览器优化机制 由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会

    2.4K30

    【最佳网页宽度及其实现】「建议收藏」

    设计网页的时候，确定宽度是一件很苦恼的事。 以minifun.cn为例，根据Google Analytics的统计，半年多以来，访问者的屏幕分辨率一共有81种。...举例来说，一张400px宽的图片，在800px的屏幕上会占据50%的宽度，而在1920px的屏幕上（Windows Vista的流行设置），只占据20%。 2....目前，常见的屏幕分辨率宽度大概有6种：800px，1024px，1280px，1440px，1680px和1920px。...第二种：采用弹性布局（Fluid Width Layout），实现网页宽度的自适应。 第一种方法的优点是，可以根据不同屏幕分辨率，采用完全不同的布局，缺点是要设计和维护多张样式表，比较麻烦。...下文就根据css-tricks上的解决方案，讨论如何实现第二种方法，实际上是很简单的。 3. 首先，网页的缺省宽度，确定为满足1024px宽度的显示器。

    90810

    bootstrap容器

    固定宽度容器固定宽度容器是一个具有固定宽度的容器，内容将在页面中水平居中显示，并根据屏幕尺寸进行自适应调整。使用.container类可以创建固定宽度容器。...-- 页面内容 -->在上述示例中，我们使用元素创建了一个固定宽度容器，并添加了.container类。...流体容器流体容器是一个占据100%宽度的容器，内容将根据屏幕尺寸自动调整，并充满整个可用空间。使用.container-fluid类可以创建流体容器。...-- 嵌套容器的内容 --> 在上述示例中，我们在一个固定宽度容器内创建了一个嵌套的固定宽度容器。可以根据需要进行多层嵌套。...每个列都使用col-sm-6类，表示在小型屏幕上（如平板电脑）将占据一半的宽度。这意味着在较小的屏幕上，左侧和右侧内容将分别在一行中显示。

    1.1K30

    折叠屏 ② | 华为资深专家深入解读折叠屏单页面布局设计

    单页面布局提供的高度直观、高效实用的导航将有助于确保为用户提供最佳体验，特别是在应用在屏幕可自由切换的折叠屏手机上时 在上篇《折叠屏 ① | 华为资深专家解读折叠屏应用基础体验要求》中，为开发者详细讲解了应用基础体验要求...在展开态下，由于屏幕的特殊形态，因此产生了如下主要的场景差异： 单页面（布局重排）：屏幕宽度变宽产生了版面布局优化的机会，可以在适当的条件下进行页面版式调整（页面内的元素的位置、大小，同类型数量等发生变化...二 单页面布局设计 折叠屏展开态下屏幕宽度变宽，为用户提供了高效便捷的使用体验。动态布局是一种针对设备宽度变化而进行界面版面优化重排的有效变化方式，能够提供良好的体验。...瀑布效果 布局特点：瀑布布局的特点是，利用屏幕的宽度优势，将原来单列线性纵向排布的布局，拓展变为两列/多列的纵向布局。...场景：纯段落文本 / 上图下文 /卡片的布局结构的场景，在其对应的栅格规格下，缩进的规则占用栅格数量进行布局。 案例2:栅格重复效果 说明：对于内容运营类列表信息，适合在大屏上展示更多内容。

    1.5K20

    1.5 万字 CSS 基础拾遗（核心知识、常见需求）

    除此之外，block、inline 和 inline-block 还有什么更具体的区别呢？...层叠上下文 在电脑显示屏幕上的显示的页面其实是一个三维的空间，水平方向是 X 轴，竖直方向是 Y 轴，而屏幕到眼睛的方向可以看成是 Z 轴。...-w566 我们对层叠上下文的第一印象可能要来源于 z-index，认为它的值越大，距离屏幕观察者就越近，那么层叠等级就越高，事实确实是这样的，但层叠上下文的内容远非仅仅如此： z-index 能够在层叠上下文中对元素的堆叠顺序其作用是必须配合定位才可以...； 除了 z-index 之外，一个元素在 Z 轴上的显示顺序还受层叠等级和层叠顺序影响； 在看层叠等级和层叠顺序之前，我们先来看下如何产生一个层叠上下文，特定的 HTML 元素或者 CSS 属性产生层叠上下文...vw/vh vw 和 vh 分别是相对于屏幕视口宽度和高度而言的长度单位： 1vw = 视口宽度均分成 100 份中 1 份的长度； 1vh = 视口高度均分成 100 份中 1 份的长度； 在 JS

    1.4K20

    【OpenGL】九、OpenGL 绘制基础 ( OpenGL 状态机概念 | OpenGL 矩阵概念 )

    ( Projection ) 矩阵 , 模型 ( Model View ) 矩阵 , 当前的颜色 Color , 当前的清除缓冲区颜色 ClearColor , 点的大小 PointSize , 线宽度...当使用 OpenGL 绘制 3D 图形时 , 就会读取当前的状态机参数 , 利用这些状态机进行绘制 , 而我们就在绘制之前设置上述一系列的状态机 , 确保 OpenGL 绘制按照我们设想的进行 ; 在上一篇博客...OpenGL 窗口 | 设置像素格式描述符 | 渲染绘制 ) ★ 中Windows 窗口创建完成后 , 初始化 OpenGL 渲染环境 , 调用 wglCreateContext 方法创建了 OpenGL 上下文对象..., y 指向屏幕上方 , z 穿过屏幕指向你 ; 摄像机默认放在上述 右手坐标系 原点 , 指向 z 的负方向 , 即看屏幕里面的方向 ; 因此绘制的时候 , 如果使摄像机在默认位置时 , 需要将要绘制的模型放在...-0.5f 的位置 , 这样正好暴露在摄像机下 ; 投影 ( Projection ) 矩阵 的作用是将 视口 中的模型 , 投影到二维屏幕 ( 显示器 ) 上 ;

    4.2K01

    1.5 万字 CSS 基础拾遗（核心知识、常见需求）

    除此之外，block、inline 和 inline-block 还有什么更具体的区别呢？...层叠上下文 在电脑显示屏幕上的显示的页面其实是一个三维的空间，水平方向是 X 轴，竖直方向是 Y 轴，而屏幕到眼睛的方向可以看成是 Z 轴。...-w566 我们对层叠上下文的第一印象可能要来源于 z-index，认为它的值越大，距离屏幕观察者就越近，那么层叠等级就越高，事实确实是这样的，但层叠上下文的内容远非仅仅如此： z-index 能够在层叠上下文中对元素的堆叠顺序其作用是必须配合定位才可以...； 除了 z-index 之外，一个元素在 Z 轴上的显示顺序还受层叠等级和层叠顺序影响； 在看层叠等级和层叠顺序之前，我们先来看下如何产生一个层叠上下文，特定的 HTML 元素或者 CSS 属性产生层叠上下文...vw/vh vw 和 vh 分别是相对于屏幕视口宽度和高度而言的长度单位： 1vw = 视口宽度均分成 100 份中 1 份的长度； 1vh = 视口高度均分成 100 份中 1 份的长度； 在 JS

    1.1K30

    最新iOS设计规范七｜10大视觉规范（Visual Design）

    视图可能包含尺寸类型的任意组合： 常规宽度，常规高度 紧凑宽度，紧凑高度 常规宽度，紧凑高度 紧凑宽度，常规高度 iOS会根据内容区域的尺寸类型动态地进行布局调整。...适应上下文的变化 在上下文变化期间确保聚焦在当前内容。内容是APP中优先级最高的。在上下文变化时改变焦点可能会令人迷茫和沮丧，并且可能让用户觉得他们失去了对APP的控制。 避免不必要的布局更改。...避免在屏幕底部和角落放置交互式控件。用户通常在屏幕底部边缘用滑动手势来访问主屏幕和应用切换器等功能，这些手势可能会取消你在该区域实现的自定义手势。而且屏幕的边角可能是用户难以触及的舒适区域。 ?...通常内容应居中且对称地插入，以使其在任何方向上都不会被圆角夹住、不会被传感器外壳隐藏以及不会被访问主屏幕的指示器遮盖。...请勿尝试通过在屏幕顶部和底部放置黑条来隐藏设备的圆角、传感器外壳或用于访问主屏幕的指示器。也不要使用诸如括号、边框、形状或说明文字之类的视觉装饰来引起对这些区域的特别注意。 注意状态栏的高度。

    8.1K30

    Browser 对象所有属性和方法介绍，看这一篇就够了！

    outerwidth 返回窗口的外部宽度。 pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。...属性 属性 描述 availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。 availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。...pixelDepth 返回显示屏幕的颜色分辨率（比特每像素）。 updateInterval 设置或返回屏幕的刷新率。 width 返回显示器屏幕的宽度。...另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。 4. History 对象 History 对象包含用户（在浏览器窗口中）访问过的 URL。...但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。 2.

    87130

    Bootstrap行和列

    -- 列内容 -->在上述示例中，我们使用元素创建了一个行，并添加了.row类。行可以包含一个或多个列，并且总宽度应该等于12列。如果超过12列，那么多余的列会自动换行到下一行。...-- 右侧内容 --> 在上述示例中，我们在一个行中创建了两个列。每个列都使用col-类指定了列的宽度。...在大型屏幕（大于等于lg断点）上，每个列占据4个网格列的宽度（.col-lg-4），即一行同时显示3个列。...在中等屏幕（大于等于md断点，小于lg断点）上，每个列占据6个网格列的宽度（.col-md-6），即一行同时显示2个列。在小于md断点的屏幕上，每个列会自动换行，占据100%的宽度。...通过使用行和列，我们可以创建具有自适应布局的网格系统，以适应不同屏幕尺寸的设备。根据需要，可以调整列的宽度、偏移和排序，以实现所需的布局效果。

    2.1K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券