0

Instagramのものに似たUICollectionViewを構築するにはどうすればよいですか? 私はすでに3つの列1を作成しました:

let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    let width = (view.frame.width/3)-2

    myCollectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
    layout.sectionInset = UIEdgeInsets(top: 49, left: 1, bottom: 1.5, right: 1)
    layout.itemSize = CGSize(width: width, height: width)
    layout.minimumInteritemSpacing = 1
    layout.minimumLineSpacing = 1

    myCollectionView?.dataSource = self
    myCollectionView?.delegate = self
    myCollectionView?.register(PhotoGalleryCell.self, forCellWithReuseIdentifier: cellid)
    myCollectionView?.backgroundColor = .white
    self.view.addSubview(myCollectionView!)

    myCollectionView!.addSubview(segmentedControl)
    segmentedControl.topAnchor.constraint(equalTo: myCollectionView!.topAnchor, constant: 12).isActive = true
    segmentedControl.centerXAnchor.constraint(equalTo: myCollectionView!.centerXAnchor).isActive = true
    segmentedControl.heightAnchor.constraint(equalToConstant: 25).isActive = true
    segmentedControl.widthAnchor.constraint(equalTo: myCollectionView!.widthAnchor, constant: -24).isActive = true

しかし、selectedControl の値が 1 になったときに Collection ビューの項目の幅を 1 列にし、値が 0 に戻ると、collectionView は 3 列の設定に戻ります。これを行う方法はありますか？

4

1 に答える 1

0

の を切り替える場合は、予想される UIグリッドまたはリストに基づいてlayoutのを変更する必要があります。collectionViewsegmentsUISegmentedControl

まず、いいねを作成しenum LayoutType、

enum LayoutType {
    case list, grid
}

次に、 で、最初に に設定されたタイプViewControllerのプロパティを作成します。layoutTypeLayoutType.list

var layoutType = LayoutType.list

次に@IBActionforsegmentedControl's valueChangedイベントを実装します。だから、今までのようにViewController見えます。

class VC: UIViewController, UICollectionViewDelegateFlowLayout {
    @IBOutlet weak var collectionView: UICollectionView!
    var layoutType = LayoutType.list

    @IBAction func onChange(_ sender: UISegmentedControl) {
        if sender.selectedSegmentIndex == 0 {
            layoutType = .list
        } else {
            layoutType = .grid
        }
        collectionView.reloadData()
    }
}

UICollectionViewDataSource必要に応じてメソッドを実装します。あなたはすでにそれをしているに違いありません。

layoutに基づいてを変更するには、プロトコルlayoutTypeに準拠し、以下のメソッドを実装する必要があります。UICollectionViewDelegateFlowLayout

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    switch layoutType {
    case .list:
        return CGSize(width: collectionView.bounds.width, height: 50)
    case .grid:
        return CGSize(width: (collectionView.bounds.width - 20) / 3, height: 50)
    }
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 10
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 10
}

これで物事を進めることができます。問題が解決しない場合はお知らせください。

于 2019-07-26T12:41:46.180 に答える