Circular Nav Bar Button
Twitter Slide Out Menu
In today's bonus lesson, let's look at how to create a circular navigation item button for our HomeController. This is surprisingly easy to do, but at the same time very tricky because it requires very specific code to set it up properly. I'll go over a few different attempts in this video, the first of which doesn't work correctly. Finally I'll show you how to make the icon show up correctly with fixed aspect ratio and clipping to bounds. Enjoy.

Comments (13)
Michael Zeng
4 years ago
Hi Brian! First of all, thank you SO MUCH for these videos. They teach me so much. I've literally learned 75% of my iOS dev skills from you, in the past 4 months. Quick question: I currently have my project set up where my homeView is the view of a UICollectionViewController. The cells in it used to adjust to the orientation that the window was in via invalidateLayout(). However, now it does not. I've been stuck on this issue for the past 2 hours... any assistance would be greatly appreciated. Thank you! Michael
Dennisvm82
4 years ago
Hey Brian, I had to change .scaleAspectFit to .scaleAspectFill to make my image look like yours. For your information, I am using an image with a larger width than height.
Zlatko Petrov
4 years ago
I had a similar experience yesterday. In my case picture is coming from backend, if there is a cache miss. Pictures might have arbitrary height and width. I managed to resolve the issue through an adjustment of image scaling function.
smiller193
4 years ago
how did you properly pull the image from the backend
Zlatko Petrov
4 years ago
Brian has plenty of cool tutorials around this subject - NSURL sessions, TRON, etc. I personally use Alamofire and SwiftyJSON. However, when I get some spare time, I plan to migrate all the code base to NSURL sessions - I am not much in favour of third party packages.
Yoda1221
4 years ago
Hi Brian, Great tutorial!
johnrm9
4 years ago
Hi Brian, Great lessons! Thanks for the bonus lessons. So... I've noticed that in your finished app you have in the place hold text: "Jump to...". in the search bar (and the rocket ship icon). I suppose that means to jump to the first found row and select it. Perhaps another bonus lesson to show how you'd add this feature ... Thanks
st4n
4 years ago
Hey Brian! :) next lessons ideas sticking to the Twitter app: 1. Change Themes Light/Dark 2. Make HomeController a feed controller + quote view inside cells 2a. PostDetailView + comments with replies(line connected avatars) 3. Pagination of posts 4. search via hashtags 5. @username functionality You can always bump the price a little more and make it really worth it...
Robin Bindewald
4 years ago
Hey Brian, short Feedback. Very good Course learned a lot as always. Thanks. Keep up the great Work!
smiller193
4 years ago
I have one issue I am creating a subclass for this custom button. Everything seems to go well however when I try to load the image I get nothing. The background just stays orange can anyone see where I went wrong import UIKit import Firebase class CircularNavButton: UIButton { var userHandle: DatabaseHandle = 0 var userRef: DatabaseReference? lazy var userImageView: CustomImageView2 = { let iv = CustomImageView2() iv.contentMode = .scaleToFill iv.clipsToBounds = true return iv }() override init(frame: CGRect) { super.init(frame: frame) setupView() } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } @objc func setupView(){ observeUser() backgroundColor = .orange } @objc func observeUser(){ self.userHandle = UserService.observeProfile(for: User.current, completion: { (userRef, user, nil) in self.userRef = userRef guard let userProfilePic = user?.profilePic else{ return } self.userImageView.loadImage(urlString: userProfilePic) let image = self.userImageView.image self.setImage(image, for: .normal) }) } deinit { userRef?.removeObserver(withHandle: userHandle) } }
ZpecterZ80
4 years ago
Hi Brian, how could we achieve the rotation of that button everytime we tap on it?
sereisoglu
4 years ago
Hi. I think there's a code to be fixed When the menu is open, if you pull the menu to the right. The menu will be closed. You should change your code this way: BaseSlidingController.swift > handleEnded fileprivate func handleEnded(gesture: UIPanGestureRecognizer) { let translation = gesture.translation(in: view) let velocity = gesture.velocity(in: view) // Cleaning up this section of code to solve for Lesson #10 Challenge of velocity and darkCoverView if isMenuOpened { if velocity.x < -velocityThreshold { closeMenu() return } if translation.x > -menuWidth / 2 { openMenu() } else { closeMenu() } } else { if velocity.x > velocityThreshold { openMenu() return } if translation.x < menuWidth / 2 { closeMenu() } else { openMenu() } } }
Malikov_Vladimir
4 years ago
I did it) Brian thank you)
Brian Voong
4 years ago
werg09
4 years ago
what a savage
MaxApp
3 years ago
Hey Brian, I had question on the presented view. What is the best way to set a selected menu cell for the first row since the first menu row is the presented view on launch. thank you
MaxApp
3 years ago
?
izaguirrejoe
3 years ago
Great course, Brian. I learned a lot.
HELP & SUPPORT