如何在 iOS Swift 中创建此视图？

Question

please click here to see which view I have to make

我必须制作一个类似于苹果地图的地图视图，并且在地图视图之上有描述视图。用户可以左右滑动描述视图，依次查看路线描述。

我不知道这些叫什么，也不知道它们是如何制作的。我真的很想 google 但不知道我必须使用哪个关键字。

请帮忙！

Answer 1

是pagerview，可以用这个库FSPagerView。或者，您可以使用 scrollview 或 collectionview 自己完成。实施 scrollViewDidScroll 以检测当前页面是什么并显示正确的视图

Answer 2

要使视图如图所示，您需要做的就是

获取一个 UICollectionView 并将其放在您的地图视图上。在顶部、前导和尾部为 UICollectionView 提供约束。您还需要提供大约 120-150 的高度限制。
在您的 ViewController 中拖动并创建此 UICollectionView 的出口。
使您的 UIViewController 遵循 UICollectionViewDelegate 和 UICollectionViewDataSource。
使用 xib 文件创建 UICollectionViewCell。
在您的 UI 中注册该单元格ViewController。
创建一个数据模型，其中包含显示方向数据所需的属性。
在该 UI 中创建一个数组ViewController。
将该数组用作 UICollectionView 的数据源。

有道理吗？

Answer 3

正如其他人所说，UIPageViewController 运行良好：

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()
    }
}

如何在 iOS Swift 中创建此视图？

How can you make this view in iOS Swift?

xcode

view

slide

ios

swift