I have some issue. I trie to make custom table header sections. Here is my code:
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let sectionHeader = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 36))
sectionHeader.backgroundColor = #colorLiteral(red: 0.1215686277, green: 0.01176470611, blue: 0.4235294163, alpha: 1)
tableView.backgroundColor = colors.background
let headerName = UILabel(frame: CGRect(x: 15, y: 0, width: tableView.frame.size.width, height: sectionHeader.frame.size.height))
headerName.font = UIFont(name: "Helvetica", size: 12)
headerName.text = sectionHeaders[section]
headerName.backgroundColor = #colorLiteral(red: 0.9529411793, green: 0.6862745285, blue: 0.1333333403, alpha: 1)
headerName.clipsToBounds = true
sectionHeader.addSubview(headerName)
return sectionHeader
}
And here is result:
With blue and yellow color i marked and noticed, that label height not the same as headerview. Can some one help me how manage textlabel height to header view height, and how to align text verticaly
label height not the same as headerview
At first you should setup height of your section header:
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 36.0
}
Based on height: 36 from let sectionHeader = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 36))
how to align text verticaly
headerName.textAlignment = .center
Related
I am adding a button in a tableview section header, and it currently only shows while my phone is in dark mode, I have no idea what the issue might be. All other elements in the header show in both light and dark mode.
headerHeight is a static 200 pixels
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let view = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: headerHeight))
let imageButton = UIButton(frame: CGRect(x: view.frame.width / 2 - 50, y: 10, width: 100, height: 100))
imageButton.setImage(UIImage(systemName: "person.crop.circle"), for: .normal)
view.addSubview(imageButton)
let nameButton = UIButton(frame: CGRect(x: 0, y: 110, width: tableView.frame.width, height: 40))
nameButton.tintColor = .label
nameButton.titleLabel?.textColor = .label
nameButton.setTitle("Set Name", for: .normal)
nameButton.titleLabel?.textAlignment = .center
view.addSubview(nameButton)
let accountsLabel = UILabel(frame: CGRect(x: 10, y: 175, width: 80, height: 20))
accountsLabel.text = "Accounts"
accountsLabel.font = UIFont(name: "Helvetica Neue", size: 15)
view.addSubview(accountsLabel)
return view
}
The problem is this line:
nameButton.titleLabel?.textColor = .label
That is not how you set a button's title color. Change it to:
nameButton.setTitleColor(.label, for: .normal)
I am trying to add a section title Label and a button in the header section view. but it looks empty. when I run the application the header is empty. the 2nd section code work fine
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
if (section == 0){
let label = UILabel.init(frame: CGRect.init(x: 17, y: 139, width: tableView.frame.size.width, height: 45))
label.textColor = UIColor.black
label.font = UIFont.systemFont(ofSize: 13.0)
label.textAlignment = .left
label.text = " My Balances"
label.backgroundColor = UIColor(red: 0.95, green: 0.95, blue: 0.95, alpha: 1.00)
let frame = tableView.frame
let height:CGFloat = 66
let button = UIButton(frame: CGRect(x: 306, y: 139, width: 15, height: 15)) // create button
button.tag = section
// the button is image - set image
button.setImage(UIImage(named: "remove_button"), for: .normal)
let headerView = UIView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: height)) // create custom view
headerView.addSubview(button) // add the button to the view
headerView.addSubview(label)
return headerView
//return label
//return label
}
else {
let label = UILabel.init(frame: CGRect.init(x: 0, y: 241, width: tableView.frame.size.width, height: 45))
label.textColor = UIColor.black
label.font = UIFont.systemFont(ofSize: 13.0)
label.textAlignment = .left
label.text = " My Customers"
label.backgroundColor = UIColor(red: 0.95, green: 0.95, blue: 0.95, alpha: 1.00)
return label
}
}
You are not following the proper way. First you have to set height of header view using heightForHeaderInSection from tableview object in viewDidLoad() like -
tableView.heightForHeaderInSection = 250
or by using its delegate method -
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 250
}
You set the height of header view equal to tableview height. Set it less than it let height:CGFloat = 250 -
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let label = UILabel.init(frame: CGRect.init(x: 0, y: 241, width: tableView.frame.size.width, height: 45))
label.textColor = UIColor.black
label.font = UIFont.systemFont(ofSize: 13.0)
label.textAlignment = .left
label.text = " My Balances"
label.backgroundColor = UIColor(red: 0.95, green: 0.95, blue: 0.95, alpha: 1.00)
let frame = tableView.frame
let height:CGFloat = 250
let button = UIButton(frame: CGRect(x: 5, y: 10, width: 15, height: 15)) // create button
button.tag = section
// the button is image - set image
button.setImage(UIImage(named: "remove_button"), for: .normal)
let headerView = UIView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: height)) // create custom view
headerView.addSubview(button) // add the button to the view
headerView.addSubview(label)
return headerView
//return label
}
Or another way is to make custom reusable header view, register as header view and finally dequeu it.
You can follow the documentation from apple for second way - https://developer.apple.com/documentation/uikit/views_and_controls/table_views/adding_headers_and_footers_to_table_sections
I have this following header for my table view header section
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let view = UIView()
view.backgroundColor = .white
// add a button
let button = UIButton(type : .system)
button.showsTouchWhenHighlighted = false
button.frame = CGRect(x: 0 , y: 0 , width: 20 , height: 20 )
if(collapsed[section])
{ button.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)}
else
{ button.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)}
button.addTarget(self, action: #selector(reloadTable), for: .touchUpInside)
button.tag = section
view.addSubview(button)
button.bindFrameToSuperviewBounds()
// add an Image
let image = UIImageView(image: UIImage(named: "sup1"))
image.frame = CGRect(x: 150 , y: 5 , width: 100 , height: 100)
image.contentMode = .scaleAspectFit
view.addSubview(image)
// add a label
let lblNew = UILabel()
lblNew.frame = CGRect(x: 20, y: 100 , width: 100, height: 30)
lblNew.text = "١٢٣ ر.س"
lblNew.textColor = UIColor.myDarkGreen
lblNew.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(lblNew)
// view.dropShadow()
return view
}
Now I want to add drop shadow effect on the section header to look like this
I have tried some solutions here but it works on simple view that is not used as a viewForHeaderInSection, any tips?
Use the view's layer's shadow properties:
view.layer.shadowOpacity = 1
view.layer.shadowOffset = CGSize(width: 0, height: 1)
view.layer.shadowRadius = 1
Result:
Here is my code:
override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
let whiteRoundedView : UIView = UIView(frame: CGRect(x: 10, y: 8, width: self.view.frame.size.width - 20, height: 140))
whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.9])
whiteRoundedView.layer.masksToBounds = false
whiteRoundedView.layer.cornerRadius = 2.0
whiteRoundedView.layer.shadowOffset = CGSize(width: -1, height: 1)
whiteRoundedView.layer.shadowOpacity = 0.2
whiteRoundedView.layer.borderWidth = 0.5
whiteRoundedView.layer.borderColor = UIColor.orange.cgColor
cell.contentView.backgroundColor = UIColor.clear
cell.contentView.addSubview(whiteRoundedView)
cell.contentView.sendSubview(toBack: whiteRoundedView)
cell.accessoryType = .disclosureIndicator
cell.clipsToBounds = true;
}
Every cell is cut off from the bottom and not showing the complete cell structure.
Any idea?
There is not enough space for the whiteRoundedView over cell height.
Hence, reduce the height <140 of whiteRoundedView while initialization.
let whiteRoundedView : UIView = UIView(frame: CGRect(x: 10, y: 8, width:self.view.frame.size.width - 20, height: YOUR_NEW_HEIGHT))
Your whiteRoundedView should be within the cell content view.
So, try using heightForRowAt indexPath and use the same height for whiteRoundedView in your willDisplay cell
I created the textView and Button(reply) programmatically and I want to move it down to the bottom of my ViewController. It's now being placed under the label(Joshyjosh) and it shouldn't do that. Is there something I need to add to my code or change so it can move to the bottom?
import UIKit
class DetailViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, UITextViewDelegate {
var commentView: UITextView?
var footerView: UIView?
var contentHeight: CGFloat = 0
let FOOTERHEIGHT : CGFloat = 50;
override func viewDidLoad() {
super.viewDidLoad()
}
func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
if self.footerView != nil {
return self.footerView!.bounds.height
}
return FOOTERHEIGHT
}
func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
footerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.bounds.width, height: FOOTERHEIGHT))
footerView?.backgroundColor = UIColor(red: 243.0/255, green: 243.0/255, blue: 243.0/255, alpha: 1)
commentView = UITextView(frame: CGRect(x: 10, y: 5, width: tableView.bounds.width - 80 , height: 40))
commentView?.backgroundColor = UIColor.whiteColor()
commentView?.textContainerInset = UIEdgeInsetsMake(5, 5, 5, 5)
commentView?.layer.cornerRadius = 2
commentView?.scrollsToTop = true
footerView?.addSubview(commentView!)
let button = UIButton(frame: CGRect(x: tableView.bounds.width - 65, y: 10, width: 60 , height: 30))
button.setTitle("Reply", forState: UIControlState.Normal)
button.backgroundColor = UIColor(red: 155.0/255, green: 189.0/255, blue: 113.0/255, alpha: 1)
button.layer.cornerRadius = 5
button.addTarget(self, action: "reply", forControlEvents: UIControlEvents.TouchUpInside)
footerView?.addSubview(button)
commentView?.delegate = self
return footerView
}
func textViewDidChange(textView: UITextView) {
if (contentHeight == 0) {
contentHeight = commentView!.contentSize.height
}
if(commentView!.contentSize.height != contentHeight && commentView!.contentSize.height > footerView!.bounds.height) {
UIView.animateWithDuration(0.2, animations: { () -> Void in
let myview = self.footerView
print(self.commentView!.contentSize.height)
print(self.commentView?.font!.lineHeight)
let newHeight : CGFloat = self.commentView!.font!.lineHeight
let myFrame = CGRect(x: myview!.frame.minX, y: myview!.frame.minY - newHeight , width: myview!.bounds.width, height: newHeight + myview!.bounds.height)
myview?.frame = myFrame
let mycommview = self.commentView
let newCommHeight : CGFloat = self.commentView!.contentSize.height
let myCommFrame = CGRect(x: mycommview!.frame.minX, y: mycommview!.frame.minY, width: mycommview!.bounds.width, height: newCommHeight)
mycommview?.frame = myCommFrame
self.commentView = mycommview
self.footerView = myview
for item in self.footerView!.subviews {
if(item.isKindOfClass(UIButton.self)){
let button = item as! UIButton
let newY = self.footerView!.bounds.height / 2 - button.bounds.height / 2
let buttonFrame = CGRect(x: button.frame.minX, y: newY , width: button.bounds.width, height : button.bounds.height)
button.frame = buttonFrame
}
}
})
print(self.footerView?.frame)
print(self.commentView?.frame)
contentHeight = commentView!.contentSize.height
}
}