如何解决在 SwiftUI 的 TabView 上方添加阴影 设置背景图片设置shadowImage结果
我正在尝试在 SwiftUI 中实现 TabView,它具有与屏幕背景相同的颜色,但在其上方还有一个 阴影,如下图所示:
到目前为止,我已经能够正确显示颜色,但我不知道如何添加阴影。这是我的代码:
struct ContentView: View {
init() {
let appearance = UITabBarappearance()
appearance.configureWithTransparentBackground()
UITabBar.appearance().standardAppearance = appearance
}
var body: some View {
TabView {
Text("First View")
.tabItem {
Image(systemName: "square.and.arrow.down")
Text("First")
}
Text("Second View")
.tabItem {
Image(systemName: "square.and.arrow.up")
Text("Second")
}
}
}
}
有人知道怎么做吗?我很感激你的帮助:)
解决方法
要实现几乎完全符合您的愿望,最好的办法是创建自定义 TabView
。
实际上,在 SwiftUI 中,您可以使用 UITabBarAppearance().shadowColor
,但除了在 TabView 本身的顶部绘制一条 2px 的线之外,这并没有什么用。
相反,您可以使用以下代码创建自定义 TabView
并实现所需的图形效果。
import SwiftUI
enum Tab {
case borrow,ret,device,you
}
struct TabView: View {
@Binding var tabIdx: Tab
var body: some View {
HStack {
Group {
Spacer()
Button (action: {
self.tabIdx = .borrow
}) {
VStack{
Image(systemName: "arrow.down.circle")
Text("Borrow")
.font(.system(size: 10))
}
}
.foregroundColor(self.tabIdx == .borrow ? .purple : .secondary)
Spacer()
Button (action: {
self.tabIdx = .ret
}) {
VStack{
Image(systemName: "arrow.up.circle")
Text("Return")
.font(.system(size: 10))
}
}
.foregroundColor(self.tabIdx == .ret ? .purple : .secondary)
Spacer()
Button (action: {
self.tabIdx = .device
}) {
VStack{
Image(systemName: "safari")
Text("Device")
.font(.system(size: 10))
}
}
.foregroundColor(self.tabIdx == .device ? .purple : .secondary)
Spacer()
Button (action: {
self.tabIdx = .you
}) {
VStack{
Image(systemName: "person.circle")
Text("You")
.font(.system(size: 10))
}
}
.foregroundColor(self.tabIdx == .you ? .purple : .secondary)
Spacer()
}
}
.padding(.bottom,30)
.padding(.top,10)
.background(Color(red: 0.95,green: 0.95,blue: 0.95))
.font(.system(size: 30))
.frame(height: 80)
}
}
struct ContentView: View {
@State var tabIdx: Tab = .borrow
var body: some View {
NavigationView {
VStack(spacing: 20) {
Spacer()
if tabIdx == .borrow {
Text("Borrow")
} else if tabIdx == .ret {
Text("Return")
} else if tabIdx == .device {
Text("Device")
} else if tabIdx == .you {
Text("You")
}
Spacer(minLength: 0)
TabView(tabIdx: self.$tabIdx)
.shadow(radius: 10)
}
.ignoresSafeArea()
}
}
}
请记住,执行此操作时,所有选项卡都指定为 enum Tab {}
内的 case,并且 TabView()
包含一些 Button
元素,这些元素将通过使用 {{ 1}}。因此,您可以通过修改 @State var tabIdx
语句来调整您的操作。
在每个按钮之后用这个语句设置活动颜色:
self.tabIdx = <yourtab>
在这里,您可以将 .foregroundColor(self.tabIdx == .borrow ? .purple : .secondary)
更改为适合您的任何内容。
您可以看到在 .purple
上,ContentView
块捕获了 SubView。我在这里放置了一些 if-else if
元素,例如 Text()
,因此您可以通过调用 Text("Borrow")
之类的东西或您拥有的任何东西来替换它们。
当我从 BorrowView()
中调用 TabView
时,我已经添加了阴影,但是您甚至可以在 {{1} 的 ContentView
之后添加 .shadow(radius: 10)
} 本身。
这将是最终输出:
,简答
我找到了解决方案。您可以创建自己的阴影图像并将其添加到 UITabBar 外观中,如下所示:
// load your custom shadow image
let shadowImage: UIImage = ...
//you also need to set backgroundImage,without it shadowImage is ignored
UITabBar.appearance().backgroundImage = UIImage()
UITabBar.appearance().shadowImage = shadowImage
更详细的答案
设置背景图片
注意通过设置
UITabBar.appearance().backgroundImage = UIImage()
您将 TabView 设置为透明,因此如果您的内容可以在其下方滚动,则这并不理想。为了解决这个问题,您可以设置 TabView 的颜色。
let appearance = UITabBarAppearance()
appearance.configureWithTransparentBackground()
appearance.backgroundColor = UIColor.systemGray6
UITabBar.appearance().standardAppearance = appearance
设置shadowImage
我想以编程方式生成阴影图像。为此,我创建了 UIImage 的扩展。 (code taken from here)
extension UIImage {
static func gradientImageWithBounds(bounds: CGRect,colors: [CGColor]) -> UIImage {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = colors
UIGraphicsBeginImageContext(gradientLayer.bounds.size)
gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
}
最后我这样设计了我的 TabView:
let image = UIImage.gradientImageWithBounds(
bounds: CGRect( x: 0,y: 0,width: UIScreen.main.scale,height: 8),colors: [
UIColor.clear.cgColor,UIColor.black.withAlphaComponent(0.1).cgColor
]
)
let appearance = UITabBarAppearance()
appearance.configureWithTransparentBackground()
appearance.backgroundColor = UIColor.systemGray6
appearance.backgroundImage = UIImage()
appearance.shadowImage = image
UITabBar.appearance().standardAppearance = appearance
结果
,尝试设置 appearance.shadowColor
。
init() {
let appearance = UITabBarAppearance()
appearance.configureWithTransparentBackground()
appearance.shadowColor = .gray /// here!
UITabBar.appearance().standardAppearance = appearance
}
结果:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。