{"id":421,"date":"2025-05-30T11:01:30","date_gmt":"2025-06-05T03:30:29","guid":{"rendered":"https:\/\/badgameshow.com\/steven\/?p=421"},"modified":"2025-06-05T11:01:30","modified_gmt":"2025-06-05T03:30:29","slug":"swift-%e5%9c%93%e8%a7%92-%e5%9c%93%e5%bd%a2-%e9%99%b0%e5%bd%b1-%e5%9c%96%e7%89%87%e8%a3%81%e5%88%87-calayer","status":"publish","type":"post","link":"https:\/\/badgameshow.com\/steven\/swift\/swift-%e5%9c%93%e8%a7%92-%e5%9c%93%e5%bd%a2-%e9%99%b0%e5%bd%b1-%e5%9c%96%e7%89%87%e8%a3%81%e5%88%87-calayer\/","title":{"rendered":"Swift \u7a0b\u5f0f\u8a2d\u8a08\uff1a\u638c\u63e1 CALayer \u9032\u968e\u5713\u89d2\u3001\u5713\u5f62\u3001\u9670\u5f71\u8207\u5716\u7247\u88c1\u5207\u6280\u5de7\uff082025 \u6700\u65b0\u5be6\u8e10\uff09"},"content":{"rendered":"<p>&#8220;`html<\/p>\n<h3>\u7c21\u8981<\/h3>\n<p>\u5728\u672c\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u5011\u5c07\u63a2\u8a0e\u5982\u4f55\u4f7f\u7528 <code>CALayer<\/code> \u4f86\u5be6\u73fe\u5713\u89d2\u3001\u5713\u5f62\u3001\u9670\u5f71\u4ee5\u53ca\u5716\u7247\u88c1\u5207\u7b49\u6548\u679c\u3002\u9019\u4e9b\u6280\u8853\u5c0d\u65bc\u63d0\u5347 iOS \u61c9\u7528\u7684 UI\/UX \u8a2d\u8a08\u81f3\u95dc\u91cd\u8981\uff0c\u975e\u5e38\u9069\u5408\u7528\u65bc\u6309\u9215\u3001\u5716\u7247\u6216\u4efb\u4f55\u9700\u8981\u5713\u5f62\u6548\u679c\u7684\u5143\u4ef6\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/ithelp.ithome.com.tw\/upload\/images\/20191003\/20112271EQfu9ztXNe.png\" alt=\"\u793a\u7bc4\u4f7f\u7528 CALayer \u7684\u6548\u679c\" title=\"\"><\/p>\n<h3>\u57fa\u790e\u8a2d\u7f6e<\/h3>\n<p>\u9996\u5148\uff0c\u6211\u5011\u5728\u4f60\u7684 <code>ViewController<\/code> \u4e2d\u65b0\u589e\u4e00\u500b <code>UIView<\/code>\uff0c\u4e26\u70ba\u5176\u8a2d\u7f6e\u984f\u8272\u548c\u5927\u5c0f\u3002\u4ee5\u4e0b\u662f\u5275\u5efa\u548c\u6dfb\u52a0\u8996\u5716\u7684\u57fa\u672c\u4ee3\u78bc\uff1a<\/p>\n<pre><code class=\"language-swift line-numbers\">override func viewDidLoad() {\n    super.viewDidLoad()\n    self.view.addSubview(self.topView)\n}\n\nlazy var topView: UIView = {\n    let topView = UIView()\n    topView.frame = CGRect(x: self.view.center.x - 75, y: self.view.center.y - 75, width: 150, height: 150)\n    topView.backgroundColor = UIColor(red: 0.5, green: 0.5, blue: 0.8, alpha: 1.0)\n    return topView\n}()\n<\/code><\/pre>\n<p><strong>Demo<\/strong><br \/>\n<img decoding=\"async\" src=\"https:\/\/ithelp.ithome.com.tw\/upload\/images\/20191003\/20112271IpjJGcMtIC.png\" alt=\"\u521d\u6b65\u8996\u5716\u8a2d\u7f6e\u793a\u7bc4\" title=\"\"><\/p>\n<h3>\u5713\u89d2\u8a2d\u7f6e<\/h3>\n<p>\u4f7f\u7528 <code>cornerRadius<\/code> \u53ef\u4ee5\u8abf\u6574\u8996\u5716\u7684\u89d2\u843d\u5713\u6ed1\u5ea6\uff0c\u6578\u503c\u8d8a\u9ad8\uff0c\u5713\u89d2\u8d8a\u660e\u986f\u3002\u4ee5\u4e0b\u662f\u8a2d\u7f6e\u5713\u89d2\u7684\u4ee3\u78bc\uff1a<\/p>\n<pre><code class=\"language-swift line-numbers\">topView.layer.cornerRadius = 20\n<\/code><\/pre>\n<p><strong>Demo<\/strong><br \/>\n<img decoding=\"async\" src=\"https:\/\/ithelp.ithome.com.tw\/upload\/images\/20191003\/20112271A6JSfh43ku.png\" alt=\"\u5713\u89d2\u6548\u679c\u793a\u7bc4\" title=\"\"><\/p>\n<p>\u9019\u7a2e\u8a2d\u7f6e\u4e0d\u50c5\u80fd\u61c9\u7528\u65bc <code>UIView<\/code>\uff0c\u9084\u53ef\u4ee5\u5ee3\u6cdb\u904b\u7528\u5230 <code>UIButton<\/code> \u6216\u5176\u4ed6 UI \u5143\u4ef6\uff0c\u8b93\u4ecb\u9762\u66f4\u52a0\u7f8e\u89c0\u3002<\/p>\n<h3>\u5713\u5f62\u8a2d\u7f6e<\/h3>\n<p>\u82e5\u8981\u5c07\u8996\u5716\u8a2d\u7f6e\u70ba\u5713\u5f62\uff0c\u53ea\u9700\u5c07 <code>cornerRadius<\/code> \u8a2d\u5b9a\u70ba\u8996\u5716\u9ad8\u5ea6\u7684\u4e00\u534a\uff1a<\/p>\n<pre><code class=\"language-swift line-numbers\">topView.layer.cornerRadius = topView.frame.height \/ 2\n<\/code><\/pre>\n<p><strong>Demo<\/strong><br \/>\n<img decoding=\"async\" src=\"https:\/\/ithelp.ithome.com.tw\/upload\/images\/20191003\/20112271eXoJswQ0Lz.png\" alt=\"\u5713\u5f62\u6548\u679c\u793a\u7bc4\" title=\"\"><\/p>\n<p>\u9019\u6a23\u7684\u8a2d\u7f6e\u53ef\u4ee5\u7528\u65bc\u500b\u4eba\u982d\u50cf\u6216\u5713\u5f62\u6309\u9215\u7b49\u591a\u7a2e\u5834\u5408\u3002<\/p>\n<h3>\u908a\u6846\u8a2d\u7f6e<\/h3>\n<p>\u60f3\u8981\u5728\u5713\u5f62\u908a\u7de3\u6dfb\u52a0\u908a\u6846\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u4ee3\u78bc\uff1a<\/p>\n<pre><code class=\"language-swift line-numbers\">topView.layer.borderWidth = 10\ntopView.layer.borderColor = UIColor.black.withAlphaComponent(0.5).cgColor\n<\/code><\/pre>\n<p><strong>Demo<\/strong><br \/>\n<img decoding=\"async\" src=\"https:\/\/ithelp.ithome.com.tw\/upload\/images\/20191003\/20112271vwd7gczZWq.png\" alt=\"\u5713\u5f62\u908a\u6846\u6548\u679c\u793a\u7bc4\" title=\"\"><\/p>\n<h3>\u9670\u5f71\u8207\u5149\u6688\u6548\u679c<\/h3>\n<p>\u8981\u70ba\u8996\u5716\u6dfb\u52a0\u9670\u5f71\u6548\u679c\uff0c\u9700\u8981\u8a2d\u7f6e\u56db\u500b\u5c6c\u6027\uff1a<\/p>\n<p>&#8211; <code>shadowOffset<\/code>\uff1a\u504f\u79fb\u91cf<br \/>\n&#8211; <code>shadowOpacity<\/code>\uff1a\u900f\u660e\u5ea6<br \/>\n&#8211; <code>shadowRadius<\/code>\uff1a\u6a21\u7cca\u534a\u5f91<br \/>\n&#8211; <code>shadowColor<\/code>\uff1a\u984f\u8272<\/p>\n<p>\u4ee5\u4e0b\u662f\u793a\u7bc4\u4ee3\u78bc\uff1a<\/p>\n<pre><code class=\"language-swift line-numbers\">topView.layer.shadowOffset = CGSize(width: 0, height: 0)\ntopView.layer.shadowOpacity = 0.8\ntopView.layer.shadowRadius = 8\ntopView.layer.shadowColor = UIColor.black.cgColor\n<\/code><\/pre>\n<p><strong>Demo<\/strong><br \/>\n<img decoding=\"async\" src=\"https:\/\/ithelp.ithome.com.tw\/upload\/images\/20191003\/201122712vOkEjgMjR.png\" alt=\"\u9670\u5f71\u6548\u679c\u793a\u7bc4\" title=\"\"><\/p>\n<h3>\u5716\u7247\u88c1\u5207<\/h3>\n<p>\u5728\u4f7f\u7528 <code>UIImageView<\/code> \u6642\uff0c\u8a2d\u7f6e\u5713\u89d2\u548c\u9670\u5f71\u5f8c\uff0c\u5716\u7247\u53ef\u80fd\u6703\u8d85\u51fa\u908a\u754c\u3002\u70ba\u4e86\u89e3\u6c7a\u9019\u500b\u554f\u984c\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u4ee3\u78bc\uff1a<\/p>\n<pre><code class=\"language-swift line-numbers\">topView.clipsToBounds = true\n<\/code><\/pre>\n<p>\u6216\u4f7f\u7528 <code>masksToBounds<\/code> \u4f86\u81ea\u52d5\u88c1\u5207\u8d85\u51fa\u908a\u754c\u7684\u90e8\u5206\uff1a<\/p>\n<pre><code class=\"language-swift line-numbers\">topView.layer.masksToBounds = true\n<\/code><\/pre>\n<p><strong>Demo<\/strong><br \/>\n<img decoding=\"async\" src=\"https:\/\/ithelp.ithome.com.tw\/upload\/images\/20191003\/20112271OLxe8X1r4h.png\" alt=\"\u5716\u7247\u88c1\u5207\u6548\u679c\u793a\u7bc4\" title=\"\"><\/p>\n<blockquote><p>\n  \u5b8c\u6210\n<\/p><\/blockquote>\n<h3>Q&#038;A\uff08\u5e38\u898b\u554f\u984c\u89e3\u7b54\uff09<\/h3>\n<p><strong>Q1: \u5982\u4f55\u5728 UIView \u4e2d\u6dfb\u52a0\u9670\u5f71\u6548\u679c\uff1f<\/strong><br \/>\nA: \u4f7f\u7528 <code>layer.shadowOffset<\/code>\u3001<code>layer.shadowOpacity<\/code>\u3001<code>layer.shadowRadius<\/code> \u548c <code>layer.shadowColor<\/code> \u4f86\u8a2d\u7f6e\u9670\u5f71\u6548\u679c\u3002<\/p>\n<p><strong>Q2: \u5713\u5f62\u8996\u5716\u7684\u9ad8\u5ea6\u548c\u5bec\u5ea6\u61c9\u8a72\u600e\u9ebc\u8a2d\u7f6e\uff1f<\/strong><br \/>\nA: \u5713\u5f62\u8996\u5716\u7684\u9ad8\u5ea6\u548c\u5bec\u5ea6\u61c9\u8a72\u76f8\u7b49\uff0c\u4e26\u4e14 <code>cornerRadius<\/code> \u8a2d\u7f6e\u70ba\u9ad8\u5ea6\u7684\u4e00\u534a\u3002<\/p>\n<p><strong>Q3: \u5982\u4f55\u5728 UIImageView \u4e2d\u4f7f\u7528\u5713\u89d2\u548c\u9670\u5f71\uff1f<\/strong><br \/>\nA: \u8a2d\u7f6e <code>masksToBounds<\/code> \u70ba true\uff0c\u4ee5\u78ba\u4fdd\u5716\u7247\u4e0d\u6703\u8d85\u51fa\u5713\u89d2\u908a\u754c\u3002<\/p>\n<hr \/>\n<p><a class=\"wp-editor-md-post-content-link\" href=\"https:\/\/p.ecpay.com.tw\/99527\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/badgameshow.com\/steven\/wp-content\/uploads\/2020\/11\/cup-1-1.png\" alt=\"\u5be6\u7528\u5de5\u5177\" title=\"\"><\/a><br \/>\n&#8220;`<br \/>\n&#8212;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u9019\u908a\u6211\u5011\u7c21\u55ae\u5728\u4f60\u7684`controller`\u88e1\u9762\u65b0\u589e\u4e00\u500b`View`<br \/>\n\u4e26\u4e14\u52a0\u5165\u984f\u8272<br \/>\n\u6211\u4f7f\u7528\u7684`View`\u4f4d\u7f6e\u81f4\u4e2d  \u9577\u5bec`150*150`<\/p>\n","protected":false},"author":1,"featured_media":559,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5],"tags":[],"class_list":["post-421","post","type-post","status-publish","format-aside","has-post-thumbnail","hentry","category-swift","post_format-post-format-aside"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/badgameshow.com\/steven\/wp-content\/uploads\/2020\/11\/cup-1-1.png","jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/pcFK27-6N","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/badgameshow.com\/steven\/wp-json\/wp\/v2\/posts\/421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/badgameshow.com\/steven\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/badgameshow.com\/steven\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/badgameshow.com\/steven\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/badgameshow.com\/steven\/wp-json\/wp\/v2\/comments?post=421"}],"version-history":[{"count":3,"href":"https:\/\/badgameshow.com\/steven\/wp-json\/wp\/v2\/posts\/421\/revisions"}],"predecessor-version":[{"id":569,"href":"https:\/\/badgameshow.com\/steven\/wp-json\/wp\/v2\/posts\/421\/revisions\/569"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/badgameshow.com\/steven\/wp-json\/wp\/v2\/media\/559"}],"wp:attachment":[{"href":"https:\/\/badgameshow.com\/steven\/wp-json\/wp\/v2\/media?parent=421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/badgameshow.com\/steven\/wp-json\/wp\/v2\/categories?post=421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/badgameshow.com\/steven\/wp-json\/wp\/v2\/tags?post=421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}