I still don't understand how I should get the updated frame of a UIView, when using autolayout.
Let's say I:
Setup some views using autolayout.
Make an HTTP request to get some data.
When I get the data, I want to draw it but I need the updated frame size of a view.
How should I go about it?
My guess, but it's wrong:
layoutMyViews()
makeHttpRequest(callback)
func callback(data: MyData) {
drawData(data, into:dataView)
}
func drawData(data: MyData, into view:UIView) {
let size = view.frame.size
// Here I want to draw data into view, depending on size, but it may be (0,0)
}
Here's just an example UIViewController - you can start your call in view did load and block the ui or at least indicate activity and then when that call completes you can update the UI based off of whatever current view properties you'd like.
class ViewController: UIViewController {
// You can start accessing view properties from the storyboard here.
override func viewDidLoad() {
super.viewDidLoad()
print(self.view.frame) // Outputs the frame of the view controller's view.
// Do any additional setup after loading the view, typically from a nib.
}
override func viewDidLayoutSubviews() {
}
override func viewWillAppear(animated: Bool) {
}
override func viewDidAppear(animated: Bool) {
}
}
This is more or less what I'm doing right now. If anyone can suggest a better alternative please post or comment about it.
As you will see, in drawDataIfPossible() I check that both the data is set and the frame size is set. I check both because drawDataIfPossible() is called from these two functions:
drawData(data: MyData), which might be called before the frame size is set
layoutSubviews(), which might be called before the data is set.
.
class Controller : UIViewController {
// Here I will draw some data that comes from server
var dataView: MyDataView!
override func viewDidLoad() {
super.viewDidLoad()
// Here I add the views using autolayout, including dataView
layoutMyViews()
// Here I make the http request to get data
makeHttpRequest(callback)
}
/** When the data comes, I tell the dataView to draw itself */
func callback(data: MyData) {
dataView.drawData(data)
}
//...
}
class MyDataView : UIView {
var data: MyData!
/** Draws the data in the view */
func drawData(data: MyData) {
self.data = data
drawDataIfPossible()
}
func drawDataIfPossible() {
// Here I check I have the data and that the frame size is set
if data != nil && frame.size.width > 0 {
drawData()
}
}
/** Draws data in the view (needs the frame size) */
func drawData {
// ...
}
override func layoutSubviews()
{
super.layoutSubviews()
layoutIfNeeded() // seems to be necessary for the frame size to be set
drawDataIfPossible()
}
}
Related
I have added a collectionView on top of a UITabBar but its touch is not working.The screeshot for the tabBar and collectionView
The code is attached below, I want the collectionView to be touchable. Here quickAccessView is the UIView that contains the collectionView. For constraints I'm using snapKit
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
self.tabBar.bringSubviewToFront(quickAccessView)
}
private func setupQuickAccessView(){
print("this is tabBar's height", self.tabBar.frame.size.height)
self.tabBar.frame.size.height = 150
print("this is new tabBar's height", self.tabBar.frame.size.height)
self.tabBar.addSubview(quickAccessView)
quickAccessView.clipsToBounds = true
}
private func addQuickAccessViewConstraints(){
quickAccessView.snp.makeConstraints { make in
make.right.left.equalTo(self.tabBar.safeAreaLayoutGuide)
make.height.equalTo(76)
make.bottom.equalTo(self.tabBar.snp.bottom).offset(-80)
}
}
this is after modification that Aman told
The UITabBarController
final class MainTabBarController: UITabBarController {
private lazy var quickAccessView: QuickAccessView = .fromNib()
var quickAccessSupportedTabBar: QuickAccessSupportedTabBar {
self.tabBar as! QuickAccessSupportedTabBar // Even code is crashing here
}
// Even code is crashing here
override func viewDidLoad() {
super.viewDidLoad()
self.tabBar.backgroundColor = .white
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
self.view.frame = self.quickAccessView.bounds
setupUI()
}
}
extension MainTabBarController{
private func setupUI(){
setupQuickAcessView()
addQuickAcessViewConstraints()
}
}
// MARK: - Setting Up Quick Access view
extension MainTabBarController {
private func setupQuickAcessView(){
self.quickAccessSupportedTabBar.addSubview(quickAccessView)
}
private func addQuickAcessViewConstraints(){
quickAccessView.snp.makeConstraints { make in
make.left.right.equalTo(self.quickAccessSupportedTabBar.safeAreaLayoutGuide)
make.height.equalTo(66)
make.bottom.equalTo(self.quickAccessSupportedTabBar.snp.top)
}
}
}
the UItabBar and here it is throwing error and I too am confuse that how to access it and convert it to points
class QuickAccessSupportedTabBar: UITabBar {
override public func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
// if `quickAccessView` is visible, then convert `point` to its coordinate-system
// and check if it is within its bounds; if it is, then ask `quickAccessView`
// to perform the hit-test; you may skip the `isHidden` check, in-case this view
// is always present in your app; I'm assuming based on your screenshot that
// the user can dismiss / hide the `quickAccessView` using the cross icon
if !quickAccessView.isHidden {
// Convert the point to the target view's coordinate system.
// The target view isn't necessarily the immediate subview
let targetPoint = quickAccessView.convert(point, from: self)
if quickAccessView.bounds.contains(targetPoint) {
// The target view may have its view hierarchy, so call its
// hitTest method to return the right hit-test view
return quickAccessView.hitTest(targetPoint, with: event)
}
}
// else execute tabbar's default implementation
return super.hitTest(point, with: event)
}
}
I think what may be happening here is that since you've added quickAccessView as tab bar's subview, it is not accepting touches. This would be so because the tabbar's hist test will fail in this scenario.
To get around this, instead of using a UITabBar, subclass UITabBar, let us call it ToastyTabBar for reference. See the code below:
class ToastyTabBar: UITabBar {
override public func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
// if `quickAccessView` is visible, then convert `point` to its coordinate-system
// and check if it is within its bounds; if it is, then ask `quickAccessView`
// to perform the hit-test; you may skip the `isHidden` check, in-case this view
// is always present in your app; I'm assuming based on your screenshot that
// the user can dismiss / hide the `quickAccessView` using the cross icon
if !quickAccessView.isHidden {
// Convert the point to the target view's coordinate system.
// The target view isn't necessarily the immediate subview
let targetPoint = quickAccessView.convert(point, from: self)
if quickAccessView.bounds.contains(targetPoint) {
// The target view may have its view hierarchy, so call its
// hitTest method to return the right hit-test view
return quickAccessView.hitTest(targetPoint, with: event)
}
}
// else execute tabbar's default implementation
return super.hitTest(point, with: event)
}
}
Set this as the class of your tabBar (both in the storyboard and the swift file), and then see if that solves it for you.
You'll have to figure out a way to make quickAccessView accessible to the tabbar for the hit test check. I haven't advised on that above because I'm not familiar with your class hierarchy, and how and where you set stuff up, but this should be trivial.
If this solves it for you, please consider marking this as the answer, and if it does not then please share a little more info here about where you're having the problem.
Edit (for someone using a UITabBarController):
In response to your comment about "how to access UITabBar class from UITabBarController" here's how I would go about it.
I'm assuming you have a storyboard with the UITabBarController.
The first step (ignore this step if you already have a UITabBarController custom subclass) is that you need to subclass UITabBarController. Let us call this class ToastyTabBarController for reference. Set this class on the UITabBarController in your storyboard using the identity inspector pane in xcode.
The second step is to set the class of the UITabBar in your storyboard as ToastyTabBar (feel free to name it something more 'professional' 😊).
This is to be done in the same storyboard, in your UITabBarController scene itself. It will show the tabBar under your UITabBarController, and you can set the custom class on it using the identity inspector pane just like earlier.
The next step is to expose a computed property on your custom UITabBarController class, as shown below.
var toastyTabBar: ToastyTabBar {
self.tabBar as! ToastyTabBar
}
And that's it. Now you have a property on your UITabBarController subclass which is of ToastyTabBar type and you can use this new property, toastyTabBar, however you require.
Hope this helps.
I'm new to swift and Xcode so there may be a simple answer or better way to do this. I am trying to make rounded edges to my buttons in all size iOS devices and the best way that I have found so far is using this method:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
for i in 0..<buttons.count {
self.buttons[i].layer.cornerRadius = self.buttons[i].bounds.size.height / 2
}
examResultsBackButtonOutlet.layer.cornerRadius = examResultsBackButtonOutlet.bounds.size.height / 2
}
// Build UI
func loadUI() {
// Round the edges, change color background, font
titleOutlet.mainMenuStyle("", 75, earthGreenWithAlpha)
for i in 0..<buttons.count {
buttons[i].mainMenuStyle("", 40)
}
print("Main Menu successful load")
}
I call the loadUI() method in my viewDidLoad method for what its worth:
//MARK: viewDidLoad()
override func viewDidLoad() {
super.viewDidLoad()
// Load the UI
loadUI()
loadExamResultsView()
mainMenu()
examResultsStackView.isHidden = true
loadStoredScores()
loadStoredSettings()
}
The issue presents itself not when I start the app for the first time (this is the first scene/View Controller), rather the issue occurs when I segue back to this scene from my second View Controller.
What happens is the buttons are formatted weird for about a half a second, then they are reformatted perfectly:
Correctly formatted screenshot
Incorrectly formatted screenshot
You'll notice the second image (which only occurs for about 0.5 seconds) has much more intense corner radius'.
How can I prevent this from happening so that the user only sees the perfectly round corner radius' for each button and not the poor janky ones?
Thanks!
Thanks for everyone's feedback but here is what fixed it for me:
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
for i in 0..<buttons.count {
self.buttons[i].layer.cornerRadius = self.buttons[i].bounds.size.height / 2
}
examResultsBackButtonOutlet.layer.cornerRadius = examResultsBackButtonOutlet.bounds.size.height / 2
}
This replaced the original post:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
for i in 0..<buttons.count {
self.buttons[i].layer.cornerRadius = self.buttons[i].bounds.size.height / 2
}
examResultsBackButtonOutlet.layer.cornerRadius = examResultsBackButtonOutlet.bounds.size.height / 2 }
Thanks!
Maybe you can try this:
https://imgur.com/a9kTt98
or add to extension of UIView
extension UIView {
#IBInspectable var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = (newValue > 0)
}
}
}
I am having auto layout issues with an embed YouTube video. In fact Apple have just rejected the App I have sent them on these grounds. This is the code that I have submitted.
import UIKit
class ImproveViewController: UIViewController {
#IBOutlet weak var videoView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
let youTubeUrl = "https://www.youtube.com/embed/NpepI1dtIz8"
videoView.allowsInlineMediaPlayback = true
dispatch_async(dispatch_get_main_queue(), { () -> Void in
self.videoView.loadHTMLString("<iframe width=\"\(self.videoView.frame.width)\" height=\"\(self.videoView.frame.height)\" src=\"\(youTubeUrl)\" frameborder=\"0\" allowfullscreen></iframe>", baseURL: nil)
print("This is run on the main queue, after the previous code in outer block")
})
// Do any additional setup after loading the view.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
// Get the new view controller using segue.destinationViewController.
// Pass the selected object to the new view controller.
}
*/
}
This what is looks like when I run in the simulator.
How can this be fixed? Any help will be greatly appreciated. I have added the Web View constraints to the entire screen. Thanks again for your help.
Your code look okay and I have tested it. I think you have problem in constraints.
Just add Top, Bottom, Leading and trailing constraints with constants = 0 to superview
I am working on an application that has different UI constraints and control positions for portrait and landscape. These are all done on the storyboard. In addition to this, I am repositioning controls based on a user shutting off one of the controls. I am doing this by grabbing the frame for each of the controls in viewDidLoad. Once I have these values, then it is easy to reposition the controls and restore them to what they should be when unhidden. The thing is that I need all of the frames for both portrait and landscape. That way I can do the repositioning regardless of orientation.
How can I get the control positioning information for both portrait and landscape when coming through viewDidLoad? Is there any way to do this?
After adding constraints to a view, and the view readjusting its position and size according to device size and orientation. This readjusting of the view size is done in the method viewDidLayoutSubviews, which is called after viewDidAppear.
If you can log out the positions and size of the control in this method, you will get the updated (size and position as it is seen in the device).
But this method is called multiple times after viewDidAppear, so if you want to add anything i recommend adding the control in viewDidLoad and then updating the position in this method.
After working with this a bit more, I came up with this:
import UIKit
class ViewController: UIViewController {
var pButtonFrame: CGRect!
var lButtonFrame: CGRect!
#IBOutlet weak var testButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
NSNotificationCenter.defaultCenter().addObserver(self, selector: "screenRotated", name: UIDeviceOrientationDidChangeNotification, object: nil)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func screenRotated() {
//Set this only once, the first time the orientation is used.
if lButtonFrame == nil && UIDeviceOrientationIsLandscape(UIDevice.currentDevice().orientation)
{
lButtonFrame = testButton.frame
}
else if pButtonFrame == nil && UIDeviceOrientationIsPortrait(UIDevice.currentDevice().orientation)
{
pButtonFrame = testButton.frame
}
}
}
I set up a test button and positioned it using constraints on the storyboard. I added an observer to NSNotificationCenter to watch for screen rotation. I'm storing the frames for each of the orientations in CGRect variables. By checking each of the variables for nil, I can ensure that they only get set once, before I have done any modifications to the screen. That way, I can restore the values to their originals, if needed. I can set up the showing and hiding of controls here, or in viewDidLayoutSubviews.
import UIKit
class ViewController: UIViewController {
var pButtonFrame: CGRect!
var lButtonFrame: CGRect!
#IBOutlet weak var btntest: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
screenRotate()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func screenRotate() {
//Set this only once, the first time the orientation is used.
if lButtonFrame == nil && UIDeviceOrientationIsLandscape(UIDevice.currentDevice().orientation)
{
lButtonFrame = btntest.frame
}
else if pButtonFrame == nil && UIDeviceOrientationIsPortrait(UIDevice.currentDevice().orientation)
{
pButtonFrame = btntest.frame
}
}
}
I wanna display a couple of images from the assets folders, into my application. so I wanna make a page view.
First, images will be inside collection view, then on click, the image will be full screen. Then the user can slide between the images by swiping right and left as shown in the following photo:
I found this tutorial:
PhotosGalleryApp
Updated:
I have this in my storyboard:
Now in GaleryViewController I show the images in cells
when user click on it, I open the image in fullscreen in PhotoViewController.
PhotoViewController.swift :
import UIKit
class PhotoViewController: UIViewController{
#IBOutlet weak var imageView: UIImageView!
var index: Int = 0;
var pageViewController : UIPageViewController?
#IBAction func btnCancelClicked(sender: AnyObject) {
self.navigationController?.popToRootViewControllerAnimated(true);
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
initUI();
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func viewWillAppear(animated: Bool) {
self.navigationController?.hidesBarsOnTap = true;
self.navigationController?.hidesBarsOnSwipe = true;
displayPhoto()
}
func initUI() -> Void {
// pageViewController = UIPageViewController(transitionStyle: .Scroll, navigationOrientation: .Horizontal, options: nil)
// pageViewController!.dataSource = self
}
func displayPhoto() {
self.imageView.image = UIImage(named: Constants.Statics.images[index])
}
I have the images in static structure so i can access them anywhere:
class Constants {
struct Statics {
static let images = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","7.jpg","8.jpg"]
}
}
My problem is: I want to add the feature that allow me to swipe between pictures inside the PhotoViewController.
Any ideas?
Thank you
You can do one of the following two things to achieve your goal :
Make a modal segue of the cell to the next UICollectionViewController where the images are showed in full screen, and in the prepareForSegue pass all the data (images) you need to show and where exactly you are in this moment (indexOfImage).
You can watch the didSelectItemAtIndexPath and then pass all the data to one instance of the next UICollectionViewController you want to show with the presentViewController func.
But it's very important that in the next UICollectionViewController you have set pageEnabled = true in code or in the Interface Builder (I though is much easy to do.)
UPDATE:
Very good tutorials on how to make a slide show of images using an UIScrollView or an UICollectionView :
How To Use UIScrollView to Scroll and Zoom Content
Creating a Paged Photo Gallery With a UICollectionView
I hope this help you.