Tôi đang cố gắng tạo chế độ xem với nền màu gradient (Màu đơn sắc trong suốt) khi chạy. Có cách nào để làm điều đó?
Tôi đang cố gắng tạo chế độ xem với nền màu gradient (Màu đơn sắc trong suốt) khi chạy. Có cách nào để làm điều đó?
Câu trả lời:
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)
Thông tin : sử dụng startpoint và endPoint để thay đổi hướng của gradient .
Nếu có bất kỳ quan điểm khác thêm vào này UIView
(chẳng hạn như một UILabel
), bạn có thể muốn xem xét việc thiết lập màu nền của những UIView
's để [UIColor clearColor]
nên xem độ dốc được trình bày thay vì màu nền cho quan điểm phụ. Sử dụng clearColor
có một hiệu suất nhẹ.
view
thành self.view
và nó hoạt động như một cơ duyên :)
gradient.frame = view.bounds
trong viewDidAppear()
và trong didRotateFromInterfaceOrientation()
hoặc khác gradient sẽ không được có kích thước đúng.
Bạn có thể tạo một lớp tùy chỉnh GradientView
:
Swift 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]
}
}
Trong bảng phân cảnh, đặt loại lớp thành bất kỳ chế độ xem nào bạn muốn có nền gradient:
Điều này tốt hơn theo những cách sau:
CLayer
NSConstraint
như bình thường trênUIView
layerClass
không còn là một chức năng, đó là một thuộc tính nên bạn phải ghi đè lên nó như một thuộc tính: stackoverflow.com/questions/28786597/ Lỗi . Ngoài ra, bạn phải thực hiện override init(frame: CGRect)
, kiểm tra câu trả lời này: stackoverflow.com/questions/27374330/ . Cảm ơn!
init(frame:CGRect)
mặc dù. Tôi đã thử nghiệm mã cập nhật và nó hoạt động tốt.
@IBDesignable
được sử dụng?
Hãy thử điều này nó hoạt động như một cơ duyên đối với tôi,
Mục tiêu C
Tôi đã đặt Màu nền gradient RGB thành 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];
CẬP NHẬT: - Swift3 +
Mã số : -
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)
Bạn có thể thêm điểm bắt đầu và điểm kết thúc của màu gradient.
gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
Để biết thêm chi tiết mô tả, tham khảo CAGradientLayer Doc
Hy vọng điều này sẽ giúp cho một số.
Đây là cách tiếp cận được đề nghị của tôi.
Để thúc đẩy khả năng sử dụng lại, tôi muốn tạo một danh mục CAGradientLayer
và thêm độ dốc mong muốn của bạn làm phương thức lớp. Chỉ định chúng trong header
tệp như thế này:
#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
Sau đó, trong tệp thực hiện của bạn, chỉ định từng gradient với cú pháp này:
+ (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;
}
Sau đó, chỉ cần nhập danh mục này trong ViewController
hoặc bất kỳ yêu cầu nào khác subclass
và sử dụng nó như thế này:
CAGradientLayer *backgroundLayer = [CAGradientLayer purpleGradientLayer];
backgroundLayer.frame = self.view.frame;
[self.view.layer insertSublayer:backgroundLayer atIndex:0];
viewDidLoad
viewDidLoad
, nó sẽ không hoạt động nếu ứng dụng được khởi chạy theo hướng ngang. Giải pháp của tôi là làm cho khung lớp nền rộng hơn view.frame để bù cho các định hướng khác.
Vì tôi chỉ cần một loại gradient trong ứng dụng của mình, tôi đã tạo một lớp con của UIView và cấu hình sẵn lớp gradient khi khởi tạo với các màu cố định. Initializers của UIView gọi configureGradientLayer -method, mà cấu hình CAGradientLayer:
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
tương tự như trình khởi tạo. Tôi không nghĩ nó rất phù hợp.
Thực hiện Swift:
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)
Tôi đã mở rộng câu trả lời được chấp nhận một chút bằng chức năng mở rộng của Swift cũng như enum.
Oh và nếu bạn đang sử dụng Storyboard như tôi làm, hãy chắc chắn để gọi gradientBackground(from:to:direction:)
trongviewDidLayoutSubviews()
hoặc sau.
Swift 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)
}
}
Tôi đã thực hiện điều này nhanh chóng với một phần mở rộng:
Swift 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)
}
}
Swift 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)
}
}
Không, tôi có thể đặt độ dốc cho mọi chế độ xem như sau:
myImageView.addGradientWithColor(UIColor.blue)
Cách tiếp cận Swift
Câu trả lời này dựa trên các câu trả lời ở trên và cung cấp triển khai để xử lý vấn đề về độ dốc không được áp dụng đúng trong quá trình xoay. Nó thỏa mãn vấn đề này bằng cách thay đổi lớp gradient thành hình vuông sao cho việc xoay theo mọi hướng dẫn đến một độ dốc chính xác. Chữ ký hàm bao gồm một đối số biến đổi Swift cho phép một người vượt qua bao nhiêu CGColorRef (CGColor) khi cần (xem cách sử dụng mẫu). Cũng được cung cấp là một ví dụ dưới dạng tiện ích mở rộng Swift để người ta có thể áp dụng độ dốc cho bất kỳ UIView nào.
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)
}
Để sử dụng:
trong viewDidLoad ...
override func viewDidLoad() {
super.viewDidLoad()
configureGradientBackground(UIColor.redColor().CGColor, UIColor.whiteColor().CGColor)
}
Gia hạn thực hiện
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)
}
}
Ví dụ trường hợp sử dụng mở rộng:
override func viewDidLoad() {
super.viewDidLoad()
self.view.layer.configureGradientBackground(UIColor.purpleColor().CGColor, UIColor.blueColor().CGColor, UIColor.whiteColor().CGColor)
}
Điều đó có nghĩa là nền gradient hiện có thể được áp dụng cho bất kỳ UIControl nào vì tất cả các điều khiển là UIViews (hoặc một lớp con) và tất cả các UIView đều có CALayers.
Swift 4
Gia hạn thực hiện
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)
}
}
Ví dụ trường hợp sử dụng mở rộng:
override func viewDidLoad() {
super.viewDidLoad()
self.view.layer.configureGradientBackground(UIColor.purple.cgColor, UIColor.blue.cgColor, UIColor.white.cgColor)
}
Những gì bạn đang tìm kiếm là CAGradientLayer
. Mỗi UIView
lớp có một lớp - vào lớp đó bạn có thể thêm các lớp con, giống như bạn có thể thêm các lớp con. Một loại cụ thể là CAGradientLayer
, nơi bạn cung cấp cho nó một mảng màu để phân loại giữa.
Một ví dụ là trình bao bọc đơn giản này cho chế độ xem gradient:
http://oleb.net/blog/2010/04/obgradientview-a-simple-uiview-wrapper-for-cagradientlayer/
Lưu ý rằng bạn cần bao gồm khung QuartZCore để truy cập tất cả các phần của lớp UIView.
Swift 4:
Hiển thị độ dốc trong IB chính xác:
@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)
}
}
SỬ DỤNG
someView.applyGradient(isVertical: true, colorArray: [.green, .blue])
Chế độ xem nhanh đơn giản dựa trên phiên bản của Yuchen
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)
}
}
Sau đó, bạn có thể sử dụng gradientLayer sau khi khởi tạo như thế này ...
someView.gradientLayer.colors = [UIColor.whiteColor().CGColor, UIColor.blackColor().CGColor]
Giải pháp của tôi là tạo UIView
lớp con có CAGradientLayer
thể truy cập như một thuộc tính chỉ đọc. Điều này sẽ cho phép bạn tùy chỉnh độ dốc theo cách bạn muốn và bạn không cần phải tự xử lý các thay đổi bố cục. Phân lớp thực hiện:
@interface GradientView : UIView
@property (nonatomic, readonly) CAGradientLayer *gradientLayer;
@end
@implementation GradientView
+ (Class)layerClass
{
return [CAGradientLayer class];
}
- (CAGradientLayer *)gradientLayer
{
return (CAGradientLayer *)self.layer;
}
@end
Sử dụng:
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);
Đó là một ý tưởng tốt để gọi các giải pháp ở trên để cập nhật lớp trên
viewDidLayoutSubviews
để có được lượt xem cập nhật chính xác
Chuyển 3
Để thêm một lớp gradient trên chế độ xem của bạn
Ràng buộc cửa hàng xem của bạn
@IBOutlet var YOURVIEW : UIView!
Xác định CAGradientLayer ()
var gradient = CAGradientLayer()
Đây là mã bạn phải viết trong viewDidLoad của bạn
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)
Trong Swift 3.1 tôi đã thêm tiện ích mở rộng này vào UIView
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)
}
}
mà sau đó tôi gọi với
class OverviewVC: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.gradientOfView(withColours: UIColor.red,UIColor.green, UIColor.blue)
}
}
Tôi đã thực hiện điều này trong mã của tôi.
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];
Bây giờ tôi có thể thấy một gradient trên quan điểm của tôi.
Để cung cấp màu gradient cho UIView (swift 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
}
Cách sử dụng
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)