I've set constraints for these UITextField like this
But when I custom the textfield it's gone over the constraint
emailTextField.backgroundColor = UIColor.clear
emailTextField.attributedPlaceholder = NSAttributedString(string: emailTextField.placeholder!, attributes: [NSAttributedString.Key.foregroundColor: #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)])
emailTextField.borderStyle = .none
emailTextField.tintColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
let bottomLayer = CALayer()
bottomLayer.frame = CGRect(x: 0, y: 20, width: 1000, height: 0.7)
bottomLayer.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
emailTextField.layer.addSublayer(bottomLayer)
Run..
Please tell me why? Many thanks for that...
You have set CALayer width 1000. It should be width of your TextField.
Change below code:
Add below code to get updated frame of emailTextField and set the width of Layer:
emailTextField.setNeedsLayout()
emailTextField.layoutIfNeeded()
bottomLayer.frame = CGRect(x: 0, y: 20, width: emailTextField.frame.size.width, height: 0.7)
UPDATE
If you want to reuse this textField configuration you can create one function like below:
func setupTextField(textField: UITextField) {
textField.backgroundColor = UIColor.clear
textField.attributedPlaceholder = NSAttributedString(string: textField.placeholder!, attributes: [NSAttributedString.Key.foregroundColor: #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)])
textField.borderStyle = .none
textField.tintColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
textField.setNeedsLayout()
textField.layoutIfNeeded()
let bottomLayer = CALayer()
bottomLayer.frame = CGRect(x: 0, y: 20, width: textField.frame.size.width, height: 0.7)
bottomLayer.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
textField.layer.addSublayer(bottomLayer)
}
You can call above method this way:
setupTextField(textField: textField)
Related
I want to make a collectionViewCell like the one on Apple's app Shortcuts, especially with the random background colors.
Shortcuts app UI:
First of all I'm sorry if my question wasn't clear, however I think solved my problem. I wanted to create a similar collectionViewCell to the one on the Shortcuts app and I think I did pretty well, here's what I've done...
Final result
I put the colors I wanted into a Hash Table and then generated a random key to get the pictures array and then created an extension to the UIView class to make the gradient and passed the index of the colors array to the gradient function from my cellRandomBackgroundColors(), here's my collectionViewCell class and the extension if anyone want it.
import UIKit
class MainCollectionViewCell: UICollectionViewCell {
override init(frame: CGRect) {
super.init(frame: frame)
setupCell()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//MARK:- UI
let iconImageView: UIImageView = {
let imageView = UIImageView()
imageView.image = UIImage(named: "Folder")
imageView.contentMode = .scaleAspectFit
return imageView
}()
let checklistNameLabel: UILabel = {
let label = UILabel()
label.text = "List"
label.textColor = UIColor.white
label.font = UIFont.boldSystemFont(ofSize: 19)
label.textAlignment = .left
return label
}()
let remainingsLabel: UILabel = {
let label = UILabel()
label.text = "2 Remaining"
label.textColor = UIColor.white
label.font = UIFont.systemFont(ofSize: 13)
label.textAlignment = .left
return label
}()
let editButton: UIButton = {
let button = UIButton(type: UIButton.ButtonType.custom) as UIButton
button.setImage(UIImage(named: "More"), for: UIControl.State.normal)
return button
}()
//MARK:- Setup Cell
func setupCell() {
roundCorner()
gradientBackgroundColor()
setCellShadow()
self.addSubview(iconImageView)
self.addSubview(checklistNameLabel)
self.addSubview(remainingsLabel)
self.addSubview(editButton)
iconImageView.anchor(top: safeTopAnchor, left: safeLeftAnchor, bottom: nil, right: nil, paddingTop: 8, paddingLeft: 8, paddingBottom: 0, paddingRight: 0, width: 36, height: 36)
checklistNameLabel.anchor(top: iconImageView.bottomAnchor, left: safeLeftAnchor, bottom: nil, right: nil, paddingTop: 18, paddingLeft: 8, paddingBottom: 0, paddingRight: 0)
remainingsLabel.anchor(top: checklistNameLabel.bottomAnchor, left: safeLeftAnchor, bottom: nil, right: nil, paddingTop: 4, paddingLeft: 8, paddingBottom: 0, paddingRight: 0)
editButton.anchor(top: safeTopAnchor, left: nil, bottom: nil, right: safeRightAnchor, paddingTop: 8, paddingLeft: 0, paddingBottom: 0, paddingRight: 8, width: 36, height: 36)
}
//MARK:- Methods
func cellRandomBackgroundColors() -> [UIColor] {
//Colors
let red = [#colorLiteral(red: 0.9654200673, green: 0.1590853035, blue: 0.2688751221, alpha: 1),#colorLiteral(red: 0.7559037805, green: 0.1139892414, blue: 0.1577021778, alpha: 1)]
let orangeRed = [#colorLiteral(red: 0.9338900447, green: 0.4315618277, blue: 0.2564975619, alpha: 1),#colorLiteral(red: 0.8518816233, green: 0.1738803983, blue: 0.01849062555, alpha: 1)]
let orange = [#colorLiteral(red: 0.9953531623, green: 0.54947716, blue: 0.1281470656, alpha: 1),#colorLiteral(red: 0.9409626126, green: 0.7209432721, blue: 0.1315650344, alpha: 1)]
let yellow = [#colorLiteral(red: 0.9409626126, green: 0.7209432721, blue: 0.1315650344, alpha: 1),#colorLiteral(red: 0.8931249976, green: 0.5340107679, blue: 0.08877573162, alpha: 1)]
let green = [#colorLiteral(red: 0.3796315193, green: 0.7958304286, blue: 0.2592983842, alpha: 1),#colorLiteral(red: 0.2060100436, green: 0.6006633639, blue: 0.09944178909, alpha: 1)]
let greenBlue = [#colorLiteral(red: 0.2761503458, green: 0.824685812, blue: 0.7065336704, alpha: 1),#colorLiteral(red: 0, green: 0.6422213912, blue: 0.568986237, alpha: 1)]
let kindaBlue = [#colorLiteral(red: 0.2494148612, green: 0.8105323911, blue: 0.8425348401, alpha: 1),#colorLiteral(red: 0, green: 0.6073564887, blue: 0.7661359906, alpha: 1)]
let skyBlue = [#colorLiteral(red: 0.3045541644, green: 0.6749247313, blue: 0.9517192245, alpha: 1),#colorLiteral(red: 0.008423916064, green: 0.4699558616, blue: 0.882807076, alpha: 1)]
let blue = [#colorLiteral(red: 0.1774400771, green: 0.466574192, blue: 0.8732826114, alpha: 1),#colorLiteral(red: 0.00491155684, green: 0.287129879, blue: 0.7411141396, alpha: 1)]
let bluePurple = [#colorLiteral(red: 0.4613699913, green: 0.3118675947, blue: 0.8906354308, alpha: 1),#colorLiteral(red: 0.3018293083, green: 0.1458326578, blue: 0.7334778905, alpha: 1)]
let purple = [#colorLiteral(red: 0.7080290914, green: 0.3073516488, blue: 0.8653779626, alpha: 1),#colorLiteral(red: 0.5031493902, green: 0.1100070402, blue: 0.6790940762, alpha: 1)]
let pink = [#colorLiteral(red: 0.9495453238, green: 0.4185881019, blue: 0.6859942079, alpha: 1),#colorLiteral(red: 0.8123683333, green: 0.1657164991, blue: 0.5003474355, alpha: 1)]
let colorsTable: [Int: [UIColor]] = [0: red, 1: orangeRed, 2: orange, 3: yellow, 4: green, 5: greenBlue, 6: kindaBlue, 7: skyBlue, 8: blue, 9: bluePurple, 10: bluePurple, 11: purple, 12: pink]
let randomColors = colorsTable.values.randomElement()
return randomColors!
}
func gradientBackgroundColor() {
let colors = cellRandomBackgroundColors()
self.contentView.setGradientBackgroundColor(colorOne: colors[0], colorTow: colors[1])
}
func roundCorner() {
self.contentView.layer.cornerRadius = 12.0
self.contentView.layer.masksToBounds = true
self.contentView.layer.borderWidth = 1.0
self.contentView.layer.borderColor = UIColor.clear.cgColor
}
}
The extension to create the gradients.
import UIKit
extension UIView {
func setGradientBackgroundColor(colorOne: UIColor, colorTow: UIColor) {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [colorOne.cgColor, colorTow.cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
layer.insertSublayer(gradientLayer, at: 0)
}
}
I'm trying to apply gradient background to a UITextView object, not sure if it's possible because I get white background instead.
Here is my UIView extension:
extension UIView{
func setTextGradient(startColor:UIColor,endColor:UIColor)
{
let gradient:CAGradientLayer = CAGradientLayer()
gradient.colors = [startColor.cgColor, endColor.cgColor]
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
gradient.frame = self.bounds
self.layer.insertSublayer(gradient, at: 0)
}
Here where I assign gradient to the text view:
detailTxtView.translatesAutoresizingMaskIntoConstraints = false
detailTxtView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
detailTxtView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -8).isActive = true
detailTxtView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 8).isActive = true
detailTxtView.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 0.5).isActive = true
detailTxtView.setTextGradient(startColor: Constants.Colors.bluLight, endColor: Constants.Colors.silver)
// Set up text
let attributedTxt = NSMutableAttributedString(string: titleStr, attributes:[NSFontAttributeName: UIFont(name: "Jazeel-Bold", size: 24)!, NSForegroundColorAttributeName: Constants.Colors.bluLight])
attributedTxt.append(NSAttributedString(string: "\n\n\(detailStr)", attributes:[NSFontAttributeName: UIFont(name: "HacenTunisia", size: 20)!, NSForegroundColorAttributeName: Constants.Colors.aluminum]))
let txtStyle = NSMutableParagraphStyle()
txtStyle.alignment = .center
let length = attributedTxt.string.count
attributedTxt.addAttribute(NSParagraphStyleAttributeName, value: txtStyle, range: NSRange(location: 0, length: length))
detailTxtView.attributedText = attributedTxt
Here are the colors in the Constants class:
struct Colors{
static let bluDark = UIColor(colorLiteralRed: 51/255, green: 50/255, blue: 80/255, alpha: 1)
static let bluLight = UIColor(colorLiteralRed: 68/255, green: 85/255, blue: 138/255, alpha: 1)
static let greenLight = UIColor(colorLiteralRed: 200/255, green: 255/255, blue: 132/255, alpha: 1)
static let mercury = UIColor(colorLiteralRed: 235/255, green: 235/255, blue: 235/255, alpha: 1)
static let silver = UIColor(colorLiteralRed: 214/255, green: 214/255, blue: 214/255, alpha: 1)
static let magnesium = UIColor(colorLiteralRed: 192/255, green: 192/255, blue: 192/255, alpha: 1)
static let aluminum = UIColor(colorLiteralRed: 169/255, green: 169/255, blue: 169/255, alpha: 1)
static let blu2 = UIColor(colorLiteralRed: 88/255, green: 120/255, blue: 166/255, alpha: 0.2)
static let bluLighter = #colorLiteral(red: 0.451, green: 0.5569, blue: 0.8314, alpha: 1) /* #738ed4 */
}
I always get white background when using the gradient method. Appreciate any suggestions.
i think you forget location
extension UIView
{
func setGradient(startColor:UIColor,endColor:UIColor)
{
let gradient:CAGradientLayer = CAGradientLayer()
gradient.colors = [startColor.cgColor, endColor.cgColor]
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
gradient.frame = self.bounds
self.layer.insertSublayer(gradient, at: 0)
}
}
use
txtView.setGradient(startColor: UIColor.blue, endColor: UIColor.green)
Output:
You need to use locations property of CAGradientLayer
extension UIView{
func setGriadientBackrnd(color1: UIColor, color2: UIColor){
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [color1.cgColor, color2.cgColor]
gradientLayer.locations = [0.5 , 0.5] //here you can set percentage of color part are display betwin 0 to 1
layer.insertSublayer(gradientLayer, at: 0)
}
}
Please check your code Output
Hi Folk try like that hope you helps,
let titleStr = "Hi How are you ?"
let detailStr = "HI How UR preparation..."
gradientTextview.translatesAutoresizingMaskIntoConstraints = false
gradientTextview.bottomAnchor.constraint(equalTo:self.view.bottomAnchor).isActive = true
gradientTextview.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -8).isActive = true
gradientTextview.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 8).isActive = true
gradientTextview.heightAnchor.constraint(equalTo: self.view.heightAnchor, multiplier: 0.5).isActive = true
gradientTextview.setGradient(startColor: UIColor(colorLiteralRed: 68/255, green: 85/255, blue: 138/255, alpha: 1), endColor: UIColor(colorLiteralRed: 214/255, green: 214/255, blue: 214/255, alpha: 1))
let attributedTxt = NSMutableAttributedString(string: titleStr, attributes:[NSFontAttributeName: UIFont (name: "HelveticaNeue-Bold", size: 20)! , NSForegroundColorAttributeName: UIColor(colorLiteralRed: 68/255, green: 85/255, blue: 138/255, alpha: 1)])
attributedTxt.append(NSAttributedString(string: "\n\n\(detailStr)", attributes:[NSFontAttributeName: UIFont (name: "HelveticaNeue-Bold", size: 18)! , NSForegroundColorAttributeName:UIColor(colorLiteralRed: 169/255, green: 169/255, blue: 169/255, alpha: 1)]))
let txtStyle = NSMutableParagraphStyle()
txtStyle.alignment = .center
let length = attributedTxt.string.characters.count
attributedTxt.addAttribute(NSParagraphStyleAttributeName, value: txtStyle, range: NSRange(location: 0, length: length))
gradientTextview.attributedText = attributedTxt
===============================================================
extension UIView{
func setTextGradient(startColor:UIColor,endColor:UIColor)
{
let gradient:CAGradientLayer = CAGradientLayer()
gradient.colors = [startColor.cgColor, endColor.cgColor]
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
gradient.frame = self.bounds
self.layer.insertSublayer(gradient, at: 0)
}
NOTE:-
instead of view you can add self.gradientTextview also...
The gradient worked when I set it after setting text attributes
detailTxtView.attributedText = attributedTxt
detailTxtView.setTextGradient(startColor: Constants.Colors.silver, endColor: Constants.Colors.bluDark)
How I can set the position of the colored bar to the bottom of the screen?
I have these lines:
let ground = SKSpriteNode(color: UIColor(red: 144/255, green: 100/255,
blue: 144/255, alpha: 1.0) , size: CGSize(width: view.frame.size.width, height: 20))
ground.position = ???
addChild(ground)
This should work:
let ground = SKSpriteNode(color: UIColor(red: 144/255, green: 100/255,
blue: 144/255, alpha: 1.0) , size: CGSize(width: self.size.width, height: 20))
ground.anchorPoint = CGPoint(x: 0, y: 0)
ground.position = CGPoint(x: 0,y: 0)
addChild(ground)
Possible pitfalls:
You must reposition if an orientation change happens. Also make sure that the scene is not bigger as the screen.
Try with these lines of code:
let ground = SKSpriteNode(color: UIColor(red: 144/255, green: 100/255,
blue: 144/255, alpha: 1.0) , size: CGSize(width: view.frame.size.width, height: 20))
view.addSubview(ground)
ground.leftAnchor.constraintEqualToAnchor(view.leftAnchor).active = true
ground.bottomAnchor.constraintEqualToAnchor(view.bottomAnchor).active = true
ground.widthAnchor.constraintEqualToAnchor(view.widthAnchor).active = true
ground.heightAnchor.constraintEqualToConstant(40).active = true
I have a UILabel on each section of my tableview. I have this line sticking out on the end of the label and this is coming from an iPhone 6. I've encountered it before on the iPhone 5 and managed to make it disappear by changing the width of the UILabel.
Here's the code on viewForHeaderInSection:
let view = UIView(frame: CGRectMake(0, 0, self.view.bounds.width, 30))
view.backgroundColor = UIColor(red: 248/255, green: 247/255, blue: 243/255, alpha: 1.0)
let label = UILabel(frame: CGRectMake((self.view.bounds.width - (self.view.bounds.width * 0.4)) / 2, 0, self.view.bounds.width * 0.4, 25))
label.backgroundColor = UIColor(red: 248/255, green: 247/255, blue: 243/255, alpha: 1.0)
label.textColor = UIColor(red: 163/255, green: 144/255, blue: 99/255, alpha: 1.0)
label.textAlignment = .Center
label.text = "YOUR TITLE HERE"
let line1 = UIView(frame: CGRectMake((self.view.bounds.width - (self.view.bounds.width * 0.8)) / 2, 13, self.view.bounds.width * 0.8, 1))
line1.backgroundColor = UIColor(red: 163/255, green: 144/255, blue: 99/255, alpha: 1.0)
view.addSubview(line1) // Adds the line first
view.addSubview(label) // Then the label on top of the line for the look.
return view
override func drawRect(rect: CGRect) {
let green: UIColor = UIColor(red: 79, green: 255, blue: 110, alpha: 1)
let lightGreen: UIColor;(red: 190, green: 225, blue: 211, alpha: 1)
let context = UIGraphicsGetCurrentContext()
let greenGradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [lightGreen.CGColor, green.CGColor],[0, 1],
let backgroundPath = UIBezierPath(rect: CGRectMake(0, 0, self.frame.width, self.frame.height)),
CGContextSaveGState(context),
backgroundPath.addClip(),
CGContextDrawLinearGradient(context, greenGradient, CGPointMake(160, 0), CGPointMake(160, 568),
UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32 (kCGGradientDrawsAfterEndLocation)),
CGContextRestoreGState(context)
i have been trying to debug this for about an hour and the build fails everytime.
Assuming the color is not getting worked,
try this for setting colors
let green = UIColor(red: 79/255.0, green: 255/255.0, blue: 110/255.0, alpha: 1)
let lightGreen = UIColor(red: 190/255.0, green: 225/255.0, blue: 211/255.0, alpha: 1)
You have added a semicolon in 2nd line:
let lightGreen: UIColor;(red: 190, green: 225, blue: 211, alpha: 1)
Remove this semicolon. It will work fine.