gpt4 book ai didi

ios - Snapchat 导航栏样式 - Swift

转载 作者:行者123 更新时间:2023-11-28 12:08:57 27 4
gpt4 key购买 nike

Snapchat 是如何把这个导航栏做成渐变背景和圆角的。谢谢!

我没有足够大的声誉来发布图片,但它是向人们展示你的 snapchat 的 View ,一直到左边。

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

// Override point for customization after application launch.
// Sets background to a blank/empty image
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
// Sets shadow (line below the bar) to a blank image
UINavigationBar.appearance().shadowImage = UIImage()
// Sets translucent background's color
UINavigationBar.appearance().backgroundColor = .clear
// Set translucent
UINavigationBar.appearance().isTranslucent = true

return true
}

在我的 UITableViewControllerClass 中:

override func viewDidLoad() {
super.viewDidLoad()

tableView?.layer.cornerRadius = 15

//Declare a gradient
let gradient: CAGradientLayer = CAGradientLayer()
//Set the two colors of your gradient
gradient.colors = [UIColor.purple.cgColor, UIColor.red.cgColor]
//Set it's location
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
gradient.frame = CGRect(x: 0.0, y: 0.0, width: (self.navigationController?.navigationBar.frame.size.width)!, height: (self.navigationController?.navigationBar.frame.size.height)!)
self.navigationController?.navigationBar.layer.insertSublayer(gradient, at: 0)

}

最佳答案

据我了解,您希望将渐变作为背景和表格 View 的圆角。

这是我的 ViewController 的代码。

class ViewController: UIViewController {

@IBOutlet var backroundView: UIView!
@IBOutlet weak var viewContainingTableView: UIView!
@IBOutlet weak var topView: UIView!
@IBOutlet weak var navigationBar: UINavigationBar!

override func viewDidLoad() {
super.viewDidLoad()
//Change the corner radius to your liking
viewContainingTableView.layer.cornerRadius = 25
//Make the backround of your 'navigation controller' transparent
topView.backgroundColor = UIColor.white.withAlphaComponent(0.0)
//Declare a gradient
let gradient: CAGradientLayer = CAGradientLayer()
//Set the two colors of your gradient
gradient.colors = [UIColor.purple.cgColor, UIColor.red.cgColor]
//Set it's location
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
gradient.frame = CGRect(x: 0.0, y: 0.0, width: self.view.frame.size.width, height: self.view.frame.size.height)
self.backroundView.layer.insertSublayer(gradient, at: 0)
//self.view.layer.insertSublayer(gradient, at: 0)
}
}

将 App Delegate 中的 didFinishLaunchingWithOptions 方法更改为以下内容:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
// Sets background to a blank/empty image
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
// Sets shadow (line below the bar) to a blank image
UINavigationBar.appearance().shadowImage = UIImage()
// Sets translucent background's color
UINavigationBar.appearance().backgroundColor = .clear
// Set translucent
UINavigationBar.appearance().isTranslucent = true
return true
}

这是我的 View 层次结构:

View hierarchy

这是它给出的:

View on iPhone

要在没有 Storyboard 的情况下执行此操作,请将您的 ViewController 代码更改为以下内容:

class ViewController: UIViewController {

var viewContainingTableView = UIView()
let navigationBarView = UINavigationBar()
let topView = UIView()
let tableView = UITableView()

override func viewDidLoad() {
super.viewDidLoad()
let margins = view.layoutMarginsGuide

view.addSubview(topView)
topView.translatesAutoresizingMaskIntoConstraints = false
topView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
topView.heightAnchor.constraint(equalToConstant: 60).isActive = true
topView.leadingAnchor.constraint(equalTo: margins.leadingAnchor).isActive = true
topView.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true

topView.addSubview(navigationBarView)
navigationBarView.translatesAutoresizingMaskIntoConstraints = false
navigationBarView.topAnchor.constraint(equalTo: topView.topAnchor).isActive = true
navigationBarView.bottomAnchor.constraint(equalTo: topView.bottomAnchor).isActive = true
navigationBarView.leadingAnchor.constraint(equalTo: topView.leadingAnchor).isActive = true
navigationBarView.trailingAnchor.constraint(equalTo: topView.trailingAnchor).isActive = true
self.navigationItem.title = "Test"

let buttonNavBar = UIBarButtonItem(title: "Button", style: .plain, target: nil, action: #selector(buttonAction))
navigationItem.rightBarButtonItem = buttonNavBar
navigationBarView.setItems([navigationItem], animated: false)

view.addSubview(viewContainingTableView)
viewContainingTableView.translatesAutoresizingMaskIntoConstraints = false
viewContainingTableView.topAnchor.constraint(equalTo: topView.bottomAnchor, constant: 0).isActive = true
viewContainingTableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
viewContainingTableView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
viewContainingTableView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
viewContainingTableView.backgroundColor = UIColor.white

viewContainingTableView.addSubview(tableView)
tableView.translatesAutoresizingMaskIntoConstraints = false
tableView.topAnchor.constraint(equalTo: viewContainingTableView.topAnchor, constant: 20).isActive = true
tableView.bottomAnchor.constraint(equalTo: viewContainingTableView.bottomAnchor).isActive = true
tableView.leadingAnchor.constraint(equalTo: viewContainingTableView.leadingAnchor).isActive = true
tableView.trailingAnchor.constraint(equalTo: viewContainingTableView.trailingAnchor).isActive = true

view.setNeedsUpdateConstraints()
view.updateConstraints()

//Change the corner radius to your liking
viewContainingTableView.layer.cornerRadius = 25
//Make the backround of your 'navigation controller' transparent
topView.backgroundColor = UIColor.white.withAlphaComponent(0.0)
//Declare a gradient
let gradient: CAGradientLayer = CAGradientLayer()
//Set the two colors of your gradient
gradient.colors = [UIColor.purple.cgColor, UIColor.red.cgColor]
//Set it's location
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
gradient.frame = CGRect(x: 0.0, y: 0.0, width: self.view.frame.size.width, height: self.view.frame.size.height)
self.view.layer.insertSublayer(gradient, at: 0)
}

@objc func buttonAction() {
//Function of your button: add code to execute when button is pressed
}
}

关于ios - Snapchat 导航栏样式 - Swift,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48916564/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com