Here's an example of how you can create a custom view in Swift that displays a horizontal carousel with an image view and a label for each item:
import UIKit
class CarouselItemView: UIView {
private let imageView: UIImageView = {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFit
return imageView
}()
private let label: UILabel = {
let label = UILabel()
label.textAlignment = .center
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
setupViews()
setupGestureRecognizer()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupViews() {
addSubview(imageView)
addSubview(label)
// Layout constraints
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.topAnchor.constraint(equalTo: topAnchor).isActive = true
imageView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
imageView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
imageView.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 0.8).isActive = true
label.translatesAutoresizingMaskIntoConstraints = false
label.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 8).isActive = true
label.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
label.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
label.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
}
private func setupGestureRecognizer() {
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(itemTapped))
addGestureRecognizer(tapGesture)
}
@objc private func itemTapped() {
print(label.text ?? "")
}
func configure(with image: UIImage, text: String) {
imageView.image = image
label.text = text
}
}
class CarouselView: UIView {
private let scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.showsHorizontalScrollIndicator = false
return scrollView
}()
private var itemViews: [CarouselItemView] = []
var items: [(image: UIImage, text: String)] = [] {
didSet {
configureItemViews()
}
}
override init(frame: CGRect) {
super.init(frame: frame)
setupViews()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupViews() {
addSubview(scrollView)
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.topAnchor.constraint(equalTo: topAnchor).isActive = true
scrollView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
}
private func configureItemViews() {
itemViews.forEach { $0.removeFromSuperview() }
itemViews.removeAll()
for (index, item) in items.enumerated() {
let itemView = CarouselItemView()
itemView.configure(with: item.image, text: item.text)
scrollView.addSubview(itemView)
itemView.translatesAutoresizingMaskIntoConstraints = false
if index == 0 {
itemView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
} else {
itemView.leadingAnchor.constraint(equalTo: itemViews[index - 1].trailingAnchor).isActive = true
}
if index == items.count - 1 {
itemView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
}
itemView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
itemView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
itemViews.append(itemView)
}
scrollView.contentSize = CGSize(width: frame.width * CGFloat(items.count), height: frame.height)
}
}
let carouselView = CarouselView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
carouselView.items = [
(UIImage(systemName: "mic")!, "Item 1"),
(UIImage(systemName: "video")!, "Item 2"),
(UIImage(systemName: "volume.3")!, "Item 3")
]
// Add carouselView to your view hierarchy
Sign up here with your email
ConversionConversion EmoticonEmoticon