How can you make this view in iOS Swift? - ios

Question

please click here to see which view I have to make
I have to make a map view which is similar to apple maps, and it has description view on top of the map view. The user can slide the description view left and right to see the route description in order.
I have no idea what these are called or how these are made. I really want to google but have no idea which keyword I have to use.
Please Help!

Answer 1

It is pagerview, you can use this library FSPagerView. Or, you can do it yourself by using scrollview or collectionview. Implement the scrollViewDidScroll to detect what is the current page and show the correct view

Answer 2

To make that view shown in picture, all you need to do is
take a UICollectionView and put it on your mapview. Provide UICollectionView a constraints at top, leading and trailing. Also you need yo provide height constraint of about 120-150.
in your ViewController drag and make an outlet of this UICollectionView.
Make your UIViewController follow UICollectionViewDelegate and UICollectionViewDataSource.
create a UICollectionViewCell with a xib file.
register that cell in your UIViewController.
create a datamodel which has properties that you need in order to show the direction data.
create an array in that UIViewController.
use that array as a data source of UICollectionView.
Make sense?

Answer 3

As others have said, UIPageViewController works well:
class ViewController: UIViewController, UIPageViewControllerDataSource {
var mapView: MKMapView!
var data: [String] = {
var data = [String]()
for _ in 0...5 {
data.append("덕원 아파트에서 출발합니다.")
}
return data
}()
override func viewDidLoad() {
super.viewDidLoad()
mapView = MKMapView()
self.view.addSubview(mapView)
mapView.translatesAutoresizingMaskIntoConstraints = false
// pageVC setup
let cardVC = CardViewController(data: data[0])
let pageVC = PageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal, options: nil)
pageVC.setViewControllers([cardVC], direction: .forward, animated: false, completion: nil)
pageVC.dataSource = self
// container view for containment
let containerView = UIView()
view.addSubview(containerView)
containerView.backgroundColor = .black
// containment
addChild(pageVC)
containerView.addSubview(pageVC.view)
pageVC.didMove(toParent: self)
containerView.translatesAutoresizingMaskIntoConstraints = false
pageVC.view.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
// mapView
mapView.widthAnchor.constraint(equalTo: view.widthAnchor),
mapView.heightAnchor.constraint(equalTo: view.heightAnchor),
// container view
containerView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8),
containerView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.2),
// pageVC
pageVC.view.widthAnchor.constraint(equalTo: containerView.widthAnchor),
pageVC.view.heightAnchor.constraint(equalTo: containerView.heightAnchor)
])
let pageControl = UIPageControl.appearance()
pageControl.pageIndicatorTintColor = UIColor.gray.withAlphaComponent(0.6)
pageControl.currentPageIndicatorTintColor = .white
pageControl.backgroundColor = .clear
}
func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
guard let info = (viewController as! CardViewController).label.text, var index = data.firstIndex(of: info) else { return nil }
index += 1
if index > data.count {
return nil
}
return CardViewController(data: data[index])
}
func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
guard let info = (viewController as! CardViewController).label.text, var index = data.firstIndex(of: info) else { return nil }
index -= 1
if index <= 0 {
return nil
}
return CardViewController(data: data[index])
}
func presentationCount(for pageViewController: UIPageViewController) -> Int {
return data.count
}
func presentationIndex(for pageViewController: UIPageViewController) -> Int {
let pageVC = pageViewController.viewControllers![0] as! CardViewController
let t = pageVC.label.text!
return data.firstIndex(of: t)!
}
}
class PageViewController: UIPageViewController {
}
class CardViewController: UIViewController {
var label: UILabel!
var containerView: UIView!
var iconView: IconView!
init(data: String) {
self.label = UILabel()
self.label.text = data
super.init(nibName: nil, bundle: nil)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func loadView() {
let v = UIView()
v.backgroundColor = .black
view = v
}
override func viewDidLoad() {
super.viewDidLoad()
containerView = UIView()
view.addSubview(containerView)
// container view
containerView.addSubview(label)
containerView.translatesAutoresizingMaskIntoConstraints = false
// label
label.translatesAutoresizingMaskIntoConstraints = false
label.backgroundColor = .black
label.textColor = .white
label.numberOfLines = 0
// icon view
iconView = IconView()
containerView.addSubview(iconView)
iconView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
// containerView
containerView.heightAnchor.constraint(equalTo: view.heightAnchor),
containerView.widthAnchor.constraint(equalTo: view.widthAnchor),
// icon view
iconView.widthAnchor.constraint(equalTo: containerView.widthAnchor, multiplier: 0.4),
iconView.heightAnchor.constraint(equalTo: containerView.heightAnchor),
iconView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
// label
label.leadingAnchor.constraint(equalTo: iconView.trailingAnchor),
label.heightAnchor.constraint(equalTo: containerView.heightAnchor),
label.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -10),
])
}
}
class IconView: UIView {
override func draw(_ rect: CGRect) {
let circle = UIBezierPath(arcCenter: self.center, radius: 20, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
UIColor.orange.setFill()
circle.fill()
}
}