FirebaseUI Database allows you to quickly connect common UI elements to the Firebase Realtime Database for data storage, allowing views to be updated in realtime as they change, and providing simple interfaces for common tasks like displaying lists or collections of items.
Provides core data binding capabilities as well as specific data sources for lists of data.
Class | Description |
---|---|
FUITableViewDataSource | Data source to bind a Firebase query to a UITableView |
FUICollectionViewDataSource | Data source to bind a Firebase query to a UICollectionView |
FUIIndexCollectionViewDataSource | Data source to populate a collection view with indexed data from Firebase DB. |
FUIIndexTableViewDataSource | Data source to populate a table view with indexed data from Firebase DB. |
FUIArray | Keeps an array synchronized to a Firebase query |
FUISortedArray | A synchronized array that automatically sorts its contents. |
FUIIndexArray | Keeps an array synchronized to indexed data from two Firebase references. |
For a more in-depth explanation of each of the above, check the usage instructions below.
FUITableViewDataSource
implements the UITableViewDataSource
protocol to automatically use Firebase as a data source for your UITableView
.
self.dataSource = self.tableView.bind(to: query) { tableView, indexPath, snapshot in
// Dequeue cell
let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)
/* populate cell */
return cell
}
self.dataSource = [self.tableView bindToQuery:query
populateCell:^UITableViewCell *(UITableView *tableView,
NSIndexPath *indexPath,
FIRDataSnapshot *snap) {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"reuseIdentifier"
forIndexPath:indexPath];
/* populate cell */
return cell;
}];
FUICollectionViewDataSource
implements the UICollectionViewDataSource
protocol to automatically use Firebase as a data source for your UICollectionView
.
self.dataSource = self.collectionView.bind(to: self.firebaseRef) { collectionView, indexPath, snap in
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "reuseIdentifier", for: indexPath)
/* populate cell */
return cell
}
self.firebaseRef = [[FIRDatabase database] reference];
self.dataSource = [self.collectionView bindToQuery:self.firebaseRef
populateCell:^UICollectionViewCell *(UICollectionView *collectionView,
NSIndexPath *indexPath,
FIRDataSnapshot *object) {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuseIdentfier"
forIndexPath:indexPath];
/* populate cell */
return cell;
}];
You can use the default UITableViewCell
or UICollectionViewCell
implementations to get up and running quickly. For UITableViewCell
s, this allows for the cell.textLabel
and the cell.detailTextLabel
to be used directly out of the box. For UICollectionViewCell
s, you will have to add subviews to the contentView in order for them to be useful.
self.dataSource = self.tableView.bind(to: firebaseRef) { tableView, indexPath, snap in
let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)
// Populate cell as you see fit, like as below
cell.textLabel?.text = snap.key
return cell
}
self.dataSource = self.collectionView.bind(to: firebaseRef) { collectionView, indexPath, snap in
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "reuseIdentifier", for: indexPath)
// Populate cell as you see fit
cell.contentView.accessibilityLabel = "A cell"
return cell
}
self.dataSource = [self.tableView bindToQuery:self.firebaseRef
populateCell:^UITableViewCell *(UITableView *tableView,
NSIndexPath *indexPath,
FIRDataSnapshot *snap) {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"reuseIdentifier"
forIndexPath:indexPath];
// Populate cell as you see fit, like as below
cell.textLabel.text = snap.key;
return cell;
}];
self.dataSource = [self.collectionView bindToQuery:self.firebaseRef
populateCell:^UICollectionViewCell *(UICollectionView *collectionView,
NSIndexPath *indexPath,
FIRDataSnapshot *snap) {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuseIdentifier"
forIndexPath:indexPath];
// Populate cell as you see fit
cell.contentView.accessibilityLabel = @"A cell";
return cell;
}];
FirebaseUI has several building blocks that developers should understand before building additional functionality on top of it, including a synchronized array FUIArray
and collection protocol FUICollection
which FUITableViewDataSource
and FUICollectionViewDataSource
use to drive UI updates.
FUIArray
is synchronized array connecting a Firebase FIRDatabaseReference
with an array. It surfaces Firebase events through the FUICollectionDelegate
Protocol. If you're building a multiple-section UI, you'll have to use this class directly instead of using one of the provided data sources.
let firebaseRef = Database.database().reference()
let array = FUIArray(query: firebaseRef)
FIRDatabaseReference *firebaseRef = [[FIRDatabase database] reference];
FUIArray *array = [[FUIArray alloc] initWithQuery:firebaseRef];
FUIArray
can be subclassed to provide more complex behaviors like client-side sorting. Take a look at FUISortedArray
for an example on how to do this.