CODEWITHSUNDEEP
iosswift
Microos
Microos

Reputation: 1768

How can I design my own view with Swift in IOS

Today, I realise that for MVC, we can build Model and we can use our Controller. However, it seems I haven't try to design my own View but just use the default View given by IOS SDK.

Could you please consider this example case with me: to consider the tableView's Header,

1.I'd like to put a button in it

2.and make the Header much more bigger to contain some detail labels.

3.Also let the Header's background to become UIColor.blueColor()

I try to create a class(called MyHeaderView) extends form UITableViewHeaderFooterView, and I know there is one of properties inside my MyTableViewController which is the entry of the Header and I can assign a new object of my own design class object -- MyHeaderView. Am I right? That is how I thought, but I just tried the third require( change background to blue ):

inside MyHeaderView, I define a function:

class MyHeaderView: UITableViewHeaderFooterView {

    func change(){
        self.backgroundColor = UIColor.blackColor()
    }
}

and inside 

class MyTableViewController: UITableViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let frame = CGRectMake(0, 0, 1000, 1000)// Big enough!
        var a = MyHeaderView(frame: frame)
        a.change()
        self.view.addSubview(a)// To be frank, I believe this statement is not right for achieving this requirement
    }
}

Of course it doesn't work at all! Just like this: enter image description here

Could anyone tell me a little about how to customise my own view! Thank you! (IF I my not clear myself, please help me point it out:D I will make it more detail as soon as possible)

Upvotes: 0

Views: 96

Answers (2)

TekMi
TekMi

Reputation: 191

I think you may be interested in reading the book "Programming iOS 9" by Matt Neuburg, especially subchapter "Table Views and Collection Views".

A section header or footer appears between the cells, before the first row of a section or after the last row of a section, respectively.

Don’t confuse the section headers and footers with the header and footer of the table as a whole. The latter are view properties of the table view itself, its tableHeaderView and tableFooterView. The table header appears only when the table is scrolled all the way down; the table footer appears only when the table is scrolled all the way up.

So, coming back to your attempts of customising table sections views (what I assumed), you may find this extracted information useful:

The UITableViewHeaderFooterView class is a UIView subclass intended specifically for use as the view of a header or footer; much like a table view cell, it is reusable. It has the following properties:

  • textLabel - Label (UILabel) for displaying the text of the header or footer.
  • detailTextLabel - This label, if you set its text, appears only in a grouped style table.
  • contentView - A subview of the header or footer, to which you can add custom subviews. If you do, you probably should not use the built-in textLabel; the textLabel is not inside the contentView and in a sense doesn’t belong to you.
  • backgroundView - Any view you want to assign. The contentView is in front of the backgroundView. The contentView has a clear background by default, so the backgroundView shows through. An opaque contentView.backgroundColor, on the other hand, would completely obscure the backgroundView. If the backgroundView is nil (the default), the header or footer view will supply its own background view whose backgroundColor is derived (in some annoyingly unspecified way) from the table’s backgroundColor.

You implement the delegate method tableView:viewForHeaderInSection: or tableView:viewForFooterInSection: (or both). The view you supply is used as the entire header or footer and is automatically resized to the table’s width and the section header or footer height.

You are not required to return a UITableViewHeaderFooterView, but you will probably want to, in order to take advantage of reusability. To do so, the procedure is much like making a cell reusable. You register beforehand with the table view by calling registerClass:forHeaderFooterViewReuseIdentifier:. To supply the reusable view, send the table view dequeueReusableHeaderFooterViewWithIdentifier:; the result will be either a newly instantiated view or a reused view.

In addition, two pairs of delegate methods permit you to perform final configurations on your header or footer views:

tableView:willDisplayHeaderView:forSection: 
tableView:willDisplayFooterView:forSection:

and

tableView:heightForHeaderInSection: 
tableView:heightForFooterInSection:

And as the bonus, another quirks that Matt is warning about:

Don’t set a UITableViewHeaderFooterView’s backgroundColor; instead, set the backgroundColor of its contentView, or assign a backgroundView and configure it as you like. Also, setting its tintColor has no effect.

Upvotes: 2

vadian
vadian

Reputation: 285270

You can do this in Interface Builder.

Just drag a UIView above and below the table view, change the background color, height, add IBOutlets etc.

Upvotes: 1

Related Questions