Created
May 3, 2024 11:52
-
-
Save yosshi4486/727c546e46e0be798cf8def05f5f754c to your computer and use it in GitHub Desktop.
SwiftUI: Partial Border of View
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import SwiftUI | |
struct EdgeLines: Shape { | |
struct Edge: OptionSet { | |
static let top = Edge(rawValue: 1 << 0) | |
static let bottom = Edge(rawValue: 1 << 1) | |
static let left = Edge(rawValue: 1 << 2) | |
static let right = Edge(rawValue: 1 << 3) | |
static let all = Edge([.top, .bottom, .left, .right]) | |
var rawValue: Int8 | |
} | |
var edge: Edge = .all | |
func path(in rect: CGRect) -> Path { | |
var path = Path() | |
if edge.contains(.top) { | |
path.move(to: .init(x: rect.minX, y: rect.minY)) | |
path.addLine(to: .init(x: rect.maxX, y: rect.minY)) | |
} | |
if edge.contains(.bottom) { | |
path.move(to: .init(x: rect.minX, y: rect.maxY)) | |
path.addLine(to: .init(x: rect.maxX, y: rect.maxY)) | |
} | |
if edge.contains(.left) { | |
path.move(to: .init(x: rect.minX, y: rect.minY)) | |
path.addLine(to: .init(x: rect.minX, y: rect.maxY)) | |
} | |
if edge.contains(.right) { | |
path.move(to: .init(x: rect.maxX, y: rect.minY)) | |
path.addLine(to: .init(x: rect.maxX, y: rect.maxY)) | |
} | |
return path | |
} | |
} | |
extension View { | |
/// 指定した箇所に部分的にボーダーを適応してビューを返す | |
/// | |
/// - Parameters: | |
/// - edge: ボーダーの表示箇所. | |
/// - lineWidth: ボーダー線の太さ. デフォルト値は`1.0` | |
/// - color: ボーダーの色. デフォルト値は`.primary` | |
func particalBorder(edge: EdgeLines.Edge, lineWidth: CGFloat = 1.0, color: Color = .primary) -> some View { | |
self.background(EdgeLines(edge: edge).stroke(lineWidth: lineWidth).foregroundStyle(color)) | |
} | |
} | |
#Preview { | |
LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 5)) { | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.top], color: .red) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.bottom], color: .blue) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.left], color: .yellow) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.right], color: .white) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.top, .left], color: .red) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.top, .bottom], color: .blue) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.top, .right], color: .yellow) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.bottom, .left], color: .white) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.bottom, .right], color: .red) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.left, .right], color: .blue) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.top, .bottom, .left], color: .yellow) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.top, .bottom, .right], color: .white) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.top, .left, .right], color: .red) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: [.bottom, .left, .right], color: .blue) | |
Text("Hi!") | |
.frame(width: 50, height: 50) | |
.particalBorder(edge: .all, color: .red) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Preview Result