How to create custom uiview that button can be clicked inside uiview? - ios

Question

I tried to create clicked scrollview button like this (at bottom):
this is my code so far:
scView = UIScrollView(frame: CGRect(x: 0, y: view.frame.maxY-110, width: view.bounds.width, height: 110))
self.view.addSubview(scView)
scView.backgroundColor = UIColor.lightGray
scView.translatesAutoresizingMaskIntoConstraints = false
for i in 0 ... 10 {
let myNewView=UIView(frame: CGRect(x: xOffset, y: CGFloat(buttonPadding), width: 200, height: 100))
myNewView.backgroundColor=UIColor.white
myNewView.layer.cornerRadius=10
self.scView.addSubview(myNewView)
let label = UILabel(frame: CGRect(x: xOffset, y: CGFloat(buttonPadding)+5, width: 150, height: 10))
label.center = CGPoint(x: 160, y: 285)
label.textAlignment = .left
label.text = "I'am a title label"
label.textColor = .black
myNewView.addSubview(label)
let ditancelabel = UILabel(frame: CGRect(x: xOffset, y: CGFloat(buttonPadding)+5, width: 50, height: 10))
ditancelabel.center = CGPoint(x: 160, y: 285)
ditancelabel.textAlignment = .right
ditancelabel.text = "0.04 km"
ditancelabel.textColor = .red
myNewView.addSubview(ditancelabel)
let textView = UITextView(frame: CGRect(x: xOffset, y: CGFloat(buttonPadding)+15, width: 200.0, height: 40.0))
self.automaticallyAdjustsScrollViewInsets = false
textView.center = self.view.center
textView.textAlignment = NSTextAlignment.justified
textView.textColor = UIColor.lightGray
textView.backgroundColor = UIColor.clear
myNewView.addSubview(textView)
let button = UIButton()
button.tag = i
button.backgroundColor = UIColor.white
button.setTitle("\(i)", for: .normal)
button.setTitleColor(.black, for: .normal)
button.backgroundColor = UIColor.clear
button.addTarget(self, action:#selector(handleRegister(sender:)), for: .touchUpInside)
button.frame = CGRect(x: xOffset, y: CGFloat(buttonPadding), width: 200, height: 100)
xOffset = xOffset + CGFloat(buttonPadding) + button.frame.size.width
myNewView.addSubview(button)
}
scView.contentSize = CGSize(width: xOffset, height: scView.frame.height)
but code result like this:
The first button can be clicked, but the other cannot be clicked. And 2 UILabels and 1 UITextView did not appear.
the handleRegister method is to get sender tag and print it as log to know the button can be clicked or not.
How to repair the code so it can be like the custom UIView in the above image?
I need to transfer label and textview text by button click to another viewcontroller which handle by seque in handleRegister.

Answer 1

1) You can't see labels and other control because of your container view size is (200, 100)
let myNewView=UIView(frame: CGRect(x: xOffset, y: CGFloat(buttonPadding), width: 200, height: 100))
and you set center of controls.
label.center = CGPoint(x: 160, y: 285)
ditancelabel.center = CGPoint(x: 160, y: 285)
This center point is not visible within container view. That's why you can't see labels within view. Just comment these line to set center of labels and you can see those perfectly.
2) I need to transfer label and textview text by button click to another viewcontroller which handle by seque in handleRegister.
I hope you have a array in which you stored data to display in your custom view, Just find that object from array based on button tag, and pass that object to another control.
3) The first button can be clicked, but the other cannot be clicked.
Again problem is same like for labels. You had set frame of button like this
button.frame = CGRect(x: xOffset, y: CGFloat(buttonPadding), width: 200, height: 100)
and increase xOffset by this line to create another view
xOffset = xOffset + CGFloat(buttonPadding) + button.frame.size.width
xOffset increased each time with the size of button. So if you print xOffset value it actually print like (assuming initial value of xOffset = 10, padding = 0)
for i in 0 ... 10 {
print(xOffset)
..... your other code
}
Output: will be like
10, 210, 410, 610...... Because of this your button is out of bound from container view and because of that you can't click on that.
I have updated your code, check below
scView = UIScrollView(frame: CGRect(x: 0, y: view.frame.maxY-110, width: view.bounds.width, height: 110))
self.view.addSubview(scView)
scView.backgroundColor = UIColor.lightGray
scView.translatesAutoresizingMaskIntoConstraints = false
for i in 0 ... 10 {
let myNewView=UIView(frame: CGRect(x: xOffset, y: CGFloat(buttonPadding), width: 200, height: 100))
myNewView.backgroundColor=UIColor.white
myNewView.layer.cornerRadius=10
self.scView.addSubview(myNewView)
let subVwOffset = 5
let label = UILabel(frame: CGRect(x: subVwOffset, y: CGFloat(buttonPadding)+5, width: 150, height: 10))
label.textAlignment = .left
label.text = "I'am a title label"
label.textColor = .black
myNewView.addSubview(label)
let ditancelabel = UILabel(frame: CGRect(x: subVwOffset, y: CGFloat(buttonPadding)+5, width: 50, height: 10))
ditancelabel.textAlignment = .right
ditancelabel.text = "0.04 km"
ditancelabel.textColor = .red
myNewView.addSubview(ditancelabel)
let textView = UITextView(frame: CGRect(x: subVwOffset, y: CGFloat(buttonPadding)+15, width: 200.0, height: 40.0))
self.automaticallyAdjustsScrollViewInsets = false
textView.center = self.view.center
textView.textAlignment = NSTextAlignment.justified
textView.textColor = UIColor.lightGray
textView.backgroundColor = UIColor.clear
myNewView.addSubview(textView)
let button = UIButton()
button.tag = i
button.backgroundColor = UIColor.white
button.setTitle("\(i)", for: .normal)
button.setTitleColor(.black, for: .normal)
button.backgroundColor = UIColor.clear
button.addTarget(self, action:#selector(handleRegister(sender:)), for: .touchUpInside)
button.frame = CGRect(x: subVwOffset, y: CGFloat(buttonPadding), width: 200, height: 100)
xOffset = xOffset + CGFloat(buttonPadding) + button.frame.size.width
myNewView.addSubview(button)
}
scView.contentSize = CGSize(width: xOffset, height: scView.frame.height)
Let me know if you find any other difficulty.