Button with multiple accessible labels and images in Swift - swift

I need to create custom button class, reuse it 4 times and I also need to override its text and image name. My next problem is how to set its frame somehow dynamically (now it is static), because I need this 4 buttons in grid 2x2.
I'm trying to create button exactly like this: https://imgur.com/a/dNhUGhc.
I have coded this but it is static and in ViewController I can't edit (override) these labels and image name. And if I tried to reuse this class I would have them in the same spot, because frame settings is exactly the same.
I'm subclassing UIButton. If something more suitable exists just let me know.
Code for adding label
// city label
let cityRect = CGRect(x: 0, y: 20, width: buttonWidth, height: 25)
let cityLabel = UILabel(frame: cityRect)
cityLabel.text = "Label"
cityLabel.font = UIFont.systemFont(ofSize: 17, weight: .semibold)
cityLabel.textAlignment = .center
addSubview(cityLabel)
Code for adding image
// image
let imageView = UIImageView(image: UIImage(named: "something"))
imageView.frame = CGRect(x: 0, y: 60, width: 40, height: 40)
imageView.center.x = self.center.x - 20
addSubview(imageView)
Can you guys help me? Thanks

It looks like what you need to do is use an IBOutlet. Basically, an IBOutlet will give you a reference within your code (custom UIView or UIViewController subclass) to the button that you've setup in xib or storyboard. Then you can make any changes or adjustments that you want to it at runtime.
Check this out to learn more about IBOutlets and how to set them up in your project.

Related

how to make UIVIEW in custom style?

i have to make this type of UIView and there is a image view in the top.
i am new in swift so kindly suggest me the best Answer for it.
I guess that there are many resources on how to design views in swift. But to give you quick advice, the first method is use storyboard and place an image with proper constraints.
The second one is to do it programmatically, by implementing UIView variable and assigning an image to id. Something like this:
private func constructView() {
let myImage = UIImageView(image: "name of image inserted to assets folder in xcode")
myImage.frame = CGRect(x: 200, y: 64, width: 30, height: 30)
container.addSubview(myImage)
}

insertSubview() covers the whole Mainview even though inserted at 0

I insert a UIView into a UIButton with following code:
let backgroundView = UIView()
backgroundView.backgroundColor = .red
backgroundView.translatesAutoresizingMaskIntoConstraints = false
blueButton.insertSubview(backgroundView, at: 0)
NSLayoutConstraint.activate([
backgroundView.leadingAnchor.constraint(equalTo: blueButton.leadingAnchor),
backgroundView.trailingAnchor.constraint(equalTo: blueButton.trailingAnchor),
backgroundView.topAnchor.constraint(equalTo: blueButton.topAnchor),
backgroundView.bottomAnchor.constraint(equalTo: blueButton.bottomAnchor)
])
The promlem is that the backgroundView covers the whole button and I only see the red field instead of the button (its an image) with a red background (my subView).
This is the storyboard part of my image. I don´t do something else in the code with this buttons with the exception of trying to put a subView into:
My goal is to have a circle background like in the picture below. For example the red circle button has a rounded red (but brighter than the buttons red) backgroundView.The standard background of the button should stay the same.
I also tried to send the subView into the background but it didn´t work for me:
blueButton.sendSubviewToBack(backgroundView)
I reduced the alpha value of the subview to see if the button image is still there.
for view in blueButton.subviews {
view.alpha = 0.5
}
And it is:
How can I solve this problem?
Do not inject extra subviews into a button. If the goal is to make the background color of the button red, set its backgroundColor to .red. If the goal is to put something behind the button image, that is what the backgroundImage is for. Or just make the button image look like the image you really want.
I made this button:
It looks a lot like your picture. Here's the code:
let im = UIGraphicsImageRenderer(size: CGSize(width: 30, height: 30)).image {
ctx in
UIColor.red.withAlphaComponent(0.2).setFill()
ctx.cgContext.fillEllipse(in: CGRect(x: 0, y: 0, width: 30, height: 30))
UIColor.red.setFill()
ctx.cgContext.fillEllipse(in: CGRect(x: 5, y: 5, width: 20, height: 20))
}
b.setImage(im.withRenderingMode(.alwaysOriginal), for: .normal)
I think that's a lot better than messing with unwanted illegal subviews.

How can i get the absolute position of an UISlider inside of a View

i have created a subview with a lot sliders in it
var sliderArea = UIView()
sliderArea = UIView(frame: CGRect(x: 300, y: 400, width: 500, height: 100)
view.addSubview(sliderArea)
mySlider1 = setUpSlider(sliderNr: 1, ypos: 30)
mySlider2 = setUpSlider(sliderNr: 2, ypos: 30)
mySlider3 = setUpSlider(sliderNr: 3, ypos: 30)
sliderArea.addSubview(mySlider1)
sliderArea.addSubview(mySlider2)
sliderArea.addSubview(mySlider3)
i have a lot of subviews similar to the "sliderArea" to be able to change my sliders quickly while the layout adopts automatically
now i need to know where the absolute position of each slider is to place buttons on top of it. i need to have all this buttons inside an extra view on top of it all. any ideas? thank you
You should convert your slider frame to window's coordinate system using this method of CGRect:
https://developer.apple.com/documentation/uikit/uiview/1622504-convert
Just pass nil as second parameter and it will return you an absolute frame.

How to display a string/int within a UIView in Swift?

this is a very simple question, but I can't find an answer anywhere. I am trying to display a high score within a CGRect, but cannot figure out exactly how to do it. I am currently trying to do this on a playground so that might have something to do with it. Thanks for the help.
You can make a UILabel in a Swift playground. Here's how it might look:
Here's the code from the playground:
import UIKit
let score = 200
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 300, height: 20))
label.backgroundColor = UIColor.purpleColor()
label.textColor = UIColor.orangeColor()
label.text = "High Score: \(score)"
A CGRect is the frame or dimensions assigned to a UIView, not the UIView itself. I would suggest creating a UILabel and add that to your view. You can set the text on the UILabel to, in your case, the high score variable as a string. Im not sure if it is possible to do this in a playground, but I may be mistaken. A XCode project would work perfect for this, but again, im not sure about the playground.
To do this in a playground, it would look like this:
import UIKit
import XCPlayground
let view = UIView(frame: CGRectMake(0,0,500,500)) //create a view and give it a proper size
let label = UILabel(frame: CGRectMake(0,0,100,23)) //create a label with a size
label.text = "My Label" //give the label some text
view.backgroundColor = UIColor.lightGrayColor() //default view in Playground as black background
view.addSubview(label) //add the label to the view
XCPlaygroundPage.currentPage.liveView = view //tell playgound to display your view as the root view in the assistant editor
You need to open the assistant editor in the playground to see the result (the two circles icon in the upper right corner)

How to update UILabel that is a subview of inputView?

I have UITextView where user types a text. When the keyboard is shown, I add inputView with UIlabel on it. I want this UIlabel to hold character length of the text. It seems very easy task, but unfortunatelly it does not update this word counter UILabel when user change text..
this is how I load the inputView
_textView.inputView = [self inputAccessoryView];
in inputAccessoryView I simply add UILabel as a subview. When keyboard is show, UILabel is also show with inputView. I track changes on
- (void)textViewDidChange:(UITextView *)textView
unfortunatelly the UILabel is never updated (redrawn). When I log in to console its value, the value is correct, so its updating, but the UIlabel is never redrawn and holds the default value.
Can anyone help me with this?
did you
_textView.delegate = self;
?
I know it was 5 years ago, but it might help others, who like me stumble upon your question.
I use a UIToolbar as my inputAccessoryView (in my case it has a label, a flexible separator and a button).
On textFieldEditingChanged event I rebuild part of the toolbar like this
#IBAction func textFieldEditingChanged(_ sender: UITextField) {
//get a reference to the toolbar
let toolBar = sender.inputAccessoryView as! UIToolbar
//create a new label and set size + other properties
toolbarLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 40, height: 22))
toolbarLabel.text = mySpecificCalculatedString(sender.text!)
toolbarLabel.font = defaultFont(17)
toolbarLabel.adjustsFontSizeToFitWidth = true
let width = toolbarLabel.textRect(forBounds: CGRect(x: 0, y: 0, width: maxWidthForLabel, height: 0), limitedToNumberOfLines: 1).size.width
toolbarLabel.frame = CGRect(x: 0, y: 0, width: width, height: 22)
toolbarLabel.textColor = .black
toolbarLabel.tag = 666
//rebuild the specific tolbar item
let customView = UIBarButtonItem(customView: toolbarLabel)
toolBar.items![0] = customView
}
Note: simply changing the text of the label did not work for me either, I had to reinitialize it.
Hope it helps.