请使用swift语言 帮我写一个NSCollectionView只能放一行图片超出部分图片可以通过滚动展示出来,且当被选中的图片会有红色边框,结合storyboard创建NSCollectionViewItem和NSCollectionView
时间: 2024-04-15 13:30:19 浏览: 163
swift-TableView嵌套CollectionView的一个小Demo
当然可以!以下是使用 Swift 和 Storyboard 结合创建 NSCollectionView 的示例代码:
首先,在你的 Storyboard 中,创建一个 NSViewController,并将其与一个 NSCollectionView 连接。确保设置正确的约束,以便集合视图在滚动时可以展示所有的内容。
接下来,创建集合视图的自定义单元格类(CollectionViewCell.swift),并在其中定义你想要展示的内容和样式。这里我们创建一个显示图片的单元格:
```swift
import Cocoa
class CollectionViewCell: NSCollectionViewItem {
override func viewDidLoad() {
super.viewDidLoad()
view.wantsLayer = true
view.layer?.borderWidth = 2.0
view.layer?.borderColor = NSColor.clear.cgColor
}
override var isSelected: Bool {
didSet {
view.layer?.borderColor = isSelected ? NSColor.red.cgColor : NSColor.clear.cgColor
}
}
func configure(with image: NSImage) {
imageView?.image = image
}
}
```
然后,在你的 NSViewController 类中,遵循 NSCollectionViewDataSource 和 NSCollectionViewDelegate 协议,并实现相应的方法:
```swift
import Cocoa
class ViewController: NSViewController, NSCollectionViewDataSource, NSCollectionViewDelegate {
@IBOutlet weak var collectionView: NSCollectionView!
let imageNames = ["image1", "image2", "image3", "image4", "image5"] // 图片名数组
override func viewDidLoad() {
super.viewDidLoad()
// 设置数据源和代理
collectionView.dataSource = self
collectionView.delegate = self
// 注册自定义单元格类
let itemNib = NSNib(nibNamed: NSNib.Name("CollectionViewCell"), bundle: nil)
collectionView.register(itemNib, forItemWithIdentifier: NSUserInterfaceItemIdentifier("CollectionViewCell"))
// 设置集合视图的布局
let flowLayout = NSCollectionViewFlowLayout()
flowLayout.itemSize = NSSize(width: 100, height: 100) // 单元格大小
flowLayout.scrollDirection = .horizontal // 水平滚动
collectionView.collectionViewLayout = flowLayout
// 刷新数据
collectionView.reloadData()
}
// MARK: - NSCollectionViewDataSource
func collectionView(_ collectionView: NSCollectionView, numberOfItemsInSection section: Int) -> Int {
return imageNames.count
}
func collectionView(_ collectionView: NSCollectionView, itemForRepresentedObjectAt indexPath: IndexPath) -> NSCollectionViewItem {
let item = collectionView.makeItem(withIdentifier: NSUserInterfaceItemIdentifier("CollectionViewCell"), for: indexPath) as! CollectionViewCell
let imageName = imageNames[indexPath.item]
let image = NSImage(named: imageName)
item.configure(with: image!)
return item
}
// MARK: - NSCollectionViewDelegate
func collectionView(_ collectionView: NSCollectionView, didSelectItemsAt indexPaths: Set<IndexPath>) {
for indexPath in indexPaths {
if let item = collectionView.item(at: indexPath) as? CollectionViewCell {
item.isSelected = true
}
}
}
}
```
在上述代码中,我们使用了一个简单的图片名数组来代表要展示的图片。你需要将这些图片添加到你的项目中,并在 `collectionView(_:itemForRepresentedObjectAt:)` 方法中根据图片名加载图片。
最后,将你的 NSViewController 类与 Storyboard 中的视图控制器连接,并设置其为集合视图的数据源和代理。
这样,你就创建了一个 NSCollectionView,其中只能放置一行图片,超出部分可以通过滚动展示出来。当图片被选中时,会有红色边框。
希望这个示例代码能对你有所帮助!如果还有其他问题,请随时提问。
阅读全文