ios scrollview with a full screen video as main content - ios

Question

this is the layout i want to acheive
I am trying to figure out how to make this layout work on different screens. i have tried to get the screen height and programatically set the video layer height equal to it. The volume button constrains are 25 from the right margin and 25 from the bottom of the video. The problem is that when i try to run the app the volume button shows in the middle right of the screen instead on the right of the bottom corner. Also the image views are overlapping the video instead of showing up under it. My assumption is that the constrains of these elements see the height of the video layer in the story board, not the height that i set programatically in the ViewController.swift.

Answer 1

You can achieve a more coherent layout with a table view and having a section for your full screen video and the rest of the image views in another section. The section for your video will have UIScreen.main.bounds.height for the cell height so that you can have a dynamic full screen height regardless of the device.
class ViewController: UITableViewController {
var arr: [[String]] = {
var arr = [[String]]()
arr.append(["Video"])
var imageArr = [String]()
for index in 1...20 {
imageArr.append(String(index))
}
arr.append(imageArr)
return arr
}()
override func viewDidLoad() {
super.viewDidLoad()
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
}
override func numberOfSections(in tableView: UITableView) -> Int {
return arr.count
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return arr[section].count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
cell.textLabel?.text = arr[indexPath.section][indexPath.row]
return cell
}
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if indexPath.section == 0 {
return UIScreen.main.bounds.height
} else {
return 100
}
}
}
As for the volume button, you can create a custom cell for the video section and load it in the cellForRowAt method. Make sure you're using Autolayout and not CGRect to position it.

Answer 2

first of all you are working with ScrollView so you need to give each item in you screen a height so you will give the video screen height "Fixed Height" then you will give your button a fixed height as well and connect it from trailing, leading, bottom and Top and I think it will work with you, and if there is any issue appeared feel free to comment with it