I'm adding CALayer to top and bottom of scrollable objects (UIScrollView, TableView, CollectionView) to display them when there is a content behind the visible area.
class TableViewWithCALayers: UITableView {
var topGradientLayer: CAGradientLayer?
var bottomGradientLayer: CAGradientLayer?
override func layoutSubviews() {
super.layoutSubviews()
guard self.topGradientLayer != nil && self.bottomGradientLayer != nil else {
addGradientLayerToTop() // create layer, set frame, etc.
addGradientLayerToBottom()
return
}
// addGradientLayerToTop()// if uncomment it - multiple layers are created and they are visible, but this is not the solution...
handleLayerAppearanceAfterLayoutSubviews() // playing with opacity here
}
How I create layer:
func addGradientLayerToTop() {
if let superview = superview {
self.topGradientLayer = CAGradientLayer()
let colorTop = UIColor.redColor().CGColor
let colorBottom = UIColor.clearColor().CGColor
if let topLayer = self.topGradientLayer {
topLayer.colors = [colorTop, colorBottom]
topLayer.locations = [0.0, 1.0]
topLayer.frame = CGRect(origin: self.frame.origin, size: CGSizeMake(self.frame.width, self.layerHeight))
superview.layer.insertSublayer(topLayer, above: self.layer)
if (self.contentOffset.y == 0) {
// if we are at the top - hide layer
// topLayer.opacity = 0.0 //temporarily disabled, so it is 1.0
}
}
}
}
TableViewWithCALayers works nice everywhere, except using TableView with xib files:
class XibFilesViewController : CustomUIViewController, UITableViewDelegate, UITableViewDataSource {
#IBOutlet var tableView: TableViewWithCALayers!
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.registerNib(UINib(nibName: "CustomTableViewCell", bundle: NSBundle.mainBundle()), forCellReuseIdentifier: "CustomTableViewCell")
self.tableView.layer.masksToBounds = false // this line doesn't help...
}
CustomUIViewController is used in many other ViewControllers where TableViewWithCALayers works good, so it should not create a problem.
Layers at the top and bottom appear for one second, then disappear. Logs from LayoutSubviews() func say that they are visible and opacity are 1.0, but something covers them. What can it be and how to deal with that?
Any help is appreciated!)
topLayer.zPosition = 10000 //doesn't help
topLayer.masksToBounds = false //doesn't help as well
When using nib files it's good practice, and design to add the UIView that you want to draw the layer on into your prototype cell, or header/footed and then have that view confirm to your class that's actually handling the layer.
Related
I created a UIView, called CircleView, that draws a circle. This was added with a click of a button and located with a UITapGestureRecognizer in another view, canvasView, as a subview.
This is the code for circle and it works:
#IBAction func tapCircle(_ sender: UITapGestureRecognizer) {
let tapPoint2 = sender.location(in: canvasView)
let shapeCircle = CircleView(origin: tapPoint2)
canvasView.addSubview(shapeCircle)
shapeCircle.tag = 300
}
#IBAction func circleDraw(_ sender: UIButton) {
canvasView.isUserInteractionEnabled = true
tapCircle.isEnabled = true
tapRect.isEnabled = false
tapGRQ.isEnabled = false
canvasView.setNeedsDisplay()
}
It's all okay but i'm wondering if it is possible to change the color of this shape with a click of a button. Thanks a lot.
Create global variables for arrays of shapes
var circleShapes = [UIView]()
var squareShapes = [UIView]()
...
then append new UIView to certain array after you create it
let shapeCircle = CircleView(origin: tapPoint2)
canvasView.addSubview(shapeCircle)
circleShapes.append(shapeCircle)
...
now just change backgroundColor for each view inside certain array
circleShapes.forEach { $0.backgroundColor = /* UIColor */ }
...
Or if your canvasView contains just shapes subviews, every shape has its own UIView subclass and you want to change colors in the same time, you can change backgroundColor depending on type of shape
canvasView.subviews.forEach {
switch $0 {
case is CircleView:
$0.backgroundColor = /* UIColor */
case is SquareView:
$0.backgroundColor = /* UIColor */
...
default:
continue
}
}
Sample project can be found at https://github.com/SRowley90/LargeTitleIssueTestiOS
I am trying to position a segmented control below the Large title in an iOS app. I have a UIToolbar which contains the segmented control inside.
When scrolling up the title and toolbar behave as expected.
When scrolling down the navigation bar is correct, but it doesn't push the UITabBar or the UITableView down, meaning the title goes above the segmented control as can be seen in the images below.
I'm pretty sure it's something to do with the constraints I have set, but I can't figure out what.
The TabBar is fixed to the top, left and right.
The TableView is fixed to the bottom, left and right.
The tableView is fixed vertically to the TabBar
I have the position UITabBarDelegate method set:
func position(for bar: UIBarPositioning) -> UIBarPosition {
return .topAttached
}
Take the delegation of the tableView somewhere:
tableView.delegate = self
Override the scrollViewDidScroll and update toolbar position appearance (since the real position should not change according to have that nice bounce effect.
extension ViewController: UIScrollViewDelegate {
override func scrollViewDidScroll(_ scrollView: UIScrollView) {
var verticalOffset = scrollView.contentOffset.y + defaultNavigationBarHeight
if scrollView.refreshControl?.isRefreshing ?? false {
verticalOffset += 60 // After is refreshing changes its value the toolbar goes 60 points down
print(toolbar.frame.origin.y)
}
if verticalOffset >= 0 {
toolbar.transform = .identity
} else {
toolbar.transform = CGAffineTransform(translationX: 0, y: -verticalOffset)
}
}
}
You can use the following check before applying transformation to make it more reliable and natural to default iOS style:
if #available(iOS 11.0, *) {
guard let navigationController = navigationController else { return }
guard navigationController.navigationBar.prefersLargeTitles else { return }
guard navigationController.navigationItem.largeTitleDisplayMode != .never else { return }
}
Using UIScrollViewDelegate didn't work well with CollectionView and toolbar for me. So, I did:
final class CollectionViewController: UICollectionViewController {
private var observesBag: [NSKeyValueObservation] = []
private let toolbar = UIToolbar()
override func viewDidLoad() {
super.viewDidLoad()
let statusBarHeight = UIApplication.shared.statusBarFrame.height
let navigationBarHeight = navigationController?.navigationBar.frame.height ?? 0
let defaultNavigationBarHeight = statusBarHeight + navigationBarHeight
let observation = navigationController!
.navigationBar
.observe(\.center, options: NSKeyValueObservingOptions.new) { [weak self] navBar, _ in
guard let self = self else { return }
let newNavigatonBarHeight = navBar.frame.height + statusBarHeight
let yTranslantion = newNavigatonBarHeight - defaultNavigationBarHeight
if yTranslantion > 0 {
self.toolbar.transform = CGAffineTransform(
translationX: 0,
y: yTranslantion
)
} else {
self.toolbar.transform = .identity
}
}
observesBag.append(observation)
}
}
Observe the "center" of the navigationBar for changes and then translate the toolbar in the y-axis.
Even though it worked fine when I tried to use this solution with UIRefreshControl and Large Titles it didn't work well.
I set up the refresh control like:
private func setupRefreshControl() {
let refreshControl = UIRefreshControl()
self.webView.scrollView.refreshControl = refreshControl
}
the height of the UINavigationBar is changed after the complete refresh triggers.
I wrote my function to insert a layer (addsubview) to my main view, i gave it vars to manage size and colors for its gradient background with an opacity at 1. I inserted with an index etc...
Now, i would like to manage the opacity of this gradient (background) sublayer through actions :
I'm able to remove it, play with the general opacity of the subview... but impossible to target the opacity of this sublayer at index 0.
Any idea ?
in my viewdidLoad func :
func insertHeader () {
self.view.addSubview(TopMenuView)
TopMenuView.frame.size.width = self.view.bounds.size.width
let gradient:CAGradientLayer = CAGradientLayer()
let colorTop = UIColor(RGBa).cgColor
let colorBottom = UIColor(RGBa).cgColor
//etc
gradient.opacity = 1.0
TopMenuView.layer.insertSublayer(gradient, at: 0)
}
And later, unable to target the opacity of this sublayer gradient...
I can manage the whole opacity of the TopMenuView.layer but not its "background gradient layer"
You should be able to create a reference to the gradient layer...
class ViewController: UIViewController {
var topMenuGradient = CAGradientLayer()
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(TopMenuView)
TopMenuView.frame.size.width = self.view.bounds.size.width
let colorTop = UIColor(RGBa).cgColor
let colorBottom = UIColor(RGBa).cgColor
//etc
topMenuGradient.frame = TopMenuView.bounds
topMenuGradient.opacity = 0.5
TopMenuView.layer.insertSublayer(topMenuGradient, at: 0)
}
#IBAction func btnTapped(_ sender: Any) {
topMenuGradient.opacity = 0.1
}
}
My problem is, that I have a tableview with a number of cells. Inside of those cells there are images, that get a green border if they are being taped. If I have a lot of cells and I tap for example the first pic in the first cell, that's when the problem happens. When I start scrolling down the table a little faster, other cells of the same type also have the first picture with green border, even though they are in cell number 13 or something. I think that's because they are reusable cells, but how can I make sure, that only the one cell that is being taped, keeps the change? Hope you guys got what I meant, I know it's kinda confusing. Here is one of the two custom cells, with the code that turns the border green. The images of type bouncingRoundImages, are just UIImages, I created the custom subclass of UIImage to make them bounce.
class TwoPicsTableViewCell: UITableViewCell {
#IBOutlet var containerView: UIView!
#IBOutlet var firstImage: bouncingRoundImageView!
#IBOutlet var secondImage: bouncingRoundImageView!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
containerView.layer.cornerRadius = 10
containerView.clipsToBounds = true
setupFirstImage()
setupSecondImage()
}
func setupFirstImage() {
let tappedOne = UITapGestureRecognizer(target: self, action: #selector(checkPicTwo))
firstImage.addGestureRecognizer(tappedOne)
}
func setupSecondImage() {
let tappedTwo = UITapGestureRecognizer(target: self, action: #selector(checkPicOne))
secondImage.addGestureRecognizer(tappedTwo)
}
func checkPicTwo() {
firstImage.bouncing()
if secondImage.layer.borderWidth != 0 {
secondImage.layer.borderWidth = 0
}
}
func checkPicOne() {
secondImage.bouncing()
if firstImage.layer.borderWidth != 0 {
firstImage.layer.borderWidth = 0
}
}
}
It sounds like a reusable cell problem. Try setting the image to nil and borderWidth to 0 in prepareForReuse.
override func prepareForReuse()
{
super.prepareForReuse()
firstImage.image = nil
secondImage.image = nil
firstImage.layer.borderWidth = 0
secondImage.layer.borderWidth = 0
}
I'm building a keyboard using Swift (XCode 6 with iOS 8.3 SDK) and when I load the xib, the keyboard is about 1000 pixels too wide and tall. I've, in the freeform xib file, put all my keys in a UIView and set the UIViews constraints to superview top, bottom, left and right.
As you can see, the result is annoying. Here's my code:
import UIKit
class KeyboardViewController: UIInputViewController {
var BlurBoardView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
loadInterface()
}
func loadInterface() {
//load the nib file
var blurboardNib = UINib(nibName: "BlurBoardView", bundle: nil)
// initiate the view
BlurBoardView = blurboardNib.instantiateWithOwner(self, options: nil)[0] as! UIView
// add the interface to the main view
view.addSubview(BlurBoardView)
// copy the background color
view.backgroundColor = BlurBoardView.backgroundColor
let blur = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffectStyle.Light))
blur.frame = view.frame
view.addSubview(blur)
}
#IBAction func didTapButton(sender: AnyObject?) {
let button = sender as! UIButton
let title = button.titleForState(.Normal)
var proxy = textDocumentProxy as! UITextDocumentProxy
switch title as String!{
case "<" :
proxy.deleteBackward()
case "RETURN" :
proxy.insertText("\n")
case " " :
proxy.insertText(" ")
case "CHG" :
self.advanceToNextInputMode()
default :
proxy.insertText(title!)
}
}
/*
override func textWillChange(textInput: UITextInput) {
// The app is about to change the document's contents. Perform any preparation here.
}
override func textDidChange(textInput: UITextInput) {
// The app has just changed the document's contents, the document context has been updated.
var textColor: UIColor
var proxy = self.textDocumentProxy as! UITextDocumentProxy
if proxy.keyboardAppearance == UIKeyboardAppearance.Dark {
textColor = UIColor.whiteColor()
} else {
textColor = UIColor.blackColor()
}
//self.nextKeyboardButton.setTitleColor(textColor, forState: .Normal)
}
*/
}
The keyboard, in it's precompiled xib looks like this:
You can also see the parent (of the keys) views constraints.
I'm mainly an Objective-C developer, so the code makes sense, but the issue might just be a huge SBE because of Swift, so sorry if it's ridiculously simple ;)
edit: The P key has a constraint to tie it 14 pixels to the left superview, and 0 pixels to the right (to the O key) which is how I know it's way too wide. Keyboard bottom constraint is to bottom of superview.
Look like you're using Autolayout and you're not setting constraints between your view and your BlurBoardView.
When ViewDidLoad is called, the view doesn't have its right frame. It's only when viewDidLayoutSubviews is called.
So set constraints between your view and your BlurBoardView in ViewDidLoad. Or put BlurBoardView.frame = the frame your wish in viewDidLayoutSubview.
Same thing for your blurView