Degrade renk arka plan (saydam bir düz renk) ile zamanında bir görünüm oluşturmak çalışıyorum. Bunu yapmanın bir yolu var mı?
Degrade renk arka plan (saydam bir düz renk) ile zamanında bir görünüm oluşturmak çalışıyorum. Bunu yapmanın bir yolu var mı?
Yanıtlar:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.colors = @[(id)[UIColor whiteColor].CGColor, (id)[UIColor blackColor].CGColor];
[view.layer insertSublayer:gradient atIndex:0];
let view = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 50))
let gradient = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [UIColor.white.cgColor, UIColor.black.cgColor]
view.layer.insertSublayer(gradient, at: 0)
Bilgi : degradenin yönünü değiştirmek için startPoint ve endPoint kullanın .
Buna eklenmiş başka görünümler varsa UIView
(a gibi UILabel
), alt görünümler için arka plan rengi yerine degrade görünümü sunulması UIView
için bunların arka plan rengini olarak ayarlamayı düşünebilirsiniz [UIColor clearColor]
. Kullanmanın clearColor
hafif bir performans isabeti var.
view
değiştirdim self.view
ve bir cazibe gibi çalıştı :)
gradient.frame = view.bounds
içinde viewDidAppear()
ve didRotateFromInterfaceOrientation()
ya başka degrade uygun ebatlarda olmaz.
Özel bir sınıf oluşturabilirsiniz GradientView
:
Hızlı 5
class GradientView: UIView {
override open class var layerClass: AnyClass {
return CAGradientLayer.classForCoder()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
let gradientLayer = layer as! CAGradientLayer
gradientLayer.colors = [UIColor.white.cgColor, UIColor.black.cgColor]
}
}
Film şeridinde, sınıf türünü gradyan arka planı olmasını istediğiniz herhangi bir görünüme ayarlayın:
Bu, aşağıdaki şekillerde daha iyidir:
CLayer
NSConstraint
Her zamanki gibi kullanınUIView
layerClass
artık bir işlev değil, bir özellik olduğu için bir özellik gibi geçersiz kılmanız gerekiyor: stackoverflow.com/questions/28786597/… . Ayrıca uygulamak zorundasınız override init(frame: CGRect)
, şu yanıtı kontrol edin: stackoverflow.com/questions/27374330/… . Teşekkürler!
init(frame:CGRect)
Yine de geçersiz kılmam gerektiğini sanmıyorum . Güncellenmiş kodu test ettim ve iyi çalışıyor.
@IBDesignable
Kullanılırsa IB'de oluşturulmamasının herhangi bir nedeni var mı?
Bu benim için bir cazibe gibi çalıştı,
Hedef C
Ben belirledik RGB için degrade arka plan Renk UIView
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,35)];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.startPoint = CGPointZero;
gradient.endPoint = CGPointMake(1, 1);
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithRed:34.0/255.0 green:211/255.0 blue:198/255.0 alpha:1.0] CGColor],(id)[[UIColor colorWithRed:145/255.0 green:72.0/255.0 blue:203/255.0 alpha:1.0] CGColor], nil];
[view.layer addSublayer:gradient];
GÜNCELLENDİ: - Swift3 +
Kodu : -
var gradientView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 35))
let gradientLayer:CAGradientLayer = CAGradientLayer()
gradientLayer.frame.size = self.gradientView.frame.size
gradientLayer.colors =
[UIColor.white.cgColor,UIColor.red.withAlphaComponent(1).cgColor]
//Use diffrent colors
gradientView.layer.addSublayer(gradientLayer)
Degrade renginin başlangıç ve bitiş noktalarını ekleyebilirsiniz.
gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
Daha ayrıntılı bilgi için CAGradientLayer Doc belgesine bakın
Umarım bu bazıları için yardımdır.
Bu benim önerilen yaklaşımım.
Yeniden kullanılabilirliği desteklemek için, bir kategori oluşturun CAGradientLayer
ve istediğiniz degradeleri sınıf yöntemleri olarak ekleyin. Bunları header
dosyada şu şekilde belirtin :
#import <QuartzCore/QuartzCore.h>
@interface CAGradientLayer (SJSGradients)
+ (CAGradientLayer *)redGradientLayer;
+ (CAGradientLayer *)blueGradientLayer;
+ (CAGradientLayer *)turquoiseGradientLayer;
+ (CAGradientLayer *)flavescentGradientLayer;
+ (CAGradientLayer *)whiteGradientLayer;
+ (CAGradientLayer *)chocolateGradientLayer;
+ (CAGradientLayer *)tangerineGradientLayer;
+ (CAGradientLayer *)pastelBlueGradientLayer;
+ (CAGradientLayer *)yellowGradientLayer;
+ (CAGradientLayer *)purpleGradientLayer;
+ (CAGradientLayer *)greenGradientLayer;
@end
Ardından, uygulama dosyanızda, her bir degradeyi bu sözdizimiyle belirtin:
+ (CAGradientLayer *)flavescentGradientLayer
{
UIColor *topColor = [UIColor colorWithRed:1 green:0.92 blue:0.56 alpha:1];
UIColor *bottomColor = [UIColor colorWithRed:0.18 green:0.18 blue:0.18 alpha:1];
NSArray *gradientColors = [NSArray arrayWithObjects:(id)topColor.CGColor, (id)bottomColor.CGColor, nil];
NSArray *gradientLocations = [NSArray arrayWithObjects:[NSNumber numberWithInt:0.0],[NSNumber numberWithInt:1.0], nil];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = gradientColors;
gradientLayer.locations = gradientLocations;
return gradientLayer;
}
Ardından bu kategoriyi kendinize ViewController
veya istediğiniz herhangi bir yere içe aktarın subclass
ve aşağıdaki gibi kullanın:
CAGradientLayer *backgroundLayer = [CAGradientLayer purpleGradientLayer];
backgroundLayer.frame = self.view.frame;
[self.view.layer insertSublayer:backgroundLayer atIndex:0];
viewDidLoad
viewDidLoad
, uygulama yatay yönde başlatılırsa işe yaramadı. Benim çözümüm, arka plan katman çerçevesini diğer yönleri telafi etmek için view.frame'den daha geniş yapmaktı.
Uygulamam boyunca yalnızca bir tür gradyana ihtiyacım olduğu için bir UIView alt sınıfı oluşturdum ve degrade katmanını başlangıçta sabit renklerle yapılandırdım. UIView başlatıcıları, CAGradientLayer'ı yapılandıran configure configureGradientLayer -method öğesini çağırır:
DDGradientView.h:
#import <UIKit/UIKit.h>
@interface DDGradientView : UIView {
}
@end
DDGradientView.m:
#import "DDGradientView.h"
@implementation DDGradientView
// Change the views layer class to CAGradientLayer class
+ (Class)layerClass
{
return [CAGradientLayer class];
}
- (instancetype)initWithCoder:(NSCoder *)aDecoder {
self = [super initWithCoder:aDecoder];
if(self) {
[self configureGradientLayer];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if(self) {
[self configureGradientLayer];
}
return self;
}
// Make custom configuration of your gradient here
- (void)configureGradientLayer {
CAGradientLayer *gLayer = (CAGradientLayer *)self.layer;
gLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor], (id)[[UIColor lightGrayColor] CGColor], nil];
}
@end
initGradientLayer
bir başlatıcıya benzer. Çok uygun olduğunu sanmıyorum.
Hızlı Uygulama:
var gradientLayerView: UIView = UIView(frame: CGRectMake(0, 0, view.bounds.width, 50))
var gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = gradientLayerView.bounds
gradient.colors = [UIColor.grayColor().CGColor, UIColor.clearColor().CGColor]
gradientLayerView.layer.insertSublayer(gradient, atIndex: 0)
self.view.layer.insertSublayer(gradientLayerView.layer, atIndex: 0)
Kabul edilen cevabı, Swift'in uzantı işlevselliğini ve bir numaralandırma kullanarak biraz genişlettim.
Var, yapmak gibi film şeridini kullanıyorsanız Oh ve emin çağırmak için gradientBackground(from:to:direction:)
de viewDidLayoutSubviews()
ya da daha sonra.
Hızlı 3
enum GradientDirection {
case leftToRight
case rightToLeft
case topToBottom
case bottomToTop
}
extension UIView {
func gradientBackground(from color1: UIColor, to color2: UIColor, direction: GradientDirection) {
let gradient = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = [color1.cgColor, color2.cgColor]
switch direction {
case .leftToRight:
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
case .rightToLeft:
gradient.startPoint = CGPoint(x: 1.0, y: 0.5)
gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
case .bottomToTop:
gradient.startPoint = CGPoint(x: 0.5, y: 1.0)
gradient.endPoint = CGPoint(x: 0.5, y: 0.0)
default:
break
}
self.layer.insertSublayer(gradient, at: 0)
}
}
Bu hızlı bir uzantısı ile uyguladık:
Hızlı 3
extension UIView {
func addGradientWithColor(color: UIColor) {
let gradient = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = [UIColor.clear.cgColor, color.cgColor]
self.layer.insertSublayer(gradient, at: 0)
}
}
Hızlı 2.2
extension UIView {
func addGradientWithColor(color: UIColor) {
let gradient = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = [UIColor.clearColor().CGColor, color.CGColor]
self.layer.insertSublayer(gradient, atIndex: 0)
}
}
Hayır Her görünümde böyle bir degrade ayarlayabilirsiniz:
myImageView.addGradientWithColor(UIColor.blue)
Hızlı Bir Yaklaşım
Bu cevap yukarıdaki cevaplar üzerine kuruludur ve dönüş sırasında eğimin düzgün bir şekilde uygulanmaması sorununu ele almak için uygulama sağlar. Degrade katmanını bir kareye değiştirerek bu sorunu giderir, böylece tüm yönlerde döndürme doğru bir degradeyle sonuçlanır. İşlev imzası, kişinin gerektiği kadar çok CGColorRef (CGColor) iletmesine izin veren bir Swift varyasyon argümanı içerir (örnek kullanıma bakın). Ayrıca, herhangi bir UIView'a degrade uygulayabilmesi için Swift uzantısı olarak bir örnek verilmiştir.
func configureGradientBackground(colors:CGColorRef...){
let gradient: CAGradientLayer = CAGradientLayer()
let maxWidth = max(self.view.bounds.size.height,self.view.bounds.size.width)
let squareFrame = CGRect(origin: self.view.bounds.origin, size: CGSizeMake(maxWidth, maxWidth))
gradient.frame = squareFrame
gradient.colors = colors
view.layer.insertSublayer(gradient, atIndex: 0)
}
Kullanmak:
viewDidLoad içinde ...
override func viewDidLoad() {
super.viewDidLoad()
configureGradientBackground(UIColor.redColor().CGColor, UIColor.whiteColor().CGColor)
}
Uzantı uygulaması
extension CALayer {
func configureGradientBackground(colors:CGColorRef...){
let gradient = CAGradientLayer()
let maxWidth = max(self.bounds.size.height,self.bounds.size.width)
let squareFrame = CGRect(origin: self.bounds.origin, size: CGSizeMake(maxWidth, maxWidth))
gradient.frame = squareFrame
gradient.colors = colors
self.insertSublayer(gradient, atIndex: 0)
}
}
Uzantı kullanım örneği örneği:
override func viewDidLoad() {
super.viewDidLoad()
self.view.layer.configureGradientBackground(UIColor.purpleColor().CGColor, UIColor.blueColor().CGColor, UIColor.whiteColor().CGColor)
}
Bu, degrade arka planın artık tüm kontroller UIViews (veya bir alt sınıf) olduğu ve tüm UIViews'un CALayer'leri olduğu için herhangi bir UIControl'e uygulanabileceği anlamına gelir.
Hızlı 4
Uzantı uygulaması
extension CALayer {
public func configureGradientBackground(_ colors:CGColor...){
let gradient = CAGradientLayer()
let maxWidth = max(self.bounds.size.height,self.bounds.size.width)
let squareFrame = CGRect(origin: self.bounds.origin, size: CGSize(width: maxWidth, height: maxWidth))
gradient.frame = squareFrame
gradient.colors = colors
self.insertSublayer(gradient, at: 0)
}
}
Uzantı kullanım örneği örneği:
override func viewDidLoad() {
super.viewDidLoad()
self.view.layer.configureGradientBackground(UIColor.purple.cgColor, UIColor.blue.cgColor, UIColor.white.cgColor)
}
Aradığın şey CAGradientLayer
. Her UIView
birinin bir katmanı vardır - bu katmana alt katmanlar ekleyebilirsiniz, tıpkı alt görünümler ekleyebileceğiniz gibi. Belirli bir tür, CAGradientLayer
arasında geçiş yapmak için bir renk dizisi verdiğiniz yerdir.
Bir örnek, degrade görünüm için bu basit sarmalayıcıdır:
http://oleb.net/blog/2010/04/obgradientview-a-simple-uiview-wrapper-for-cagradientlayer/
Bir UIView'in tüm katman parçalarına erişmek için QuartZCore çerçevesini eklemeniz gerektiğini unutmayın.
Hızlı 4:
IB'deki gradyanı doğru gösterir:
@IBDesignable public class GradientView: UIView {
override open class var layerClass: AnyClass {
return CAGradientLayer.classForCoder()
}
required public init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
configureGradientLayer()
}
public override init(frame: CGRect) {
super.init(frame: frame)
configureGradientLayer()
}
func configureGradientLayer() {
let gradientLayer = layer as! CAGradientLayer
gradientLayer.colors = [UIColor(hex: 0x003399).cgColor, UIColor(hex: 0x00297b).cgColor]
}
}
extension UIView {
func applyGradient(isVertical: Bool, colorArray: [UIColor]) {
if let sublayers = layer.sublayers {
sublayers.filter({ $0 is CAGradientLayer }).forEach({ $0.removeFromSuperlayer() })
}
let gradientLayer = CAGradientLayer()
gradientLayer.colors = colorArray.map({ $0.cgColor })
if isVertical {
//top to bottom
gradientLayer.locations = [0.0, 1.0]
} else {
//left to right
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
}
backgroundColor = .clear
gradientLayer.frame = bounds
layer.insertSublayer(gradientLayer, at: 0)
}
}
KULLANIM
someView.applyGradient(isVertical: true, colorArray: [.green, .blue])
Yuchen'in versiyonuna dayanan basit hızlı görünüm
class GradientView: UIView {
override class func layerClass() -> AnyClass { return CAGradientLayer.self }
lazy var gradientLayer: CAGradientLayer = {
return self.layer as! CAGradientLayer
}()
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
Sonra böyle bir başlatmadan sonra gradientLayer kullanabilirsiniz ...
someView.gradientLayer.colors = [UIColor.whiteColor().CGColor, UIColor.blackColor().CGColor]
Benim çözümüm salt okunur bir özellik olarak erişilebilir UIView
alt sınıf oluşturmaktır CAGradientLayer
. Bu, degradenizi istediğiniz gibi özelleştirmenize olanak tanır ve düzen değişikliklerini kendiniz halletmenize gerek yoktur. Alt sınıf uygulaması:
@interface GradientView : UIView
@property (nonatomic, readonly) CAGradientLayer *gradientLayer;
@end
@implementation GradientView
+ (Class)layerClass
{
return [CAGradientLayer class];
}
- (CAGradientLayer *)gradientLayer
{
return (CAGradientLayer *)self.layer;
}
@end
Kullanımı:
self.iconBackground = [GradientView new];
[self.background addSubview:self.iconBackground];
self.iconBackground.gradientLayer.colors = @[(id)[UIColor blackColor].CGColor, (id)[UIColor whiteColor].CGColor];
self.iconBackground.gradientLayer.startPoint = CGPointMake(1.0f, 1.0f);
self.iconBackground.gradientLayer.endPoint = CGPointMake(0.0f, 0.0f);
Yukarıdaki katmanı güncellemek için yukarıdaki çözümleri aramak iyi bir fikirdir.
viewDidLayoutSubviews
görünümlerin doğru şekilde güncellenmesini sağlamak için
SWIFT 3
Görünümünüze degrade katmanı eklemek için
Görünüm çıkışınızı bağlayın
@IBOutlet var YOURVIEW : UIView!
CAGradientLayer () yöntemini tanımlayın
var gradient = CAGradientLayer()
İşte görünümünüzde yazmanız gereken kod
YOURVIEW.layoutIfNeeded()
gradient.startPoint = CGPoint(x: CGFloat(0), y: CGFloat(1))
gradient.endPoint = CGPoint(x: CGFloat(1), y: CGFloat(0))
gradient.frame = YOURVIEW.bounds
gradient.colors = [UIColor.red.cgColor, UIColor.green.cgColor]
gradient.colors = [ UIColor(red: 255.0/255.0, green: 56.0/255.0, blue: 224.0/255.0, alpha: 1.0).cgColor,UIColor(red: 86.0/255.0, green: 13.0/255.0, blue: 232.0/255.0, alpha: 1.0).cgColor,UIColor(red: 16.0/255.0, green: 173.0/255.0, blue: 245.0/255.0, alpha: 1.0).cgColor]
gradient.locations = [0.0 ,0.6 ,1.0]
YOURVIEW.layer.insertSublayer(gradient, at: 0)
Swift 3.1'de bu uzantıyı UIView'e ekledim
import Foundation
import UIKit
import CoreGraphics
extension UIView {
func gradientOfView(withColours: UIColor...) {
var cgColours = [CGColor]()
for colour in withColours {
cgColours.append(colour.cgColor)
}
let grad = CAGradientLayer()
grad.frame = self.bounds
grad.colors = cgColours
self.layer.insertSublayer(grad, at: 0)
}
}
sonra aradığım
class OverviewVC: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.gradientOfView(withColours: UIColor.red,UIColor.green, UIColor.blue)
}
}
Bunu kodumda uyguladım.
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, self.view.frame.size.width, 31.0f)];
view1.backgroundColor = [UIColor clearColor];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view1.bounds;
UIColor *topColor = [UIColor colorWithRed:132.0/255.0 green:222.0/255.0 blue:109.0/255.0 alpha:1.0];
UIColor *bottomColor = [UIColor colorWithRed:31.0/255.0 green:150.0/255.0 blue:99.0/255.0 alpha:1.0];
gradient.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil];
[view1.layer insertSublayer:gradient atIndex:0];
Şimdi benim görüşümde bir degrade görebiliyorum.
UIView'a gradyan rengi vermek için (hızlı 4.2)
func makeGradientLayer(`for` object : UIView, startPoint : CGPoint, endPoint : CGPoint, gradientColors : [Any]) -> CAGradientLayer {
let gradient: CAGradientLayer = CAGradientLayer()
gradient.colors = gradientColors
gradient.locations = [0.0 , 1.0]
gradient.startPoint = startPoint
gradient.endPoint = endPoint
gradient.frame = CGRect(x: 0, y: 0, w: object.frame.size.width, h: object.frame.size.height)
return gradient
}
Nasıl kullanılır
let start : CGPoint = CGPoint(x: 0.0, y: 1.0)
let end : CGPoint = CGPoint(x: 1.0, y: 1.0)
let gradient: CAGradientLayer = makeGradientLayer(for: cell, startPoint: start, endPoint: end, gradientColors: [
UIColor(red:0.92, green:0.07, blue:0.4, alpha:1).cgColor,
UIColor(red:0.93, green:0.11, blue:0.14, alpha:1).cgColor
])
self.vwTemp.layer.insertSublayer(gradient, at: 0)