菜鸟教程小白 发表于 2022-12-11 19:29:30

ios - 导航栏中的渐变与其下方的 View 不同。


                                            <p><p>我想要达到的目标设计如下图:
<a href="/image/kbHjk.png" rel="noreferrer noopener nofollow"><img src="/image/kbHjk.png" alt="enter image description here"/></a> </p>

<p>我使用下面的代码创建了渐变,并借助图层中的功能图像将其设置到导航栏。</p>

<pre><code>    func image(fromLayer layer: CALayer) -&gt; UIImage {
    UIGraphicsBeginImageContext(layer.frame.size)

    layer.render(in: UIGraphicsGetCurrentContext()!)

    let outputImage = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

    return outputImage!
}


    //navbar
    let gradient = CAGradientLayer()
    let cornerRadiusOfNavBar : CGFloat! = 0
    if #available(iOS 10.0, *) {
      gradient.colors =
    }
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
    gradient.frame = self.navigationController!.navigationBar.bounds
    gradient.cornerRadius = cornerRadiusOfNavBar

    navigationItem.title = NSLocalizedString(&#34;Register&#34;, comment: &#34;&#34;)
    self.navigationController!.navigationBar.setBackgroundImage(self.image(fromLayer: gradient), for: .default)
</code></pre>

<p>并且我在导航栏下方有一个堆栈 View ,我使用此代码为其设置渐变:</p>

<pre><code>      //stackview
    let gradientView = CAGradientLayer()
    let cornerRadiusOfStackView : CGFloat! = 0
    if #available(iOS 10.0, *) {
      gradientView.colors =
    }
    gradientView.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientView.endPoint = CGPoint(x: 1.0, y: 0.5)
    gradientView.frame = self.stackViewHoldingButtons.bounds
    gradientView.cornerRadius = cornerRadiusOfStackView
    self.stackViewHoldingButtons.layer.insertSublayer(gradientView, at: 0)
</code></pre>

<p>结果是下面的这个设计:
<a href="/image/y9NCy.png" rel="noreferrer noopener nofollow"><img src="/image/y9NCy.png" alt="enter image description here"/></a> </p>

<p>然后我添加了这两行代码来删除导航栏底部边框:</p>

<pre><code>    self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationController?.navigationBar.shadowImage = UIImage()
</code></pre>

<p>结果如下:</p>

<p> <a href="/image/Mn6R6.png" rel="noreferrer noopener nofollow"><img src="/image/Mn6R6.png" alt="enter image description here"/></a> </p>

<p>谁能帮我使梯度均匀??</p>

<p>附: : - 我确保 navigationBar.isTranslucent 属性设置为 false ,两种情况下的颜色都设置为 sRGB ,并且我尝试在设置渐变之前和之后调用删除边框的线条。</p>

<p>提前致谢。</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>使导航栏完全透明,以便在此处显示 View 的渐变层。</p>

<pre><code>self.navigationController!.navigationBar.backgroundColor = UIColor.clear
self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isOpaque = false
self.navigationController?.navigationBar.isTranslucent = true
</code></pre>

<p>如果您希望它是应用程序方面的,请在 AppDelegate 中设置这些值</p>

<pre><code>UINavigationBar.appearance().backgroundColor = UIColor.clear
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().isOpaque = false
UINavigationBar.appearance().isTranslucent = true
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于ios - 导航栏中的渐变与其下方的 View 不同。,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/47911078/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/47911078/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: ios - 导航栏中的渐变与其下方的 View 不同。