[Swift]how to use custom section header of TableView

We can use custom section header on UITableView.

Sub class : UITableViewHeaderFooterView

UITableViewHeaderFooterViewを継承したクラスを作成します。 We need to implement the sub class of UITableViewHeaderFooterView.

?

1 2 3 4 5 6 7 8 9 10 11

import UIKit   class CustomTableViewHeaderFooterView: UITableViewHeaderFooterView {       @IBOutlet weak var headerView: UIView!           override func awakeFromNib() {         super.awakeFromNib()         // Initialization code     } }

Nib file

We need to implement the view for Header.

Set to TableView

We need to use tableView.registerNib like a Cell. This is used return value in tableView:viewForHeaderInSection method.
If View width is no good, you need to set frame.size.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

class ViewController: UITableViewController {           override func viewDidLoad() {         super.viewDidLoad()                   let nib:UINib = UINib(nibName: "CustomTableViewHeaderFooterView", bundle: nil)         tableView.registerNib(nib, forHeaderFooterViewReuseIdentifier: "CustomTableViewHeaderFooterView")     }           override func numberOfSectionsInTableView(tableView: UITableView) -> Int {         return 1     }           // header height     override func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {         return 44     }                 // header view     override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {         let header :CustomTableViewHeaderFooterView = self.tableView.dequeueReusableHeaderFooterViewWithIdentifier("CustomTableViewHeaderFooterView") as! CustomTableViewHeaderFooterView         header.headerView.frame.size = CGRectMake(0, 0, tableView.frame.size.width, 44).size                   return header     }       }

BottomSheet vis Android Design Support Library 23.2.0

Android Design Support Library had added BottomSheet from ver.23.2.
We can implement BottomSheet design like a GoogleMap.


AOSP: BottomSheetBehavior.java

Layout Sample

We add the param app:layout_behavior="@string/bottom_sheet_behavior" in child view of CoordinatorLayout.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<android.support.design.widget.CoordinatorLayout         xmlns:android="http://schemas.android.com/apk/res/android"         xmlns:tools="http://schemas.android.com/tools"         xmlns:app="http://schemas.android.com/apk/res-auto"         android:layout_width="match_parent"         android:layout_height="match_parent"         tools:context=".MainActivity">       <LinearLayout             android:layout_width="match_parent"             android:layout_height="match_parent"             android:orientation="vertical"             app:layout_behavior="@string/bottom_sheet_behavior"             app:behavior_peekHeight="240dp"             app:behavior_hideable="false"             android:background="@android:color/white">         <TextView                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:text="BottomSheet Sample"/>     </LinearLayout> </android.support.design.widget.CoordinatorLayout>

We cab add following params.

• app:behavior_peekHeight
• BottomSheet minimum size
• app:behavior_hideable
• BottomSheet is hidden when scroll to bottom.