Creating shapes with text in the center - ios

I want to create a circle which contains text in its center which is aligned horizontally in its View Controller. Something similar like this:
I'm not sure how to go about doing this. I would expect to create a custom UIView which contains a subview of a rounded CGRect and also a subview of a TextView although I'm not sure this is the more efficient way forward. Would this way forward be considered best practice and how would I implement it in Swift? Thanks.

You can achieve this with a simple UILabel!
let diameter = 50
var label = UILabel(frame: CGRect(x: 0, y: 0, width: diameter, height:diameter))
label.text = "Hello World"
label.textAlignment = .Center
label.backgroundColor = UIColor.redColor()
// The magic to create a circle
label.layer.cornerRadius = diameter / 2.0
label.clipsToBounds = true

Related

How to do UITextView scroll detect and change images

It looks like this :
(I can't show image please I don't have 10 prestiges)
let departmentMessage = UITextView(frame: CGRect(x: 25, y: 1500 / 2, width: UIScreen.main.bounds.size.width - 50, height: (UIScreen.main.bounds.size.height - 50)/4 ))
showBlshText()
departmentMessage.isScrollEnabled = true
departmentMessage.isPagingEnabled = true
departmentMessage.isEditable = false
departmentMessage.isSelectable = true
departmentMessage.dataDetectorTypes = UIDataDetectorTypes.link
departmentMessage.textColor = UIColor.darkGray
departmentMessage.textAlignment = .left
departmentMessage.contentMode = .topLeft
departmentMessage.backgroundColor = UIColor(displayP3Red: 100, green: 100, blue: 100, alpha: 20)
departmentMessage.font = UIFont(name: "Helvetica-Light", size: 20)
self.view.addSubview(departmentMessage)
departmentMessage.removeFromSuperview()
I expect the output of the word to change, but the actual output isn't work.
UITextView is a subclass of UIScrollView. So everything that a scrollView does a textView can do also. In you case, it seems that you want to do some action when the textView is scrolled. You should look the UIScrollViewDelegate documentation which describes how you can monitor a scrollView to see when it is scrolled. There are a few tips to know:
the delegate is not called when you set the content offset programatically.
scrollViewDidEndDecelerating: is not called when scrollViewDidEndDragging:willDecelerate: is called with NO for the willDecelerate value.
So just set your viewController as the delegate, implement the appropriate methods, and change your UI accordingly.
Also, you might have better luck using a UICollectionView or a UITableView. Even if every row is just a label, it is far easier to track what indexPath is at the top of the collectionView then what text is at the top of textView. But without knowing exactly what you are doing it is hard to say.

Unable to show the Left view in UITextField

I am unable to show the left view in the UITextField. I know this is very easy thing and has been asked many times. I have found solutions to make a custom view and to show it as a left view.
I am trying to make a UILabel that shows the country code in the text field. I made the following function but it shows the empty space only.
func setCountryCode(textField: UITextField){
let viewPadding = UILabel(frame: CGRect(x: Int(textField.frame.origin.x), y: Int(textField.frame.origin.y), width: width , height: Int(textField.frame.size.height)))
viewPadding.textColor = CommonUtils.hexStringToUIColor(hex: AppColor.colorTextSecondary)
viewPadding.text = mCallingCode
viewPadding.font = viewPadding.font.withSize(12)
viewPadding.textAlignment = .center
textField.leftView = viewPadding
textField.leftViewMode = .whileEditing
}

Add shape to a UIButton in Swift

I have a UIButton and I wanna add a circle shape in the middle of it.
how can I do that?
Here's what I want to achieve.
Thanks/
Insert a subview in your button
let circleFrame = CGRect(x: 0, y: 0, width: circleDimension, height: circleDimension)
let circle = UIView(frame: circleFrame)
circle.backgroundColor = UIColor.clear
circle.layer.borderWidth = circleWidth
circle.layer.borderColor = UIColor.white.cgColor
circle.layer.cornerRadius = circleDimension/2
Just add that as a subview to your button and set centerX and centerY anchors equal to your button. Then, if you want to make it square, just do
circle.layer.cornerRadius = 0
There are many ways to do this including using CoreGraphics. The easiest way is to just set an image on the button
How to set image of UIButton in Swift 3?
If you need it clickable ofcourse, otherwise just use a UIImageView(which you can also make clickable using UITapGestureRecognizer)

How to generate annotation image dynamically in Swift

I am displaying custom roads on the map and to display details about road, I need to display annotation with custom images (a shield).
But now I want to display shields with road numbers. As there are so many different roads, I cannot add all these shield with numbers in app. I want to keep only one shield image in app and write number on the shield dynamically while setting as annotation image.
There is a IconGenerator library in Google Maps API which can do this task. So I want to do the same with MKMapKit in my iOS Swift application.
Thanks in advance.
If you know that your image is always going to be certain dimensions (say, a square) then you know where the white space for the number will be. You can create a DynamicShield class which has the common image and a UILabel which positions the text in accordance with the dimensions of the common shield image.
I have created imageview and added image and label in imageview and set imageview as annotation image.
let annotationview = MKAnnotationView.init(annotation: annotationPoint, reuseIdentifier: "xyz")
annotationview.canShowCallout = true
var imageview = UIImageView(frame: CGRect(x: -15, y: -15, width: 30, height: 30))
var label = UILabel()
label.frame = CGRect(x: 0, y: 1, width: 30, height: 30)
label.textAlignment = .Center
label.font = UIFont.boldSystemFontOfSize(12)
label.textColor = UIColor.GrayColor()
label.text = “my-text”
imageview.addSubview(label)
imageview.image = UIImage(named: “image-name”)
annotationview.addSubview(imageview)
return annotationview

Twitter-like UIScrollView with ViewControllers as pages

Video of the issue!
Example of what I mean by Twitter-like UIScrollView:
I basically have it working, but I have this small glaring issue and I don't know where it is coming from. I have checked all the constraints and values for my two view controllers, but something is off.
In short,
The code that creates the NavBar and then populates it with the two ViewControllers side by side:
override func viewDidLoad() {
super.viewDidLoad()
var navBar: UINavigationBar = UINavigationBar(frame: CGRectMake(0, 0, self.view.bounds.width, 64))
navBar.barTintColor = UIColor.blackColor()
navBar.translucent = false
//Creating some shorthand for these values
var wBounds = self.view.bounds.width
var hBounds = self.view.bounds.height
// This houses all of the UIViews / content
scrollView = UIScrollView()
scrollView.backgroundColor = UIColor.clearColor()
scrollView.frame = self.view.frame
scrollView.pagingEnabled = true
scrollView.showsHorizontalScrollIndicator = false
scrollView.delegate = self
scrollView.bounces = false
self.view.addSubview(scrollView)
self.scrollView.contentSize = CGSize(width: self.view.bounds.size.width * 2, height: hBounds)
//Putting a subview in the navigationbar to hold the titles and page dots
navbarView = UIView()
//Paging control is added to a subview in the uinavigationcontroller
pageControl = UIPageControl()
pageControl.frame = CGRect(x: 0, y: 35, width: 0, height: 0)
pageControl.pageIndicatorTintColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.3)
pageControl.currentPageIndicatorTintColor = UIColor.whiteColor()
pageControl.numberOfPages = 2
pageControl.currentPage = 0
self.navbarView.addSubview(pageControl)
//Titles for the nav controller (also added to a subview in the uinavigationcontroller)
//Setting size for the titles. FYI changing width will break the paging fades/movement
navTitleLabel1 = UILabel()
navTitleLabel1.frame = CGRect(x: 0, y: 8, width: wBounds, height: 20)
navTitleLabel1.textColor = UIColor.whiteColor()
navTitleLabel1.textAlignment = NSTextAlignment.Center
navTitleLabel1.text = "Title 1"
self.navbarView.addSubview(navTitleLabel1)
navTitleLabel2 = UILabel()
navTitleLabel2.alpha = 0.0
navTitleLabel2.frame = CGRect(x: 100, y: 8, width: wBounds, height: 20)
navTitleLabel2.textColor = UIColor.whiteColor()
navTitleLabel2.textAlignment = NSTextAlignment.Center
navTitleLabel2.text = "Title 2"
self.navbarView.addSubview(navTitleLabel2)
//Views for the scrolling view
//This is where the content of your views goes (or you can subclass these and add them to ScrollView)
feedViewController = storyboard?.instantiateViewControllerWithIdentifier("FeedController") as FeedViewController
view1 = feedViewController.view
addChildViewController(feedViewController)
feedViewController.didMoveToParentViewController(self)
view1.frame = CGRectMake(0, 0, wBounds, hBounds)
self.scrollView.addSubview(view1)
self.scrollView.bringSubviewToFront(view1)
//Notice the x position increases per number of views
secondViewController = storyboard?.instantiateViewControllerWithIdentifier("SecondController") as SecondViewController
view2 = secondViewController.view
addChildViewController(secondViewController)
secondViewController.didMoveToParentViewController(self)
view2.frame = CGRectMake(wBounds, 0, wBounds, hBounds)
self.scrollView.addSubview(view2)
self.scrollView.bringSubviewToFront(view2)
navBar.addSubview(navbarView)
self.view.addSubview(navBar)
}
I've looked at my storyboard and both ViewControllers seem identical in regards to their constraints.
I know this is an issue because both ViewControllers are populated by UITableViews. When I scroll through the SecondViewController, it works perfectly. When I scroll through the FeedViewController, there is a small white space at the top that I can't seem to get rid of and it shows that the text cuts off there. I've been stuck on this for a long time and if there is any other information needed, I'll gladly provide it.
Edit: Included video of the issue. If I could, I would bounty this question right now. I don't understand the cause
Update: After swapping both ViewController positions, I have noticed that the problem does not lie with either ViewController. The problem lies with page 1 being set lower. When swapped, the original SecondViewController also experienced the same behavior
So, I think everyone who implements this runs into this issue at some point. The issue isn't with the first ViewController. Simply adjust the constraint to be 44 from the top. The issue is with the second ViewController and it isn't so much an issue when you understand how they work. Technically, it is off to the side and hence its top constraint does not adhere to the Navigation Bar, so what you have is a constraint - 20. Which, depending on how you originally placed your constraints, can give you this seeming issue.
But basically, anyone and everyone will run into this issue when implementing this.
TL;DR: To make everything seamless, your second, third, fourth, fifth, etc. page View Controllers need a constraint + 20 of your first View Controller. With my set-up, I use a constraint of 44 for my first View Controller and hence 64 for the second

Resources