iOS Widget小组件大小和位置(透明组件)

最新推荐文章于 2024-03-09 18:37:45 发布
最新推荐文章于 2024-03-09 18:37:45 发布
阅读量6.5k 收藏 8
点赞数 3
分类专栏： swift 文章标签： ios swift swiftUI widget
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzhnzmyz/article/details/119872090
版权

小组件大小和位置

## size

小组件获取组件大小
1.在Widget获取比较容易，通过context.displaySize获取

	context.displaySize
	
	struct SmallProvider: IntentTimelineProvider {
    func getTimeline(for configuration: SmallIntent, in context: Context, completion: @escaping (Timeline<SmallEntry>) -> Void) {
    	print(context.displaySize)

 	func placeholder(in context: Context) -> SmallEntry {
        print(context.displaySize)
    }

    func getSnapshot(for configuration: SmallIntent, in context: Context, completion: @escaping (SmallEntry) -> ()) {
        print(context.displaySize)
    }

2.在主程序获取

机型屏幕尺寸(pt)小组件(pt)中组件(pt)大组件(pt)
5 / 5s /SE320x568140x140291x140291x310
6 / 6s / 7 / 8 / SE2375x667148x148321x148321x324
6p / 6sp / 7p / 8p375x812155x155329x155329x345
x / xs / 11pro / 12mini390x844158x158338x158338x354
xr / xsmax / 11 / 11promax414x736157x157348x157348x351
12 / 12pro414x896169x169360x169369x379
12promax428x926170x170364x170364x382

 

小号组件坐标

机型屏幕尺寸(pt)左上(CGPoint)右上(CGPoint)左中(CGPoint)右中(CGPoint)左下(CGPoint)右下(CGPoint)
5 / 5s /SE320x568(x:14,y:30)(x:165,y:30)(x:14,y:200)(x:165,y:200)(x:-,y:-)(x:-,y:-)
6 / 6s / 7 / 8 / SE2375x667(x:27,y:30)(x:200,y:30)(x:27,y:206)(x:200,y:206)(x:27,y:382)(x:200,y:382)
6p / 6sp / 7p / 8p375x812(x:23,y:71)(x:197,y:71)(x:23,y:261)(x:197,y:261)(x:23,y:451)(x:197,y:451)
x / xs / 11pro / 12mini390x844(x:26,y:77)(x:206,y:77)(x:26,y:273)(x:206,y:273)(x:26,y:469)(x:206,y:469)
xr / xsmax / 11 / 11promax414x736(x:33,y:38)(x:224,y:38)(x:33,y:232)(x:224,y:232)(x:33,y:426)(x:224,y:426)
12 / 12pro414x896(x:27,y:76)(x:218,y:76)(x:27,y:286)(x:218,y:286)(x:27,y:496)(x:218,y:496)
12promax428x926(x:32,y:82)(x:226,y:82)(x:32,y:294)(x:226,y:294)(x:32,y:506)(x:226,y:506)

 

中号组件坐标

机型屏幕尺寸(pt)上(CGPoint)中(CGPoint)下(CGPoint)
5 / 5s /SE320x568(x:14,y:30)(x:14,y:200)(x:-,y:-)
6 / 6s / 7 / 8 / SE2375x667(x:27,y:30)(x:27,y:206)(x:27,y:382)
6p / 6sp / 7p / 8p375x812(x:23,y:71)(x:23,y:261)(x:23,y:451)
x / xs / 11pro / 12mini390x844(x:26,y:77)(x:26,y:273)(x:26,y:469)
xr / xsmax / 11 / 11promax414x736(x:33,y:38)(x:33,y:232)(x:33,y:426)
12 / 12pro414x896(x:27,y:76)(x:27,y:286)(x:27,y:496)
12promax428x926(x:32,y:82)(x:32,y:294)(x:32,y:506)

 

大号组件坐标

机型屏幕尺寸(pt)上(CGPoint)下(CGPoint)
5 / 5s /SE320x568(x:14,y:30)(x:-,y:-)
6 / 6s / 7 / 8 / SE2375x667(x:27,y:30)(x:27,y:206)
6p / 6sp / 7p / 8p375x812(x:23,y:71)(x:23,y:261)
x / xs / 11pro / 12mini390x844(x:26,y:77)(x:26,y:273)
xr / xsmax / 11 / 11promax414x736(x:33,y:38)(x:33,y:232)
12 / 12pro414x896(x:27,y:76)(x:27,y:286)
12promax428x926(x:32,y:82)(x:32,y:294)

代码

以下是测量的小组件在屏幕上的几个位置坐标，小组件大小和位置都可以通过以下数据换算得到

数组结构为[X1,X2,X3,Y1,Y2,Y3]

let deviceInfos:[String:Array<Int>] = [
    "320x568":[14,165,305,30,200,370], // 5 5s SE。小组件只能放4个，中组件2个，大组件1个
    "375x667":[27,200,348,30,206,382], // 6 6s 7 8 SE2
    "375x812":[23,197,352,71,261,451], // x xs 11pro 12mini
    "390x844":[26,206,364,77,273,469], // 12 12pro
    "414x736":[33,224,381,38,232,426], // 6p 6sp 7p 8p
    "414x896":[27,218,387,76,286,496], // xr xsmax 11 11promax
    "428x926":[32,226,396,82,294,506], // 12promax
]
获取组件宽度

小组件尺寸为X3-X2的正方形
中组件宽度为X3-X1，高度等同小组件 X3-X2
大组件宽度为X3-X1, 高度为(Y2-Y1) + (X3-X2)

小组件高度为X3-X2

func GetWidgetSize(_ widgetType:WidgetSizeEnum) -> CGSize {
    let wxh:String =  "\(Int(WIDTH))x\(Int(HEIGHT))"
    
    // TODO 外层做异常处理。告知用户 “您的机型暂不支持透明组件”
    if !deviceInfos.keys.contains(wxh) {
        return CGSize(width: -1, height: -1)
    }
    switch widgetType {
    case .small:
        let smallWidth = deviceInfos[wxh]![2] - deviceInfos[wxh]![1]
        return CGSize(width: smallWidth, height: smallWidth)
    case .medium:
        let mediumWidth = deviceInfos[wxh]![2] - deviceInfos[wxh]![0]
        let mediumHeight = deviceInfos[wxh]![2] - deviceInfos[wxh]![1]
        return CGSize(width: mediumWidth, height: mediumHeight)
    case .large:
        let largeWidth = deviceInfos[wxh]![2] - deviceInfos[wxh]![0]
        let largeHeight = deviceInfos[wxh]![4] - deviceInfos[wxh]![3] + deviceInfos[wxh]![2] - deviceInfos[wxh]![1]
        return CGSize(width: largeWidth, height: largeHeight)
    }
}

enum WidgetSizeEnum {
    case small
    case medium
    case large
}
获取小组件位置

320x568的机型同屏只有4个位置能放小组件，其他尺寸比例的机型为6个

//小组件位置枚举
enum WidgetSizeEnum {
    case topLeft
    case topRight
    case middleLeft
    case middleRight
    case bottomLeft
    case bottomRight
}
// 小组件。获取在不同位置的x,y坐标
func GetSmallWidgetPos(_ widgetPos:SWidgetPosEnum)->CGPoint{
    let wxh:String =  "\(Int(WIDTH))x\(Int(HEIGHT))"
    // TODO 外层做异常处理。告知用户 “您的机型暂不支持透明组件”
    if !deviceInfos.keys.contains(wxh) {
        return CGPoint(x: -1, y: -1)
    }
    
    if(wxh == "320x568") {
        switch widgetPos {
        case .topLeft:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![3])
        case .topRight:
            return CGPoint(x: deviceInfos[wxh]![1], y: deviceInfos[wxh]![3])
        case .middleLeft, .bottomLeft:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![4])
        case .middleRight, .bottomRight:
            return CGPoint(x: deviceInfos[wxh]![1], y: deviceInfos[wxh]![4])
    } else {
        switch widgetPos {
        case .topLeft:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![3])
        case .topRight:
            return CGPoint(x: deviceInfos[wxh]![1], y: deviceInfos[wxh]![3])
        case .middleLeft:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![4])
        case .middleRight:
            return CGPoint(x: deviceInfos[wxh]![1], y: deviceInfos[wxh]![4])
        case .bottomLeft:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![5])
        case .bottomRight:
            return CGPoint(x: deviceInfos[wxh]![1], y: deviceInfos[wxh]![5])
        }
        
    }
}

 

获取中组件位置

320x568的机型同屏只有上下2个位置能放中组件，其他尺寸比例的机型为上中下3个

//中组件位置枚举
enum WidgetSizeEnum {
    case top
    case middle
    case bottom
}
// 中组件。获取在不同位置的x,y坐标
func GetMiddleWidgetPos(_ widgetPos:MWidgetPosEnum)->CGPoint{
    let wxh:String =  "\(Int(WIDTH))x\(Int(HEIGHT))"
    // TODO 外层做异常处理。告知用户 “您的机型暂不支持透明组件”
    if !deviceInfos.keys.contains(wxh) {
        return CGPoint(x: -1, y: -1)
    }
    
    if(wxh == "320x568") {
        switch widgetPos {
        case .top:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![3])
        case .middle, .bottom:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![4])
    } else {
        switch widgetPos {
        case .top:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![3])
        case .middle:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![4])
        case .bottom:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![5])
        }
    }
}

 

获取大组件位置

320x568的机型同屏只有1个位置能放大组件，其他尺寸比例的机型为上中下2个

//大组件位置枚举
enum WidgetSizeEnum {
    case top
    case bottom
}
// 大组件。获取在不同位置的x,y坐标
func GetLargeWidgetPos(_ widgetPos:LWidgetPosEnum)->CGPoint{
    let wxh:String =  "\(Int(WIDTH))x\(Int(HEIGHT))"
    // TODO 外层做异常处理。告知用户 “您的机型暂不支持透明组件”
    if !deviceInfos.keys.contains(wxh) {
        return CGPoint(x: -1, y: -1)
    }
    
    if(wxh == "320x568") {
        return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![3])
    } else {
        switch widgetPos {
        case .top:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![3])
        case .bottom:
            return CGPoint(x: deviceInfos[wxh]![0], y: deviceInfos[wxh]![4])
        case .unknown,.alpha1:
            return CGPoint(x: 0, y: 0)
        }
    }
}

 
 
 

时光不染
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
iOS Widget的简单实现案例
04-06
作者japho，源码WidgetDemo，一个基于iOS10的控件案例，非常简单的，需要的可以了解一下。 #iOS Widget的简单实现 demo 自iOS8之后，苹果支持了扩展（Extension）的开发，开发者可以通过系统提供给我们的扩展接入点 (Extension point) 来为系统特定的服务提供某些附加的功能。今年iOS10的推出，让Widget扩展应用渐渐的火了起来，地位得到重大的提升，从这也可以看出苹果对他的重视，今天我们就来一起学习下Widget，来实现一个简单的扩展程序。
ios的屏幕小组件学习文档
最新发布
03-22
iOS 的屏幕小组件 Widget 自 iOS 14 发布以来已经有 3 年时间了，目前国内/海外很多的 App 已经支持了，如果你还没有做过小组件，那就 out 了，我准备花几篇文章详细讲讲如何开发小组件。 请注意，开发小组件必须使用 SwiftUI，如果你还没接触过 SwiftUI，可以先去苹果的官方教程学习一些基础知识。如果你一直在观望是不是需要开始学习 SwiftUI，那么这就是一个很好的机会
一文掌握android小组件（AppWidget）开发
ayugezhoubing的博客
03-09 1677
一文掌握android桌面小组件开发
Scriptables:iOS14桌面组件神器（Scriptable）开发框架，教程，精美脚本分享
03-16
「小件件」开发框架 iOS小组件快速开发框架/模板/小组件原始码 :backhand_index_pointing_right: 适用于 介绍 这是一个方便开发者在计算机上开发，测试，预览iOS小组件（Scriptable）的开发框架通过简单安装，就可以获得一个舒适的Scriptable脚本开发环境，支持语法高亮，自动补全，实时同步测试预览。并且该开发框架封装了很多常用的操作接口，让开发者专注数据解析+小组件UI设计，大大节省了开发时间！ 开始 首先，我们配置电脑开发环境： 下载安装VSCode编辑器 下载本项目的v2-dev分支zip或代码： git clone -b v2-dev https://github.com/im3x/Scriptables.git （ :warning:注意要加-b参数指定分支） VSCode打开代码目录，进入终端，运行安装依赖命令： npm install 安装好依赖，开启开发服务命令： npm start :warning:提示：wi
Scriptable_share:自用 Scriptable 软件美化 ios14 小组件脚本分享
05-28
Scriptable_share 自用 Scriptable 软件美化 ios14 小组件脚本分享 Health_calendar 丁香健康日历 gushici 随机一句古诗词 image_widget 小组件显示一张自定义图片 is_today_work 今天上班吗小组件 isFriday 今天是周五吗小组件 big_info 大组件显示问候语、时间、日历事件和天气
动态Widget（小组件、实时活动）.zip
03-06
动态Widget（小组件、实时活动）.zip
iOS截取特定区域的图片，然后拼接起来，可在图片上定制任意控件
Onlyone的博客
07-28 3137
基于这样的截图 分享之后 , 效果图分享之后 分析：这是由三部分组成的1.headerImageView(头部的控件)2.midView(中间的控件)3.footerImageView(下部的控件) 下面来上代码 #import "ViewController.h"@interface ViewController ()<UIActionSheetDel
swift 获取控件位置 大小
weixin_30912051的博客
05-12 672
varSearchBtn = uibutton() SearchBtn.frame.origin.x //获取坐标x SearchBtn.frame.origin.Y // 获取坐标Y SearchBtn.frame.size.width //获取宽度 SearchBtn.frame.size.heigth //获取高度 转载于:https://www.cnblogs.co...
iOS14 Widget开发踩坑（四）伪透明的实现和其他研究
写程序的柠檬精
12-24 3309
iOS14 Widget开发踩坑（四）伪透明的实现和其他研究前言分析实施暗黑模式切换其他问题的研究：去除小组件的名字本篇参考文献小组件参考文献总结 前言 Widgets A widget elevates key content from your app and displays it where people can see it at a glance on iPhone, iPad, and Mac. Useful and delightful, widgets can also help peo
微信小程序文件构成及属性
happy_1212的博客
12-04 1138
1.小程序的文件构成 小程序(MiniProgram)在不分包的情况下最大2MB(是所有小程序内所以资源(包括图片、音频、视频等)的字节数)；在分包的情况下最大20MB 小程序代码由以下文件类型构成： .json文件 .json文件是静态配置信息文件 app.json，全局配置信息文件 page.json，页面配置信息文件，页面配置优于全局配置。 .wxml文件 .wxml文件在小程序开发中充当HTML角色，.wxml文件用于实现微信页面的结构。 .wxml文件中不能使用任何的HTML标签，只能使用小程
iOS常用控件尺寸
m_miao
09-05 2281
【常识介绍】 px：像素pt：独立像素 / point / 点 iOS 开发中用到的单位 pt 是独立像素的意思，它是绝对长度，不随屏幕像素密度变化而变化（和我们日常用到的毫米、厘米是一个意思，只是它要小得多），在非视网膜的 iPhone 上（iPhone 3G），苹果规定 1px=1pt，也就是说 pt 和像素点是一一对应的。但随着 iPhone 4 的到来，高分屏出现了（视网膜屏），这个时...
Widget小组件
qq_25303213的博客
01-16 3485
Widget小组件开发须知 1、只能使用SwiftUI进行开发，所以需要SwiftUI和Swift基础 2、Widget只支持3种尺寸systemSmall(2x2)、systemMedium(4x2)、systemLarge(4x4) 3、默认点击Widget打开主应用程序 4、需要在项目中进行App Groups的设置才能使其与主程序互通数据
@MapKey的使用
热门推荐
Mark
10-28 1万+
使用场景 我这里的业务场景是：有字典表，其他表的很多字段都需要去字典表中查询，由于字典表的维护方便统一，所以将其他表对字典值的查询单独抽出来，那么我们可以将每次需要查询字典值的id拿到一起，直接查询字典信息，用map接收字典的内容，将id做为key，很方便拿到。 dao层 @MapKey("id") Map<String,UserInfoEntity> selectUser(); mybatis的xml文件 <select id="selectUser" resultMap="us
android桌面小组件开发_全网超火的iOS小组件玩法，轻松美化桌面巨好看
weixin_42513365的博客
12-29 2286
最近小雷发现，iOS 14的小组件突然火了起来，网友们玩得不亦乐乎。在微博上有4.4万的讨论、2.3亿的阅读，热度非常高。本来害怕升级的好友们，在看到网友晒出的超美桌面后。立马把Bug抛在脑后，二话不说升级iOS14。毕竟如此新鲜好玩，又能提高桌面颜值的小组件，谁不喜欢折腾一下呢。桌面来自：酷友@Rviolette简洁冷淡风与文艺风的碰撞，又是一个小细节。来自：酷友@Rviolette想...
macos big sur更新后，这些小组件原来这么好用
Macdidiwei的博客
12-20 1830
圆角矩形的 app 图标、间距更大的顶部状态栏、眼熟的控制中心，macOS Big Sur 带给我的，是浓浓的 iOS 风。 与 iOS 14 外观逐渐相似 macOS Big Sur，也加入了小组件功能。 点按菜单栏中的日期或者时间，或者用两根手指从触控板的右侧边缘向左清扫，就可以看到全新的通知中心了，除了各类 app 的通知，在这里还能添加各类 app 的小组件，以便快速使用关键功能，了解重要信息。 那么，macOS Big Sur 的小组件要如何设置，又有哪些小组件值得一试呢？一起来看看吧！
android桌面小组件开发_都2020年了，iOS14还能把「桌面小组件」玩出什么花样？...
weixin_42464553的博客
12-29 498
苹果的小组件与安卓还是有很大的不同，其中不乏一些难以发现的「小惊喜」。iOS 14 最大的变化之一，就是支持桌面小组件了。之前的小组件只能在今天视图，也就是负一屏中添加，自由度有限，而把范围扩展到桌面后，小组件的能力、形态都有了很大的变化。有的人可能会说，「也就比 Android 落后了十年」，我一开始也这样想。不过苹果「迟到」也不是第一次了，「后来居上」的情况也不少见，所以只凭推出时间下判断还是...
pyqt 获取 UI 中组件_一文读懂！iOS系统组件的设计规范全解！
weixin_39859220的博客
10-24 264
一说到组件，大部分初级设计师和中级设计师的脑海里只会蹦出弹窗、Toast及操作列表等具体的概念，没有一套属于自己的组件分类体系，这样对于视觉设计、交互设计或产品设计的系统学习来说都是不利的。iOS14概念设计iOS官方设计指南在介绍组件时是按照组件的属性来分类的。组件的中文翻译名称可能会有很多种，并没有一个权威、准确的中文命名。设计师在设计前只需要清楚每个组件名对应的组件是什么就可以了。...
2.QT-窗口组件(QWidget),QT坐标系统,初探消息处理(信号与槽)
weixin_34220623的博客
04-18 238
本章主要内容如下: 1) 窗口组件(QWidget) 2) QT坐标系统 3) 消息处理(信号与槽)     窗口组件(QWidget) 介绍 Qt以组件对象的方式构建图形用户界面 Qt中没有父组件的顶级组件,则被叫做窗口 组件的类型分为: 容器类(父组件)  :  用于包含功能的界面组件 功能类(子组件)  :  用于实现特定的交互功能 如下图所示:...
zpl一维码大小怎么调整_苹果ios14小组件大小怎么设置 调整桌面小组件图标大小方法...
weixin_39946313的博客
12-07 171
ios14小组件大小怎么设置的呢？很多用户朋友对于ios14小组件默认的大小不满意，想要调整它们的大小，但是却不知道怎么操作设置，那么今天小编就将为大家带来关于ios14小组件大小怎么设置？ios14小组件大小调整方法，有需要的朋友们一起来看看吧！ios14小组件调整大小教程1.在全新的 iOS 14 系统中，用户可以在负一屏和主页上添加小组件：在屏幕空白处长按 2 秒左右，桌面会进入编辑状态，此...
flutter 底部模态框组件 除了showModalBottomSheet 还有什么
05-30
Flutter 底部模态框还可以使用 `CupertinoActionSheet` 组件来构建，该组件提供了 iOS 风格的设计。 以下是一个使用 `CupertinoActionSheet` 实现的底部模态框的示例： ```dart void _showBottomModalSheet(BuildContext context) { showCupertinoModalPopup( context: context, builder: (BuildContext context) { return CupertinoActionSheet( title: Text('Title'), message: Text('Message'), actions: <Widget>[ CupertinoActionSheetAction( child: Text('Action 1'), onPressed: () {}, ), CupertinoActionSheetAction( child: Text('Action 2'), onPressed: () {}, ), ], cancelButton: CupertinoActionSheetAction( child: Text('Cancel'), onPressed: () => Navigator.pop(context), ), ); }, ); } ``` 在上面的示例中，我们使用 `showCupertinoModalPopup` 方法来展示一个 `CupertinoActionSheet` 组件。`CupertinoActionSheet` 包含一个标题和消息，以及一个或多个操作按钮和一个取消按钮。 操作按钮使用 `CupertinoActionSheetAction` 组件来构建，并可以通过 `onPressed` 回调来处理用户点击事件。取消按钮也是一个 `CupertinoActionSheetAction` 组件，并使用 `Navigator.pop(context)` 回调函数来关闭底部模态框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值