Snapchat导航栏风格 - 斯威夫特

Question

Snapchat如何使用渐变背景和圆角制作此导航栏。谢谢！

我没有足够的声誉来发布图片，但是这个视图向人们展示了你的快照，一直到左边。

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)

}

Answer 1

根据我的理解，您希望在桌面视图中使用渐变作为背景圆角。

以下是我的ViewController的代码。

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
}

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

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
    }    
}

这是我的视图层次结构：

以下是它的内容：

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

{
warning:[ {
    "_id": "5a8dcdbcadb65b484e888091",
    "application_name": "teste",
    "created_at": "2018-02-02T23:55:06.000Z",
    "log_identifier": "1"
  }, {
    "_id": "5a8dcdbcadb65b484e888091",
    "application_name": "teste",
    "created_at": "2018-02-02T23:55:06.000Z",
    "log_identifier": "1"
  }],
error:[ {
    "_id": "5a8dcdbcadb65b484e888091",
    "application_name": "teste",
    "created_at": "2018-02-02T23:55:06.000Z",
    "log_identifier": "1"
  }, {
    "_id": "5a8dcdbcadb65b484e888091",
    "application_name": "teste",
    "created_at": "2018-02-02T23:55:06.000Z",
    "log_identifier": "1"
  }]
}