I'm adding a UIStepper to a horizontal UIStackView which itself is on a vertical UIStackView. The problem is that no matter what I do, the UIStepper won't register any event.
My code is the following
init(variableIndex: Int, variableName: String, withParentView parent: UIView, currentValue: String, readOnly: Bool) {
// Instantiate the properties
valueTextField = UITextField()
valueStepper = UIStepper()
numberOfDecimals = currentValue.components(separatedBy: ".").count > 1 ? currentValue.components(separatedBy: ".")[1].count : 1
numericValue = Double(currentValue)!
super.init(variableIndex: variableIndex, variableName: variableName, withParentView: parent)
// Horizontal Stack View
let horizontalStackView = UIStackView()
horizontalStackView.axis = .horizontal
horizontalStackView.alignment = .fill
horizontalStackView.spacing = 15
horizontalStackView.distribution = .fill
horizontalStackView.translatesAutoresizingMaskIntoConstraints = false
horizontalStackView.isUserInteractionEnabled = true
// Text Field
valueTextField.text = stringValue
valueTextField.textAlignment = .right
valueTextField.layer.borderWidth = 1.0
valueTextField.layer.cornerRadius = 6.0
valueTextField.layer.borderColor = UIColor.darkGray.cgColor
#warning ("TODO: Enable interaction, change keyboard to numeric and add done button to keyboard")
valueTextField.isUserInteractionEnabled = false
valueTextField.rightView = UIView(frame: CGRect(x: 0, y: 0, width: ConfigFile.rightPadding, height: Int(valueTextField.frame.size.height)))
valueTextField.rightViewMode = .always
// Stepper
valueStepper.value = numericValue
valueStepper.stepValue = 0.1
valueStepper.addTarget(self, action: #selector(self.stepperValueChanged(sender:)), for: .touchUpInside)
valueStepper.addTarget(self, action: #selector(self.test(sender:)), for: .allEditingEvents)
valueStepper.isEnabled = !readOnly
// Create the constraints
constraints.append(NSLayoutConstraint(item: horizontalStackView, attribute: .width, relatedBy: .equal, toItem: stackView, attribute: .width, multiplier: 1.0, constant: 0.0))
horizontalStackView.addArrangedSubview(valueTextField)
horizontalStackView.addArrangedSubview(valueStepper)
stackView.addArrangedSubview(horizontalStackView)
}
#objc private func stepperValueChanged(sender: UIStepper) {
numericValue = valueStepper.value
let userInfo = [
"VariableIndex": String(self.variableIndex),
"NewValue": self.stringValue
]
NotificationCenter.default.post(name: .numericVariableChanged, object: nil, userInfo: userInfo)
}
#objc private func test(sender: UIStepper) {
print("Hi")
}
As you can see, I add the events with the lines
valueStepper.addTarget(self, action: #selector(self.stepperValueChanged(sender:)), for: .touchUpInside)
valueStepper.addTarget(self, action: #selector(self.test(sender:)), for: .allEditingEvents)
I also tried using the .allTouchEvents argument on the second line but that didn't work.
All the views above the UIStepper have their isUserInteractionEnabled property set to true
During execution, I get feedback from the UIStepper when I press it (it changes color for a moment).
Use the .valueChanged event with a UIStepper, not .touchUpInside or .allEditingEvents.
I had the same issue as the one described in here
Problem was that I didn't hold any reference to the object I was generating so it was being deinitialized immediately. I solved this by keeping a reference to it in the ViewController that holds it.
Related
I have three buttons, when selected they change background color to red - yet a blue background is popping up as well and I can't figure out why (sorry if the reason is obvious, ive only been doing "programming" for 3 weeks. I can't find anything in the code that would explain itI have three buttons, when selected they change background color to red - yet a blue background is popping up as well and I can't figure out why (sorry if the reason is obvious, ive only been doing "programming" for 3 weeks. I can't find anything in the code that would explain it
[enter image description here][1]import UIKit
class ViewController: UIViewController {
var counterEN : Int = 0
var count = Array(1...150).filter { $0 % 1 != 0}.count
var pizzaCount = 0
#IBOutlet weak var pizzaCounter: UILabel!
#IBOutlet weak var textField: UITextField!
#IBAction func test(_ sender: UIButton) {
self.textField.text = sender.currentTitle
}
var lastY: CGFloat = 100
override func viewDidLoad() {
super.viewDidLoad()
}
#IBAction func buttonClicked(_ sender: UIButton) {
pizzaCount = pizzaCount + 1
pizzaCounter.text = ("Antal pizza: ") + "\(pizzaCount)"
let contentView = UIView()
addViewsTo(contentView, title: sender.currentTitle)
contentView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(contentView)
// Add size constraints to the content view (260, 30)
NSLayoutConstraint(item: contentView, attribute: .width, relatedBy: .equal,
toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 850.0).isActive = true
NSLayoutConstraint(item: contentView, attribute: .height, relatedBy: .equal,
toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: ` 30.0).isActive = true
// Add position constraints to the content view (horizontal center, 100 from the top)
NSLayoutConstraint(item: contentView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: lastY).isActive = true
NSLayoutConstraint(item: contentView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0.0).isActive = true
// Update last Y position to have the gaps between views to be 10
lastY += 50
}
// Add label and button to the content view
func addViewsTo(_ contentView: UIView, title: String?) {
// Add a label with size of (100, 30)
let label = UILabel()
label.text = title
//label.text = ("1 x 17 ")
label.frame = CGRect(x: 0.0, y: 0.0, width: 100.0, height: 30.0)
contentView.addSubview(label)
let DressingButton = UIButton(type: .system)
DressingButton.frame = CGRect(x: 210, y: 0, width: 40, height: 30)
DressingButton.setTitle("D", for: .normal)
DressingButton.setTitleColor(.black, for: .normal)
DressingButton.setTitleColor(.red, for: .selected)
DressingButton.sendActions(for: .touchUpInside)
contentView.addSubview(DressingButton)
DressingButton.addTarget(self, action: #selector(dressingAction(_:)), for .touchUpInside)
let Chili = UIButton(type: .system)
Chili.frame = CGRect(x: 160, y: 0, width: 40, height: 30)
Chili.setTitle("C", for: .normal)
Chili.setTitleColor(.black, for: .normal)
Chili.backgroundColor = UIColor.white
Chili.setTitleColor(.systemRed, for: .selected)
Chili.sendActions(for: .touchUpInside)
contentView.addSubview(Chili)
Chili.addTarget(self, action: #selector(dressingAction(_:)), for: .touchUpInside)
let Hvidløg = UIButton(type: .system)
Hvidløg.frame = CGRect(x: 110, y: 0, width: 40, height: 30)
Hvidløg.setTitle("H", for: .normal)
Hvidløg.setTitleColor(.black, for: .normal)
Hvidløg.setTitleColor(.red, for: .selected)
Hvidløg.backgroundColor = UIColor.white
Hvidløg.sendActions(for: .touchUpInside)
contentView.addSubview(Hvidløg)
Hvidløg.addTarget(self, action: #selector(dressingAction(_:)), for: .touchUpInside)
let button2 = UIButton(type: .system)
button2.frame = CGRect(x: -40, y: 20, width: 150, height: 30)
button2.setTitle("Alm", for: .normal)
button2.setTitle("Ful", for: .selected)
button2.setTitle("Glu", for: .selected)
// Set button action
button2.addTarget(self, action: #selector(buttonAction(_:)), for: .touchUpInside)
contentView.addSubview(button2)
self.view = view
}
#objc func dressingAction(_ sender:UIButton){
sender.isSelected.toggle()
print("knap")
sender.backgroundColor = UIColor.red
}
#objc func buttonAction(_ sender:UIButton!)
{
sender.isSelected = !sender.isSelected
sender.setTitle("Alm", for: .normal)
if sender.isSelected{
sender.setTitle("Fuld", for: .selected)}
else {
sender.setTitle("Glu", for: .selected)
sender.isSelected = !sender.isSelected
// sender.tintColor = .clear
//// if sender.isSelected{
// sender.setTitleColor(.green, for: .selected)
// }
// else{
// sender.setTitleColor(.blue, for: .selected)
//
func buttonAction(_ button3:UIButton!) {
print("Button tapped"); counterEN += 1; count += 1; print (counterEN); print (count)
}
}
}
}
Please change your button type to .custom and the issue will be solved.
let dressingButton = UIButton(type: .custom)
Try changing your button Type to custom
I know questions like this have been posted on StackOverflow, but despite following the guides I haven't been able to manage my question.
I have a red rectangle that I would like to place in the center of a view, but it winds up at the origin, like so:
After following some guides, I have arrived at the following code, but the rectangle doesn't render at all.
//: A UIKit based Playground for presenting user interface
import UIKit
import PlaygroundSupport
import CoreGraphics
class MyViewController : UIViewController {
var currentDrawType = 0
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
// Buton logic follows
let button = UIButton(type: .system)
button.frame = CGRect(x:150, y:500, width:80, height:25)
button.backgroundColor = .white
button.setTitle("Test Button", for: .normal)
button.titleLabel?.textColor = .systemBlue
button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
super.view.addSubview(button)
// Other
drawRectangle()
}
#objc func buttonAction(sender: UIButton!) {
currentDrawType += 1
if currentDrawType > 5 {
currentDrawType = 0
}
switch currentDrawType {
case 0:
drawRectangle()
default:
break
}
print(currentDrawType)
}
func drawRectangle() {
var imageView = UIImageView()
imageView.frame.origin = super.view.bounds.origin
imageView.frame.size = CGSize(width:200, height:200)
imageView.center = super.view.convert(super.view.center, from: imageView)
super.view.addSubview(imageView)
UIGraphicsBeginImageContextWithOptions(imageView.frame.size, false, 0)
let context = UIGraphicsGetCurrentContext()
let rectangle = imageView.frame
context!.setFillColor(UIColor.red.cgColor)
context!.setStrokeColor(UIColor.black.cgColor)
context!.setLineWidth(10)
context!.addRect(rectangle)
// Draw it now
context!.drawPath(using: CGPathDrawingMode.fillStroke)
let img = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
imageView.image = img
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
Furthermore, I would like to adjust the size of the main view, but I'm not quite sure how to. When I had a slightly different implementation, I did change the size, but the physical viewing window in Xcode where the result displayed did not change and hence elements were not visible.
I would love some help and/or guidance on this.
In func drawRectangle() you are setting origin with superview origin; which is by default x: 0 , y : 0.
imageView.frame.origin = super.view.bounds.origin // this make you view to top.
In order to fix this you need to get centre point of the view.
CGPoint.init(x: view.frame.size.width / 2 , y: view.frame.size.height / 2)
More i would suggest you to use Constraint here.
let xConstraint = NSLayoutConstraint(item: imageView, attribute: .CenterX, relatedBy: .Equal, toItem: self.view , attribute: .CenterX, multiplier: 1, constant: 0)
let yConstraint = NSLayoutConstraint(item: imageView, attribute: .CenterY, relatedBy: .Equal, toItem: self.view, attribute: .CenterY, multiplier: 1, constant: 0)
imageView.addConstraint(xConstraint)
imageView.addConstraint(yConstraint)
You have to make rectangle = imageView.bounds and have to calculate the frame of imageView using the code below
import UIKit
import CoreGraphics
class MyViewController : UIViewController {
var currentDrawType = 0
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
// Buton logic follows
let button = UIButton(type: .system)
button.frame = CGRect(x:150, y:500, width:80, height:25)
button.backgroundColor = .white
button.setTitle("Test Button", for: .normal)
button.titleLabel?.textColor = .systemBlue
button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
super.view.addSubview(button)
// Other
drawRectangle()
}
#objc func buttonAction(sender: UIButton!) {
currentDrawType += 1
if currentDrawType > 5 {
currentDrawType = 0
}
switch currentDrawType {
case 0:
drawRectangle()
default:
break
}
print(currentDrawType)
}
func drawRectangle() {
let imageSize = CGSize(width:200, height:200)
var imageOrigin = self.view.center
imageOrigin.x -= imageSize.width/2
imageOrigin.y -= imageSize.height/2
let imageView = UIImageView(frame: CGRect(origin:imageOrigin , size: imageSize))
super.view.addSubview(imageView)
UIGraphicsBeginImageContextWithOptions(imageView.frame.size, false, 0)
let context = UIGraphicsGetCurrentContext()
let rectangle = imageView.bounds
context!.setFillColor(UIColor.red.cgColor)
context!.setStrokeColor(UIColor.black.cgColor)
context!.setLineWidth(10)
context!.addRect(rectangle)
// Draw it now
context!.drawPath(using: CGPathDrawingMode.fillStroke)
let img = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
imageView.image = img
}
}
I just have started my first app on iOS a week ago. I have created a custom view to use it in my app using AppleDeveloperWebsite Custom Rating Control Tutorial.
Now I have chosen iPhone7 device in storyboard and I run this on iPhone 7 emulator it works perfectly but when I run it on iPhone 5 emulator (size of screen changes) my custom views extend beyond the screen. My all other controls sizes resize as I set constraints but only my custom view sizes get messed up.
Please Help
import UIKit
#IBDesignable class xRadioButtonView: UIView {
var button: UIButton!
var label: UILabel!
#IBInspectable var text: String? {
didSet{
label.text = text
}
}
//Properties
var isSelected = 0
//Initialization
override init(frame: CGRect){
super.init(frame: frame)
addSubviews()
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
addSubviews()
}
func addSubviews() {
self.backgroundColor = UIColor.white
let xWidth = bounds.size.width
let xHeight = bounds.size.height
let tap = UITapGestureRecognizer(target: self, action: #selector(xRadioButtonView.radioButtonTextTapped))
button = UIButton(frame: CGRect(x: 1, y: 1, width: xWidth - 2, height: xHeight - 4))
button.backgroundColor = UIColor.white
button.addTarget(self, action: #selector(xRadioButtonView.radioButtonTapped(button:)), for: .touchDown)
addSubview(button)
label = UILabel(frame: CGRect(x: 1, y: 1, width: xWidth - 2, height: xHeight - 2))
label.textColor = UIColor.init(hex: "#D5D5D5")
//label.font = UIFont.init(name: label.font.fontName, size: 25)
//label.font = label.font.withSize(25)
label.font = UIFont.boldSystemFont(ofSize: 25)
label.textAlignment = NSTextAlignment.center
label.isUserInteractionEnabled = true
label.addGestureRecognizer(tap)
addSubview(label)
}
override func layoutSubviews() {
// Set the button's width and height to a square the size of the frame's height.
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
label.text = "xRBV"
}
func radioButtonTapped(button: UIButton) {
if isSelected == 0 {
isSelected = 1
self.backgroundColor = UIColor.init(hex: "#00BFA5")
label.textColor = UIColor.init(hex: "#00BFA5")
} else {
isSelected = 0
self.backgroundColor = UIColor.white
label.textColor = UIColor.init(hex: "#D5D5D5")
}
}
func radioButtonTextTapped(sender: UITapGestureRecognizer){
if isSelected == 0 {
isSelected = 1
self.backgroundColor = UIColor.init(hex: "#00BFA5")
label.textColor = UIColor.init(hex: "#00BFA5")
} else {
isSelected = 0
self.backgroundColor = UIColor.white
label.textColor = UIColor.init(hex: "#D5D5D5")
}
}
}
As you can see PG button should finish where green color finishes but white color button is extended beyond the screen
You either need to set the frame in layoutSubViews or you need to implement autolayout in code:
button = UIButton(frame: CGRect(x: 1, y: 1, width: xWidth - 2, height: xHeight - 4))
button.backgroundColor = UIColor.white
button.addTarget(self, action: #selector(xRadioButtonView.radioButtonTapped(button:)), for: .touchDown)
addSubview(button)
button.translatesAutoresizingMaskIntoConstraints = false
let attributes: [NSLayoutAttribute] = [.top, .bottom, .leading, .trailing]
let constants = [2, 2, 10, 10] // 2 from top and bottom, 10 from leading and trailing
NSLayoutConstraint.activate(attributes.enumerated().map { NSLayoutConstraint(item: button, attribute: $1, relatedBy: .equal, toItem: button.superview, attribute: $1, multiplier: 1, constant: constants[$0]) })
The example uses the old way because your constraints are uniform, but if you have something more complicated its often simpler to use NSLayoutAnchor as of iOS 9.
EDIT: here is the code for tuples if anyone is interested:
button.translatesAutoresizingMaskIntoConstraints = false
let attributes: [(NSLayoutAttribute, CGFloat)] = [(.top, 2), (.bottom, 2), (.leading, 12), (.trailing, 12)]
NSLayoutConstraint.activate(attributes.map { NSLayoutConstraint(item: button, attribute: $0.0, relatedBy: .equal, toItem: button.superview, attribute: $0.0, multiplier: 1, constant: $0.1) })
Thanks I wasn't even aware of this NSLayout yet. (HEHE 7 Days) Thanks to you I have a solution for my problem. Although I wanted different values for .top .bottom .leading .trailling
I used your code like this
NSLayoutConstraint(item: button, attribute: .top, relatedBy: .equal, toItem: button.superview, attribute: .top, multiplier: 1, constant: 1).isActive = true
NSLayoutConstraint(item: button, attribute: .bottom, relatedBy: .equal, toItem: button.superview, attribute: .bottom, multiplier: 1, constant: 4).isActive = true
to all 4 sides. But is there a way to provide constant values as well like you have provided multiple attribute values?
I need to add few labels on top of an UIImageView. The labels' text can be changed by tapping on them. What is the best way to achieve this? I am using Swift programming language. Looking up some solutions on stackoverflow, I found a couple of walkthroughs that use String.drawInRect method to draw some text in a rectangle which is then placed on the UIImageView. But like this I don't think I will be able to change the text, or even recognize a touch event on them. Please help.
UPDATE
My code so far:
override func viewDidLoad() {
super.viewDidLoad()
let img = UIImage(named: "Image")
let imgView = UIImageView(image: img)
self.view.addSubview(imgView)
var myLabel = UILabel()
myLabel.text = "Hello There"
myLabel.textColor = UIColor.redColor()
myLabel.font = UIFont(name: "Marker Felt", size: 20)
myLabel.accessibilityIdentifier = "this is good!"
myLabel.frame = CGRect(x: img!.size.width/2 /* - myLable.width / 2 ? */, y: 0, width: img!.size.width, height: 40)
imgView.addSubview(myLabel)
imgView.userInteractionEnabled = true
myLabel.userInteractionEnabled = true
let tapGesture = UITapGestureRecognizer(target: self, action: "handlePanGesture:")
myLabel.addGestureRecognizer(tapGesture)
}
func handlePanGesture(sender: UITapGestureRecognizer) {
var senderView = sender.view as! UILabel
print(senderView.text)
senderView.text = "look how i changed!"
print(senderView.accessibilityIdentifier)
}
So far the results are positive I have an image with the label on top of it that can respond to touch events. Now I need to find the label's width so that I can effectively place it in the center when required. Then I need to find a way to place the labels at exact coordinates relative to the image's top left corner as origin.
Any help in these two tasks will be hugely appreciated.
Adding label on ImageView is best approach. but you can also do it by adding button on ImageView.
I created a example where i created a ImageView on storyboard and create its outlet in ViewController class and in viewDidLoad i created a label and add it to label and add UITapGestureRecognizer to label. when user taps label we changed the label text and it's position.
class ViewController: UIViewController {
#IBOutlet weak var winterImageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
let label = UILabel(frame: CGRect(x: 10, y: 0, width: self.winterImageView.frame.width - 10, height: 30))
label.textColor = UIColor.redColor()
label.userInteractionEnabled = true
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(self.handleTap(_:)))
label.addGestureRecognizer(tapGesture)
label.text = "Is Winter is coming, My Friend?"
self.winterImageView.addSubview(label)
}
Change label text and position in handleTap
/// handle tap here
func handleTap(sender: UITapGestureRecognizer) {
let senderView = sender.view as! UILabel
senderView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint(item: senderView, attribute: .CenterX, relatedBy: .Equal, toItem: self.winterImageView, attribute: .CenterX, multiplier: 1, constant: 0).active = true
NSLayoutConstraint(item: senderView, attribute: .CenterY, relatedBy: .Equal, toItem: self.winterImageView, attribute: .CenterY, multiplier: 1, constant: 0).active = true
print(senderView.text)
senderView.text = "Yes!!! Winter is coming, My Friend!!"
}
You can download project from here InteractiveLabel
I can see from the other answers and comments related to one another virtually same stuff.If you familiar using Cocoa pods then you will agree with my opinion.Always,Just look around yourself and pick the best.If you want your project goes smooth and steady then JLStickerTextView is your friend and its way to go.It's free,elegant and more vibrant label customisation project available to everyone and the best thing about this project is written in handy Swift.
Github Link: https://github.com/luiyezheng/JLStickerTextView
Features
You can add multiple Text to StickerTextView at the same time
Multiple line Text support
Rotate, resize the text with one finger
Set the Color, alpha, font, alignment, TextShadow, lineSpacing...... of the text
StickerTextView also handle the process of rendering text on Image
Written in Swift
Note: In, My personal opinion.Way, the code been written in this projects simply superb and properly categorised.
Avaliable Text Attributes Reference:
MainView Screenshot from the project:
Output from my personal project based on JLStickerTextView.I, hope you will consider it.If you need any more information let me know...
github.com/khush004/StickerView/tree/master
here is code of JLStickerTextView which is error free with compatibility of swift 3.0
You can use a label and add a gesture recognizer from which you can set an action.
EDIT (responding to OP comment) :
Basically you put an UILabel on top of your card, set a gesture recognizer on it, and set a hidden UITextField at the same position as your label. This way when you tap on it, you specify in your gesture recognizer method that the UI must set label as hidden and textfield as visible. When you're done (end editing), just save your changes and update the UI.
If you just want to center align your UILabel and UIImageView, you can use AutoLayout constraint.
NSLayoutConstraint(item: label, attribute: .CenterX, relatedBy: .Equal, toItem: imageView, attribute: .CenterX, multiplier: 1, constant: 0).active = true
NSLayoutConstraint(item: label, attribute: .CenterY, relatedBy: .Equal, toItem: imageView, attribute: .CenterY, multiplier: 1, constant: 0).active = true
func handlePanGesture(sender: UITapGestureRecognizer) {
let senderView = sender.view as! UILabel
print(senderView.text)
senderView.textColor = UIColor.redColor()
senderView.text = "look how i changed!"
print(senderView.accessibilityIdentifier)
}
Ouput :
sender.view?.frame
▿ Optional
▿ Some : CGRect
▿ origin : CGPoint
- x : 0.0
- y : 0.0 { ... }
▿ size : CGSize
- width : 335.0
- height : 28.0
I use CALayers, gesture recognizers, and the hitTest method of the layers. Sample code below:
class ImageView: UIImageView {
let tapGesture = UITapGestureRecognizer()
let redLayer = CATextLayer()
var redHitCounter:Int = 0
let greenLayer = CATextLayer()
var greenHitCounter:Int = 0
override init(frame: CGRect) {
super.init(frame: frame)
setUpClickableLayers()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setUpClickableLayers()
}
private func setUpClickableLayers() {
self.isUserInteractionEnabled = true
tapGesture.numberOfTapsRequired = 1
tapGesture.addTarget(self, action: #selector(changeText))
self.addGestureRecognizer(tapGesture)
redLayer.frame = CGRect(x: 40, y: 40, width: 100, height: 40)
redLayer.backgroundColor = UIColor.red.cgColor
redLayer.string = String(redHitCounter)
redLayer.alignmentMode = kCAAlignmentCenter
self.layer.addSublayer(redLayer)
greenLayer.frame = CGRect(x: 40, y: 140, width: 100, height: 40)
greenLayer.backgroundColor = UIColor.green.cgColor
greenLayer.string = String(redHitCounter)
greenLayer.alignmentMode = kCAAlignmentCenter
self.layer.addSublayer(greenLayer)
}
internal func changeText(_ recognizer:UITapGestureRecognizer) {
let p = recognizer.location(in: self)
if (redLayer.hitTest(p) != nil) {
redHitCounter += 1
redLayer.string = String(redHitCounter)
} else if (greenLayer.hitTest(p) != nil) {
greenHitCounter += 1
greenLayer.string = String(greenHitCounter)
}
}
}
A few notes:
(1) Remember to set your UIImageView's isUserInteractionEnabled to true. It took me an hour to debug why my UIImageView was seeing gestures!
(2) The hitTest() method works for the CALayer and all subclasses. Just remember to make the layer large enough to work on fat fingers.
(3) You can also use the pan and pinch gestures to move, rotate, and resize the target layer.
I'm trying to make a UIScrollView containing a UIStackView with several layers of stack views nested inside. I would like to use AutoLayout, but there is something wrong with what I'm doing, and my brain is getting scrambled trying to figure it out:
import UIKit
class HomeView: UIView {
let looks = sampleLooks
let user = sampleUser
let streamView: UIStackView = UIStackView(arrangedSubviews: [])
let scrollView: UIScrollView = UIScrollView()
func makeButtonWithTitle(title: String, image: UIImage?, selector: String, tag: Int) -> UIButton {
let button = UIButton(type: .System)
button.setImage(image, forState: .Normal)
button.tintColor = UIColor.blackColor()
switch tag {
case 0...10:
button.backgroundColor = UIColor(white: 0.98, alpha: 0.8)
button.titleLabel?.font = UIFont(name: "HelveticaNeue-Thin", size: 30)
default:
button.backgroundColor = UIColor(white: 0.90, alpha: 1.0)
button.titleLabel?.font = UIFont(name: "HelveticaNeue-Thin", size: 40)
}
button.setTitle(title, forState: .Normal)
button.tag = tag
return button
}
func makeMessageView(senderImage: UIImage, senderHandle: String, text: String) -> UIView {
let textView = UILabel()
textView.text = text
textView.font = UIFont(name: "HelveticaNeue-Thin", size: 20)
let senderLabel = UILabel()
senderLabel.text = senderHandle
textView.font = UIFont(name: "HelveticaNeue-Thin", size: 20)
let textStackView = UIStackView(arrangedSubviews:[senderLabel, textView])
textStackView.axis = .Horizontal
textStackView.alignment = .Fill
textStackView.distribution = .Fill
let postView = UIView()
postView.addSubview(textStackView)
postView.backgroundColor = UIColor(white: 0.98, alpha: 0.8)
return postView
}
required init?(coder:NSCoder) {
super.init(coder:coder)
self.contentMode = .ScaleToFill
self.backgroundColor = UIColor(patternImage: UIImage(named: "background")!)
self.streamView.spacing = 20.0
self.streamView.translatesAutoresizingMaskIntoConstraints = false
self.streamView.axis = .Vertical
self.streamView.alignment = .Fill
self.streamView.distribution = .FillEqually
for look in self.looks {
let lookImageView = UIImageView(image: look.photo.photo)
lookImageView.contentMode = .ScaleAspectFit
lookImageView.clipsToBounds = true
let postView = self.makeMessageView(
look.user.photo.photo, senderHandle: look.user.handle, text: look.post)
let likeButton = self.makeButtonWithTitle(
" Like", image: UIImage(named: "like"), selector: "", tag: 0)
let commentButton = self.makeButtonWithTitle(
" Comment", image: UIImage(named: "SMS"), selector: "", tag: 1)
let shareButton = self.makeButtonWithTitle(
" Share", image: UIImage(named: "upload"), selector: "", tag: 2)
let buttonsView = UIStackView(arrangedSubviews: [likeButton, commentButton, shareButton])
buttonsView.distribution = .FillEqually
let lookView = UIStackView(arrangedSubviews:[lookImageView, postView, buttonsView])
lookView.axis = .Vertical
lookView.distribution = .Fill
lookView.alignment = .Fill
self.streamView.addArrangedSubview(lookView)
}
self.scrollView.addSubview(self.streamView)
self.scrollView.frame = UIScreen.mainScreen().bounds
self.scrollView.showsVerticalScrollIndicator = false
self.scrollView.showsHorizontalScrollIndicator = false
self.addSubview(self.scrollView)
}
}
So, what I would like this code to do is to give me a scrollable stack of nested stacks that covers the width of the screen (it's ok if the images are clipped, but I'd like them to cover the screen without distortion). What it actually gives me is a scrollable set of images where the width of the first image (seemingly) determines the width of the stack. I'm actually not sure if that's what's going on, but the top level UIStackView is not covering the width of the screen.
I think it has something to do with the UIScrollView has no intrinsic width, so the stack view inside it decides its own size. I say this because if I put the stack view directly in the parent view, it covers the display, but then as you might expect, there is no scrolling...
You need to set some constraints between the scrollview and the UIStackView it contains, at the moment you don't have any.
These three are enough to make the inner UIStackView the same size of the scrollview:
Horizontal constraint between the scrollview and the UIStackView, no space between them
Vertical constraint between the scrollview and the UIStackView, no space between them, this way you'll be able to scroll for the full height of the UIStackView
Same width for the scrollview and the UIStackView, this way the UIStackView will match the scrollview width
And this is the code:
//You already have these two lines:
//scrollView.addSubview(streamView)
//streamView.translatesAutoresizingMaskIntoConstraints = false;
//Add this one too:
scrollView.translatesAutoresizingMaskIntoConstraints = false;
scrollView.addConstraints(
NSLayoutConstraint.constraintsWithVisualFormat("V:|[innerView]|",
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil,
views: ["innerView":streamView]))
scrollView.addConstraints(
NSLayoutConstraint.constraintsWithVisualFormat("H:|[innerView]|",
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil,
views: ["innerView":streamView]))
scrollView.addConstraint(
NSLayoutConstraint(item: scrollView,
attribute: .Width,
relatedBy: .Equal,
toItem: streamView,
attribute: .Width,
multiplier: 1.0,
constant: 0))
Alternatively, you can extend UIView with a method that embed your view in a scrollview:
extension UIView {
func embedInScrollView()->UIView{
let cont=UIScrollView()
self.translatesAutoresizingMaskIntoConstraints = false;
cont.translatesAutoresizingMaskIntoConstraints = false;
cont.addSubview(self)
cont.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[innerView]|", options: NSLayoutFormatOptions(rawValue:0),metrics: nil, views: ["innerView":self]))
cont.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[innerView]|", options: NSLayoutFormatOptions(rawValue:0),metrics: nil, views: ["innerView":self]))
cont.addConstraint(NSLayoutConstraint(item: self, attribute: .Width, relatedBy: .Equal, toItem: cont, attribute: .Width, multiplier: 1.0, constant: 0))
return cont
}
}
And use it this way:
let scrollView = streamView.embedInScrollView()
Edit: Fixed last constraint in the first snippet.