I'm trying to center a custom view inside a UITableView and it works fine but when i scroll it doesn't update to the center of the tableview it just stays at the top. Here's my code:
let customView = UIView(frame: CGRect(x: 0, y: 0, width: 150, height: 75))
customView.backgroundColor = UIColor(red: 0/255, green: 174/255, blue: 250/255, alpha: 1.0)
let label = UILabel(frame: CGRect(x: customView.frame.midX, y: customView.frame.midY, width: 150, height: 75))
label.text = "Text"
label.textAlignment = .center
label.font = UIFont(name: "HelveticaNeue-Light", size: 18)
label.textColor = UIColor.white
customView.addSubview(label)
label.center = customView.center
customView.layer.cornerRadius = 4.0
self.view.addSubview(customView)
customView.center = CGPoint(x: self.tableView.bounds.width/2, y: self.tableView.bounds.height/2)
UIView.animate(withDuration: 1.5, animations: {
customView.alpha = 0.0
}) { (success: Bool) in
customView.removeFromSuperview()
}
Any ideas on how to make this work? Thanks.
Add the customView in the tableView and not in the view.
self.tableView.addSubview(customView)
Related
I have this UITextfield that I would like to create programmatically. Here is my code currently.
let textField = UITextField(frame: CGRect(x: 200, y: 125, width: 200, height: 40))
textField.center = CGPoint(x: 200, y: 125)
textField.backgroundColor = .lightGray
textField.layer.masksToBounds = false
textField.layer.shadowRadius = 3.0
textField.layer.shadowColor = UIColor.black.cgColor
textField.layer.shadowOffset = CGSize(width: 0, height: 0)
textField.layer.shadowOpacity = 1.0
textField.roundCorners(corners: .allCorners, radius: 8)
view.addSubview(textField)
Image that I want:
This is the Image Im getting:
You may further adjust color to make it similar.
let textField = UITextField(frame: CGRect(x: 16, y: 125, width: screenWidth - 32, height: 40))
textField.backgroundColor = UIColor.init(red: 213.0/255.0, green: 207.0/255.0, blue: 207.0/255.0, alpha: 1)
textField.layer.masksToBounds = false
textField.placeholder = "Search Your Ticket"
textField.layer.shadowRadius = 3.0
textField.layer.shadowColor = UIColor.init(red: 40.0/255.0, green: 40.0/255.0, blue: 40.0/255.0, alpha: 0.3).cgColor
textField.layer.shadowOffset = CGSize(width: 1, height: 2)
textField.layer.shadowOpacity = 1.0
textField.roundCorners(corners: .allCorners, radius: 8)
let searchIcon = UIImageView.init(frame: CGRect.init(x: 10, y: 10, width: 20, height: 20))
searchIcon.image = UIImage.init(systemName: "magnifyingglass")
searchIcon.tintColor = .black
let leftView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: 40, height: 40))
leftView.backgroundColor = .clear
leftView.addSubview(searchIcon)
textField.leftView = leftView
textField.leftViewMode = .always
view.addSubview(textField)
extension UIViewController {
var screenWidth : CGFloat {
return UIScreen.main.bounds.size.width
}
}
func gradientImage(size: CGSize, colorSet: [CGColor]) throws -> UIImage? {
let tgl = CAGradientLayer()
tgl.frame = CGRect.init(x:0, y:0, width:size.width, height: size.height)
tgl.cornerRadius = tgl.frame.height / 2
tgl.masksToBounds = false
tgl.colors = colorSet
tgl.startPoint = CGPoint.init(x:0.0, y:0.5)
tgl.endPoint = CGPoint.init(x:1.0, y:0.5)
UIGraphicsBeginImageContextWithOptions(size, tgl.isOpaque, 0.0);
guard let context = UIGraphicsGetCurrentContext() else { return nil }
tgl.render(in: context)
let image = UIGraphicsGetImageFromCurrentImageContext()?.resizableImage(withCapInsets:
UIEdgeInsets.init(top: 0, left: size.height, bottom: 0, right: size.height))
UIGraphicsEndImageContext()
return image
}
func setSliderGradient() {
let minTrackStartColor = UIColor(red:111/255, green: 111/255, blue: 111/255, alpha: 1.0)
let maxTrackColor = UIColor(red: 222/255, green: 222/255, blue: 222/255, alpha: 1.0)
do {
bottomNavBar.slider.setMinimumTrackImage(try bottomNavBar.gradientImage(
size: CGSize(width: bottomNavBar.slider.frame.width, height: 2),
colorSet: [minTrackStartColor.cgColor, maxTrackColor.cgColor]),
for: .normal)
bottomNavBar.slider.setMaximumTrackImage(try bottomNavBar.gradientImage(
size: CGSize(width: bottomNavBar.slider.frame.width, height: 2),
colorSet: [minTrackStartColor.cgColor, maxTrackColor.cgColor]),
for: .normal)
let thumb = UIView(frame: CGRect(x: 0, y: 0, width: 19, height: 10))
thumb.backgroundColor = UIColor(red: 222/255, green: 222/255, blue: 222/255, alpha: 1)
thumb.layer.cornerRadius = 5
bottomNavBar.slider.setThumbImage(thumb.asImage(), for: .normal)
} catch {
bottomNavBar.slider.minimumTrackTintColor = minTrackStartColor
bottomNavBar.slider.maximumTrackTintColor = maxTrackColor
}
}
In uislider, greadient is set as above code.
I want to color the thumb of the location according to the movement of the thumb.
How can I extract the uislider gradient color at the thumb position?
Try to create a gradient layer and update startPoint, endPoint and location depending on your current slider value.
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [colorStart.cgColor, colorEnd.cgColor]
gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)
gradientLayer.locations = [0, 1]
gradientLayer.frame = bounds
I have two view controllers, VC1 and VC2, First I present VC1 and programmatically create Nav Bar and place two buttons in that, after that I present VC2 and the same I create navbar programmatically. Now when i dimiss VC2 to VC1 it cuts the view to half of navbar and button also get cutoff. I have tried different solutions but not getting it fixed. I'm confused why it is cutting the view? This is my code to create navbar in VC1,
let width = self.view.frame.width
let navigationBar: UINavigationBar = UINavigationBar(frame: CGRect(x: 0, y: 20, width: width, height: 64))
UINavigationBar.appearance().barTintColor = .white
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().isTranslucent = false
self.view.addSubview(navigationBar);
let navigationItem = UINavigationItem(title: "Owners")
self.title = "Owners"
let cancelBtn = UIButton()
let searchBtn = UIButton()
cancelBtn.setImage(UIImage.init(named: "cancelBtn")?.tint(with: #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)), for: .normal)
cancelBtn.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
cancelBtn.addTarget(self, action: #selector(onTapBack), for: .touchUpInside)
let suggestButtonContainer = UIView(frame: cancelBtn.frame)
suggestButtonContainer.addSubview(cancelBtn)
searchBtn.setImage(Icon.cm.search?.tint(with: #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)), for: .normal)
searchBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
searchBtn.addTarget(self, action: #selector(onTapSearch), for: .touchUpInside)
let searchView = UIView(frame: searchBtn.frame)
searchView.addSubview(searchBtn)
let searchButtonItem = UIBarButtonItem(customView: searchView)
let suggestButtonItem = UIBarButtonItem(customView: suggestButtonContainer)
navigationItem.leftBarButtonItem = suggestButtonItem
navigationItem.rightBarButtonItem = searchButtonItem
navigationBar.setItems([navigationItem], animated: false)
and this is how i create VC2 navbar,
let width = self.view.frame.width
let navigationBar: UINavigationBar = UINavigationBar(frame: CGRect(x: 0, y: 25, width: width, height: 64))
UINavigationBar.appearance().barTintColor = .white
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().isTranslucent = false
self.view.addSubview(navigationBar);
let navigationItem = UINavigationItem(title: "Owners")
self.title = "Owners"
let cancelBtn = UIButton()
cancelBtn.setImage(UIImage.init(named: "cancelBtn")?.tint(with: #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)), for: .normal)
cancelBtn.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
cancelBtn.addTarget(self, action: #selector(onTapBack), for: .touchUpInside)
let suggestButtonContainer = UIView(frame: cancelBtn.frame)
suggestButtonContainer.addSubview(cancelBtn)
let suggestButtonItem = UIBarButtonItem(customView: suggestButtonContainer)
navigationItem.leftBarButtonItem = suggestButtonItem
navigationBar.setItems([navigationItem], animated: false)
Now when is dismiss from VC2 to VC1 it shows navbar like this,
I think the problem come from the status bar height.
20pt for iPhone 6, 7, 8, ..., and 44pt for iPhones with a notch.
try to set the navigation bar frame origin.y to UIApplication.shared.statusBarFrame.height
let navigationBar: UINavigationBar = UINavigationBar(frame: CGRect(x: 0, y: UIApplication.shared.statusBarFrame.height, width: width, height: 64))
I am not sure if I understand the concept of Masking correctly but I am trying to recreate the Twitter logo expansion animation in their app:
Twitter Logo expansion
I have this code so far:
class LaunchScreenViewController: UIViewController {
var mask: CALayer!
override func viewDidLoad() {
setUpViewMask()
}
func setUpViewMask() {
mask = CALayer()
mask.contents = UIImage(named: "logo_mask")?.cgImage
mask.contentsGravity = kCAGravityResizeAspect
mask!.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
mask!.anchorPoint = CGPoint(x: 0.5, y: 0.5)
mask!.position = CGPoint(x: view.frame.size.width/2, y: view.frame.size.height/2)
view.layer.backgroundColor = UIColor(red: 70/255, green: 154/255, blue: 233/255, alpha: 1).cgColor
view.layer.mask = mask
}
}
The output of this is:
How would I change the black background to be blue? I tried doing but it didn't seem to work:
view.layer.backgroundColor = UIColor(red: 70/255, green: 154/255, blue: 233/255, alpha: 1).cgColor
Create an intermediate layer where you apply mask. Set the background of your view to the desired background, and set background color of the intermediate layer to the color that you wish your mask to appear in. Something like this,
view.backgroundColor = UIColor(red: 70/255, green: 154/255, blue: 233/255, alpha: 1) // set background of the view portion that do not include mask
let parentLayer = CALayer()
parentLayer.frame = view.bounds
parentLayer.backgroundColor = UIColor.white.cgColor // sets background of mask
view.layer.addSublayer(parentLayer)
let mask = CALayer()
mask.contents = UIImage(named: "twitter.png")?.cgImage
mask.contentsGravity = kCAGravityResizeAspect
mask.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
mask.anchorPoint = CGPoint(x: 0.5, y: 0.5)
mask.position = CGPoint(x: view.frame.size.width/2, y: view.frame.size.height/2)
parentLayer.mask = mask
This can be achieved by changing the background color of appDelegate's window...
let appDelegate = UIApplication.shared.delegate as! AppDelegate
appDelegate.window!.backgroundColor = UIColor.blue
I am using expandable tableView, which is show/hide on click sectionHeader.
As I want to add Label/Button on HeaderView. but at the time of scrolling the label show/hide automatically. but I doesn't want label is disappear on scroll of tableView.
My Code is -
func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
// Background view is at index 0, content view at index 1
if let bgView = view.subviews[0] as? UIView
{
if section == 0 {
let labelValue = UILabel(frame: CGRect(x: 5, y: 80, width: 40, height: 20))
labelValue.backgroundColor = UIColor.greenColor()
bgView.addSubview(labelValue)
}
if section == 1{
let labelValue = UILabel(frame: CGRect(x: 5, y: 80, width: 40, height: 20))
labelValue.backgroundColor = UIColor.redColor()
bgView.addSubview(labelValue)
}
if section == 2{
let labelValue = UILabel(frame: CGRect(x: 5, y: 80, width: 40, height: 20))
labelValue.backgroundColor = UIColor.yellowColor()
bgView.addSubview(labelValue)
}
if section == 3{
let labelValue = UILabel(frame: CGRect(x: 5, y: 80, width: 40, height: 20))
labelValue.backgroundColor = UIColor.blueColor()
bgView.addSubview(labelValue)
}
}
view.layer.borderColor = UIColor.blackColor().CGColor
view.layer.borderWidth = 0.3
}
ViewForHeaderSection
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = HeaderView(tableView: self.customTableView, section: section)
headerView.backgroundColor = UIColor.whiteColor()
let label = UILabel(frame: headerView.frame)
label.textAlignment = NSTextAlignment.Center
label.font = UIFont (name: "HelveticaNeue-Light", size: 16)
label.textColor = UIColor.blackColor()
let labelValue = UILabel(frame: CGRect(x: 14, y: 15, width: 43, height: 32))
labelValue.textAlignment = NSTextAlignment.Center
labelValue.textColor = UIColor.whiteColor()
labelValue.font = UIFont(name: "HelveticaNeue-Bold", size: 13)
labelValue.text = "14"
//let btnExpand = UIButton(frame: headerView.frame)
let btnExpand = UIButton(frame:CGRect(x: 320, y: 17, width: 24, height: 24))
btnExpand.setBackgroundImage(UIImage(named: "expand"), forState: .Normal)
btnExpand.addTarget(self, action: #selector(HomeViewController.expandTableView), forControlEvents: .TouchUpInside)
if section == 0 {
label.text = "Runing Vehicle"
labelValue.backgroundColor = UIColor(red: 14/255.0, green: 76/255.0, blue: 12/255.0, alpha: 1.0)
btnExpand.addTarget(self, action: #selector(HomeViewController.expandTableView), forControlEvents: .TouchUpInside)
}
if section == 1 {
label.text = "Idle Vehicle"
labelValue.backgroundColor = UIColor(red: 148/255.0, green: 0/255.0, blue: 11/255.0, alpha: 1.0)
}
if section == 2 {
label.text = "Vehicle AT POI"
labelValue.backgroundColor = UIColor(red: 162/255.0, green: 136/255.0, blue: 5/255.0, alpha: 1.0)
}
if section == 3 {
label.text = "All Vehicle"
labelValue.backgroundColor = UIColor(red: 31/255.0, green: 61/255.0, blue: 127/255.0, alpha: 1.0)
}
headerView.addSubview(label)
headerView.addSubview(labelValue)
headerView.addSubview(btnExpand)
return headerView
}
func expandTableView(){
print("Hello")
customTableView.contentSize = CGSizeMake(375, 667)
}
You need to add that small label with that background color inside viewForHeaderInSection method because with willDisplayHeaderView it will add that label multiple time, so change your viewForHeaderInSection and remove the willDisplayHeaderView method.
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = HeaderView(tableView: self.customTableView, section: section)
headerView.backgroundColor = UIColor.whiteColor()
let label = UILabel(frame: headerView.frame)
label.textAlignment = NSTextAlignment.Center
label.font = UIFont (name: "HelveticaNeue-Light", size: 16)
label.textColor = UIColor.blackColor()
let labelValue = UILabel(frame: CGRect(x: 0, y: 0, width: 50, height: headerView.frame.size.height))
if section == 0 {
label.text = "Runing Vehicle"
labelValue.backgroundColor = UIColor.greenColor()
}
if section == 1 {
label.text = "Idle Vehicle"
labelValue.backgroundColor = UIColor.redColor()
}
if section == 2 {
label.text = "Vehicle AT POI"
labelValue.backgroundColor = UIColor.yellowColor()
}
if section == 3 {
label.text = "All Vehicle"
labelValue.backgroundColor = UIColor.blueColor()
}
headerView.addSubview(label)
headerView.addSubview(labelValue)
return headerView
}
Edit: Change your last line of code that return the headerView like this
headerView.addSubview(label)
headerView.addSubview(labelValue)
headerView.addSubview(btnExpand)
headerView.sendSubviewToBack(label)
headerView.bringSubviewToFront(btnExpand)
return headerView