Currently I am working on my first iOS app, a ToDo Planner. Here is the layout for it.
Right now I have it set up in that each line has its own textField, button (checkmarked circle), and label (strike line). Like this:
if(textField == textField1) // if the first text field is pressed
{
let image = UIImage(named: "To Be Completed Circle.png")
button1 = UIButton(frame: CGRect(x: 340, y: 56, width: 30, height: 30));
button1.setBackgroundImage(image, for: UIControlState.normal)
self.view.addSubview(button1)
button1.addTarget(self, action:#selector(self.pressCheck), for: .touchUpInside)
}
And this:
if(button == button1) // if first button was pressed
{
button1.setBackgroundImage(image, for: UIControlState.normal) //set image to be of circle with checkmark
button1.removeTarget(nil, action: nil, for: .allEvents) //remove old target action
button1.addTarget(self, action:#selector(self.pressUnCheck), for: .touchUpInside) //add new target action for removing checkmark
self.view.addSubview(button1)
textField1.textColor = UIColor.gray //change textfield to a gray color
label1 = UILabel(frame: CGRect(x : 34, y : 70, width: 200, height: 2)) //add the strike line through textfield
label1.backgroundColor = UIColor(patternImage: labelImage!)
self.view.addSubview(label1)
}
Button1 Label1 textfield1 all correspond to the first line of input.
Button2 Label2 textfield2 etc...
The textfields were made using interface builder, the buttons/labels were made programmatically. I was wondering if there is any way (I'm sure there is) to use just one button one label and one textfield to control all user input? The buttons and labels all essentially to the same thing.
Let me know if I'm not too clear.
You can use a TableView with custom cells for your each line. A single cell can be designed with your required Label, TextField and Button. You can make it through the storyboard itself using prototype cell in tableView.
This should really be using a TableView.
That would allow you to set up one row of the table with the elements you want and reuse them the way you are asking about.
You should create a nib file of UITableViewCell class where you can design a single cell with Textfield, label, button. And you should use UITableview on storyboard and after that you should load that nib.
Related
My buttons don't resize based on the text in their titleLabel. All of the titleLabel text is displayed, but it goes outside the bounds of the button
My buttons are in a stackview in a xib cell. The xib cell also has a label above the stackview.
I have two classes: ViewController (tableview and datasource), ViewCell (button outlets and actions)
ViewController code:
In my cellForRowAt method:
cell.choice1Button.titleLabel?.lineBreakMode = .byWordWrapping
cell.choice2Button.titleLabel?.lineBreakMode = .byWordWrapping
cell.choice3Button.titleLabel?.lineBreakMode = .byWordWrapping
cell.choice1Button.titleLabel?.numberOfLines = 0
cell.choice2Button.titleLabel?.numberOfLines = 0
cell.choice3Button.titleLabel?.numberOfLines = 0
cell.conceptLabel.text = question["concept"]!
cell.choice1Button.setTitle(question["choice1"]!, for: .normal)
cell.choice2Button.setTitle(question["choice2"]!, for: .normal)
cell.choice3Button.setTitle(question["choice3"]!, for: .normal)
cell.mcTableCellDelegate = self
I want the buttons to resize in height and for the text to wrap based on how long the titleLabel text is. Is this a constraints issue?
I'm new to iOS programming and I would appreciate your help!
I have a table view cell whose right item should display a number the user picks.
My current solution is a picker view as the right item but the problem is that it is too small for appropriate user experience.
Thus im thinking about a label on the right side of the cell. When the user taps the cell, a picker view should appear similar to a keyboard. The row within the picker view that the user selects should then update the label. (I'm not sure if thats a smart solution..) But I don't know how to implement this.
I'm sorry if that question is too basic, but I would be very thankful for an easy explanation or solution suggestions to my user experience problem.
[Unfortunately I can't post a image]
First create a pickview and set it as input view to your text field li so
textField.inputView = pickerView
then setup the toolbar
func setupToolbar () {
let toolBar: UIToolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 44.0))
toolBar.tintColor = Color.custom(hexString: JIFFYConstants.ApplicationConstants.kAppOrangeColor, alpha: 1.0).value
let doneBtn: UIButton = UIButton(type: .custom)
doneBtn.frame = CGRect(x: 10, y: 0, width: 30, height: 30)
doneBtn.setTitle(JIFFYConstants.JiffyButtonTitles.kDoneActionTitle, for: .normal)
doneBtn.setTitleColor(Color.custom(hexString: JIFFYConstants.ApplicationConstants.kAppOrangeColor, alpha: 1.0).value, for: .normal)
doneBtn.addTarget(self, action: #selector(doneButtonAction), for: .touchUpInside)
let doneBarButton: UIBarButtonItem = UIBarButtonItem(customView: doneBtn)
let space : UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
var items = [UIBarButtonItem]()
items.append(space)
items.append(doneBarButton)
toolBar.items = items
textField.inputAccessoryView = toolBar
}
Later on add datasource to your picker view and reload it. It will show your pickerView as inputView.
You could make right item as a UITextFiled. Then set inputView for it.
https://developer.apple.com/documentation/uikit/uitextfield/1619620-inputview
UITEXTFIELD InputView Uipicker not working in swift
I am trying set size programmatically of left button bar item but i can't it.
This is my code:
let backButton = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
backButton.setBackgroundImage(UIImage(named: "hipster_pelo2.png"), for: .normal)
self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: backButton)
But this is the result in iphone X with Xcode 9 and swift 3. In the image, you can see title app move it to the right because button size:
Anybody know that the problem will be the image size??
You can restrict the size of barButton items using
let barButton = UIBarButtonItem(customView: backButton)
NSLayoutConstraint.activate([(barButton.customView!.widthAnchor.constraint(equalToConstant: 30)),(barButton.customView!.heightAnchor.constraint(equalToConstant: 30))])
self.navigationItem.leftBarButtonItem = barButton
Reference : https://skyebook.net/blog/2017/09/uibarbuttonitem-sizing-in-ios-11/
The huge frame of the button is because of the huge image you are setting to the button's background. Though frame you set to button should override the implicit size of the button, for some strange Reasons when passed as custom view to bar button implicit size takes over. Hence applying width and height constraints to restrict the size of custom view kind of becomes necessary.
EDIT:
As OP is facing issue with loading the image from url and setting it as button's image I am updating my answer to demonstrate the same,
do {
try button.setImage(UIImage(data: Data(contentsOf: your_url)), for: .normal)
}
catch {
print(error)
}
Issue with OP's code was trying to set the button image, even before the image was downloaded. So this should help you solve your problem :)
EDIT 2:
OP facing trouble with making the bar button's customView circular, so here is the code that should make BarButton item's customView circular :)
barButton.customView?.layer.cornerRadius = 15
barButton.customView?.layer.masksToBounds = true
Hope it helps
I'm constantly running into this issue, I don't know how to treat UITableViewCells as UIViews.
I added a button to my UITableViewCell:
let btnWidth = self.contentView.frame.size.width * 1.1
let btnHeight = self.contentView.frame.size.height * 1.6
btnJoinChannel = UIButton(frame: CGRect(x:0,y:0,width:btnWidth,height:btnHeight))
btnJoinChannel.setTitle("Join Channel", for: .normal)
btnJoinChannel.setTitleColor(.white, for: .normal)
btnJoinChannel.backgroundColor = .clear
btnJoinChannel.addTarget(self, action: #selector(JRegionCell.loadRegion), for: .touchUpInside)
self.contentView.addSubview(btnJoinChannel)
Buttons never work on UITableViewCells by default because some kind of touch gesture value overrides the new button.
What do I configure to prevent this override? I would like users to touch buttons inside UITableViewCells. Basically, my cells need to behave like UIViews.
Your button is bigger than content view. Buttons don't work if they are out of superview.
I would like to make my custom button to center in tableView Cell, because It feels like the button somehow offset to the left (I think it's because of the frame for accessory type.
I have tried using the didselectrowatindexpath but I feel like I want to do it with UIButton. Do you have any idea how to make my button in tableviewcell center? I have tried using self.view.center but it doesn't work. here's the code:
self.buatAkunBtn = UIButton(frame: CGRectInset(self.buatAkunBtnCell.contentView.bounds, 0, 0))
self.buatAkunBtn.setTitle("Masuk", forState: UIControlState.Normal)
self.buatAkunBtn.setTitleColor(acehBusColor, forState: .Normal)
self.buatAkunBtn.addTarget(self, action: Selector("btncreateAccTapped:"), forControlEvents: .TouchUpInside)
self.buatAkunBtnCell.addSubview(self.buatAkunBtn)
Here's the image from which caused by the code above:
METHOD 0:
If you absolutely want to use code. Here is how I would solve your case:
self.buatAkunBtn = UIButton(frame: CGRectInset(self.buatAkunBtnCell.contentView.frame.offsetBy(dx: 30, dy: 0), 0, 0))
self.buatAkunBtn.setTitle("Masuk", forState: UIControlState.Normal)
self.buatAkunBtn.setTitleColor(acehBusColor, forState: .Normal)
self.buatAkunBtn.addTarget(self, action: Selector("btncreateAccTapped:"), forControlEvents: .TouchUpInside)
self.buatAkunBtnCell.addSubview(self.buatAkunBtn)
Or you can use the Interface builder which would be much simpler and elegant.
METHOD 1:
1) Click on your UIButton.
2) Add constraints relative to Cell 0 to left, 0 to right.
3) Your UIButton is now centered.
METHOD 2 (recommended):
1) Click on your UIButton.
2) Ctrl drag from your button to your cell.
3) Select "center horizontally in container".
METHOD 3 (recommended):
1) Click on your UIButton.
2) Click on the alignment constraint icon at the bottom right.
3) Click on the checkbox: "center horizontally in container"