I have a collection view with multiple cells in it, I figured out how to add a border to each cell but still stuck with adding a border to the CollectionView (expected Result).
Currently, I'm placing the button outside the CollectionView but don't know how to make it looks like the expected result.
For set the collection view border you can follow this
collectionView.layer.borderColor = UIColor.gray.cgColor
collectionView.layer.borderWidth = 5
And for setting cell position to the middle you need to set the cell insect.
You can easily set the cell insect from storyboard from this. Update the Section Insects value that you want.
you can try like this:
#IBOutlet var CollectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
CollectionView.delegate = self
CollectionView.dataSource = self
CollectionView.layer.borderColor = UIColor.gray.cgColor //change to required color
CollectionView.layer.borderWidth = 5 //change to required borderwidth
}
Related
I have a form with a UIView wrapping around a UILabel and UITextField. When a user enters the field I would like to change the colour of the label and the border colour of the view container.
If I call a function on the firstResponder I will need to find the text field's corresponding label and view copntainer.
I thought to have a firstResonder function for each field and in each function send the corresponding outlets (textfield, label, view) to a function which handles the colour changes for the label and view border.
This is not terrible but I and sure this can be accomplished more efficiently.
Any pointers please.
edit:
I changed my requirement slightly to place the label inside the textfield and highlight the textfield border instead of the encapsulating view.
This is what I ended up with:
override func viewDidLoad() {
super.viewDidLoad()
firstNameLabel.connect(with: firstName)
}
extension UILabel {
#objc
func editingChanged(textField: UITextField) {
}
#objc
func editingDidBegin(textField: UITextField) {
self.textColor = UIColor.blue
textField.layer.borderColor = UIColor.blue.cgColor
}
#objc
func editingDidEnd(textField: UITextField) {
self.textColor = UIColor.green
textField.layer.borderColor = UIColor.green.cgColor
}
func connect(with textField:UITextField){
//textField.addTarget(self, action: #selector(UILabel.editingChanged(textField:)), for: .editingChanged)
textField.addTarget(self, action: #selector(UILabel.editingDidBegin(textField:)), for: .editingDidBegin)
textField.addTarget(self, action: #selector(UILabel.editingDidEnd(textField:)), for: .editingDidEnd)
textField.layer.borderColor = UIColor.gray.cgColor
textField.layer.borderWidth = 1;
textField.layer.cornerRadius=10
}
}
The usual thing is to give each member of each group a corresponding tag. Since viewWithTag drills down to find any view with the given tag, the problem is solved if you know how to convert the tag value of the view you have to the tag value of the view you want.
For example, text field 10, view 110, label 210; text field 11, view 111, label 211; and so on. Or whatever system suits your fancy.
Alternatively just walk the view hierarchy. The view is the text field's superview, and the label is the first subview of the view that is a label.
I have a viewcontroller with a tableview inside it. At the bottom of the tableview there is some white space that I want to get rid of and be replaced by my background colour.
I have added and customised the tableview programatically so I am looking for a programatic answer, as I did not use storyboard much for this. (I had only used it to setup my TabBarController and link it to navigation and view-controllers.)
Below is the some of the code I used to configure the tableview.
private let tableView: UITableView = {
let tableView = UITableView(frame: .zero, style: .plain)
tableView.register(ProfileTableViewCell.self, forCellReuseIdentifier: ProfileTableViewCell.identifier)
tableView.backgroundColor = Constants.backgroundColor
return tableView
}()
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
tableView.frame = view.bounds
}
Im sure the answer is probably just a single line of code, but I couldn't find one that worked. Thanks in advance!
***EDIT
I have found a solution, but I still think there is a better way to solve this problem. The code below sets a UIView as the background of the tableview, then changes the colour of the UIView.
private let tableView: UITableView = {
let tableView = UITableView(frame: .zero, style: .plain)
tableView.register(ProfileTableViewCell.self, forCellReuseIdentifier: ProfileTableViewCell.identifier)
let backgroundView = UIView(frame: CGRect(x: 0,
y: 0,
width: tableView.bounds.size.width,
height: tableView.bounds.size.height))
backgroundView.backgroundColor = Constants.backgroundColor
tableView.backgroundView = backgroundView
return tableView
}()
The default color of the containing view controller is showing, since the table is short. Try setting the view controller's view's background color in viewDidLoad:
override func viewDidLoad() {
super.viewDidLoad();
view.backgroundColor = Constants.backgroundColor
}
I have a vertical StackView with Distribution "Equal Spacing"
containing horizontal StackViews each containing a Switch and a label except the last one, which contains a Switch and a TextField.
Now, when the Switch of that last one is turned on, I want to add an additional horizontal StackView to the vertical one which looks like the last one:
#IBAction func onValueChange(_ sender: UISwitch) {
let parent = sender.superView as! UIStackView
let pparent = parent.superView as! UIStackView
let textField = parent.arragedSubviews[1] as TextField
let row = UIStackView
row.axis = UILayoutConstraintAxis.horizontal
row.spacing = 30
let swtch = UISwitch()
swtch.isOn = false
let input = UITextField()
input.borderStyle = textField.borderStyle
row.addArrangedSubView(swtch)
row.addArrangedSubView(input)
pparent.addArrangedSubView(row)
}
it works quite well, except the new row is smaller in height and therefore the textfield is also smaller in height, which looks stupid. I didn't put any restraints on the horizontal StackViews. What should I do?
Use .fillEqually instead of .equalSpacing to make sure that the rows in the stackView would equal in height.
Attached you may find a picture of (left) my attempt to create a similar (right) UITableView. they look like buttons but they're only cells that can be clicked on as a tableview cell.
I have tried many different things including adding a container window inside a custom cell, adding a UIImage inside the custom cell but I just can't replicate these cells!
I have tried using a custom cell class, I have tried doing it through IB and I for the crazyiness of me, cannot recreate it.
Would anyone be able to give me a hint on how to create the (inside cell) text-bounding box/square? with the different background colour lighting?
If this can easily be done with IB I'd rather do it this way, but if you have a sample customcell class that I can take a look at that'd be greatly appreciated too!
Thank you for taking the time to look at my question.
I have made a sample for you close to your requirement. Have a look
https://github.com/RajanMaheshwari/CustomTableCell
I would like to do this using a UITableView.
My approach will be taking a custom cell and add a UIView with some constraints from left, right, up and down.
Also I will provide the same background color to UITableView, UIView which is the superview and the cell content view and also make the separator of UITableView as None and Selection of TableCell as None so that the UI looks like
Next after applying every constraint and making a CustomCell and making IBOutlets we will jump to code.
I will do all the shadow and outlining in Custom Cell's awakeFromNib method
This will be my CustomTableViewCell class
class CustomTableViewCell: UITableViewCell {
#IBOutlet weak var labelBackgroundView: UIView!
#IBOutlet weak var cellLabel: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
labelBackgroundView.layer.borderWidth = 0.5
labelBackgroundView.layer.borderColor = UIColor.lightGrayColor().CGColor
labelBackgroundView.layer.shadowColor = UIColor.lightGrayColor().CGColor
labelBackgroundView.layer.shadowOpacity = 0.8
labelBackgroundView.layer.shadowRadius = 5.0
labelBackgroundView.layer.shadowOffset = CGSizeMake(0.0, 2.0)
labelBackgroundView.layer.masksToBounds = false;
}
I have two outlets.
One is the label in which you will be displaying the name.
Other is the outer view which you want to display with some outlining and shadow.
The ViewController code will be:
class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {
var array = [String]()
#IBOutlet weak var myTableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
array = ["Wealth","Health","Esteem","Relationship"]
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return array.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("CustomTableViewCell") as! CustomTableViewCell
cell.cellLabel.text = array[indexPath.row]
cell.labelBackgroundView.tag = indexPath.row
cell.labelBackgroundView.userInteractionEnabled = true
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(cellViewTapped))
cell.labelBackgroundView.addGestureRecognizer(tapGesture)
return cell
}
func cellViewTapped(sender:UITapGestureRecognizer) {
let view = sender.view
let index = view?.tag
print(index!)
}
}
Here I have not used didSelectIndex of UITableViewDelegate as I only want the tap on the Outlining LabelBackgroundView and not on complete cell.
So the final outcome is like this
I think you are on the right path. I did something similar in a project. I created a subclass of UIView (too add a shadow to the view) and added a view with this type inside the cell.
class ShadowedView: UIView {
override func awakeFromNib() {
layer.shadowColor = UIColor(red: 157.0/255.0, green: 157.0/255.0, blue: 157.0/255.0, alpha: 0.5).CGColor
layer.shadowOpacity = 0.8
layer.shadowRadius = 5.0
layer.shadowOffset = CGSizeMake(0.0, 2.0)
}
}
Don't forget to add some constraints to the view inside the cell.
You can arrange your collection view layout in "Size insepector"
And customise your image in the cell.
I have created a custom cell for my table view and it works fine except that my Image View will not align correctly.
Is there a way to add constraints to a custom cell view? Programmatically or otherwise?
This is what my cell looks like in the storyboard - which is what I was hoping to achieve at run time:
But when I demo the app this is what happens:
Here is another image from the storyboard:
View Controller /w TableView
#IBOutlet weak var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
println(questions)
println(finalResults)
let theWidth = view.frame.size.width
let theHeight = view.frame.size.height
tableView.frame = CGRectMake(0,0, theHeight, theWidth)
}
Cell View Controller
override func awakeFromNib() {
let theWidth = UIScreen.mainScreen().bounds.width
contentView.frame = CGRectMake(0,0, theWidth, 64)
answerImage.center = CGPointMake(115, 15)
}
You only have to set up your constraints correctly. Indeed, even if Add Missing Constraints and Reset to Suggested Constraints are handy sometimes they don't know what you want, thus the result cannot always be what you expect.
What you might want to do here is the following.
For you question label set it in center Y of it's container and set it's leading space to the superview. Like so :
Then for you image, you want to set it in center Y of it's container too and set a ratio 1:1 on it. Like so :
Note that you might also want to check the width and height if you don't want your image to upscale (if you set a bigger cell on some device).
You should now have something like that :
And the result :
Let me know if it helped.
PS : I don't have your image so I've just set a background color on the uiimageview
Assuming that you started with a View Controller, Dragged a table and a Cell into the table...
in ViewController: UIViewController...{
#IBOutlet weak var resultsTable: UITableView! // connect to tableView
override func viewDidLoad() {
super.viewDidLoad()
let theWidth = view.frame.size.width
let theHeight = view.frame.size.height
resultsTable.frame = CGRectMake(0,0, theWidth, theHeight)
}
}
in UITableViewCell file:
#IBOutlet weak var imageView: UIImageView!
override func awakeFromNib() {
let theWidth = UIScreen.mainScreen().bounds.width
contentView.frame = CGRectMake(0,0 theWidth, 64)
imageView.center = CGPointMake(115, 15) //mess around with these #
}