Swift使用滚动视图重新创建iPhone应用程序切换页面
我正在尝试重新创建iPhone应用程序切换页面——当你滑动时会出现的页面 我通过在滚动视图中添加表示应用程序的视图数组来构建它 不幸的是，我正忙于设置视图之间的间距。我试图使用抛物线函数来设置它，以便视图折叠到左侧。我认为这个等式可能不正确 以下是我的scrollViewDidScroll代码：Swift使用滚动视图重新创建iPhone应用程序切换页面,swift,uiscrollview,Swift,Uiscrollview,我正在尝试重新创建iPhone应用程序切换页面——当你滑动时会出现的页面 我通过在滚动视图中添加表示应用程序的视图数组来构建它 不幸的是，我正忙于设置视图之间的间距。我试图使用抛物线函数来设置它，以便视图折叠到左侧。我认为这个等式可能不正确 以下是我的scrollViewDidScroll代码： func scrollViewDidScroll(_ scrollView: UIScrollView) { items.enumerated().forEach { (index, tabVi
func scrollViewDidScroll(_ scrollView: UIScrollView) {
items.enumerated().forEach { (index, tabView) in
guard let tabSuperView = tabView.superview else {return}
let screenWidth = UIScreen.main.bounds.width
// Return value between 0 and 1 depending on the location of the tab within the visible screen
// 0 Left hand side or offscreen
// 1 Right hand side or offscreen
let distanceMoved = tabSuperView.convert(CGPoint(x: tabView.frame.minX, y: 0), to: view).x
let screenOffsetPercentage: CGFloat = distanceMoved / screenWidth
// Scale
let minValue: CGFloat = 0.6
let maxValue: CGFloat = 1
let scaleAmount = minValue + (maxValue - minValue) * screenOffsetPercentage
let scaleSize = CGAffineTransform(scaleX: scaleAmount, y: scaleAmount)
tabView.transform = scaleSize
// Set a max and min
let percentAcrossScreen = max(min(distanceMoved / screenWidth, 1.0), 0)
// Spacing
if let prevTabView = items.itemAt(index - 1) {
// Rest of tabs
let constant: CGFloat = 100
let xFrame = prevTabView.frame.origin.x + (pow(percentAcrossScreen, 2) * constant)
tabView.frame.origin.x = max(xFrame, 0)
} else {
// First tab
tabView.frame.origin.x = 20
}
}
}
class ViewController: UIViewController {
let switcherView = SwitcherView()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemYellow
switcherView.translatesAutoresizingMaskIntoConstraints = false
switcherView.backgroundColor = .white
view.addSubview(switcherView)
// respect safe area
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
// constrain switcher view to all 4 sides of safe area
switcherView.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
switcherView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
switcherView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
switcherView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),
])
}
}
class CardView: UIView {
var theLabels: [UILabel] = []
var cardID: Int = 0 {
didSet {
theLabels.forEach {
$0.text = "\(cardID)"
}
}
}
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
for i in 1...5 {
let v = UILabel()
v.font = .systemFont(ofSize: 24.0)
v.translatesAutoresizingMaskIntoConstraints = false
addSubview(v)
switch i {
case 1:
v.topAnchor.constraint(equalTo: topAnchor, constant: 10.0).isActive = true
v.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16.0).isActive = true
case 2:
v.topAnchor.constraint(equalTo: topAnchor, constant: 10.0).isActive = true
v.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16.0).isActive = true
case 3:
v.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10.0).isActive = true
v.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16.0).isActive = true
case 4:
v.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10.0).isActive = true
v.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16.0).isActive = true
default:
v.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
v.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
}
theLabels.append(v)
}
layer.cornerRadius = 6
// border
layer.borderWidth = 1.0
layer.borderColor = UIColor.gray.cgColor
// shadow
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: -3, height: 3)
layer.shadowOpacity = 0.25
layer.shadowRadius = 2.0
}
}
class SwitcherView: UIView {
var cards: [CardView] = []
var currentCard: CardView?
var firstLayout: Bool = true
// useful during development...
// if true, highlight the current "control" card in yellow
// if false, leave them all cyan
let showHighlight: Bool = false
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
clipsToBounds = true
// add 20 "cards" to the view
for i in 1...20 {
let v = CardView()
v.backgroundColor = .cyan
v.cardID = i
cards.append(v)
addSubview(v)
v.isHidden = true
}
// add a pan gesture recognizer to the view
let pan = UIPanGestureRecognizer(target: self, action: #selector(self.didPan(_:)))
addGestureRecognizer(pan)
}
override func layoutSubviews() {
super.layoutSubviews()
if firstLayout {
// if it's the first time through, layout the cards
firstLayout = false
if let firstCard = cards.first {
if firstCard.frame.width == 0 {
cards.forEach { thisCard in
//thisCard.alpha = 0.750
thisCard.frame = CGRect(origin: .zero, size: CGSize(width: self.bounds.width, height: self.bounds.height))
thisCard.transform = CGAffineTransform(scaleX: 0.71, y: 0.71)
thisCard.frame.origin.x = 0
if thisCard == cards.last {
thisCard.frame.origin.x = 10
}
thisCard.isHidden = false
}
doCentering(for: cards.last!)
}
}
}
}
@objc func didPan(_ gesture: UIPanGestureRecognizer) -> Void {
let translation = gesture.translation(in: self)
var pt = gesture.location(in: self)
pt.y = self.bounds.midY
for c in cards.reversed() {
if c.frame.contains(pt) {
if let cc = currentCard {
if let idx1 = cards.firstIndex(of: cc),
let idx2 = cards.firstIndex(of: c),
idx2 > idx1 {
if showHighlight {
currentCard?.backgroundColor = .cyan
}
currentCard = c
if showHighlight {
currentCard?.backgroundColor = .yellow
}
}
} else {
currentCard = c
if showHighlight {
currentCard?.backgroundColor = .yellow
}
}
break
}
}
switch gesture.state {
case .changed:
if let controlCard = currentCard {
// update card leading edge
controlCard.frame.origin.x += translation.x
// don't allow drag left past 1.0
controlCard.frame.origin.x = max(controlCard.frame.origin.x, 1.0)
// update the positions for the rest of the cards
updateCards(controlCard)
gesture.setTranslation(.zero, in: self)
}
case .ended:
if showHighlight {
currentCard?.backgroundColor = .cyan
}
guard let controlCard = currentCard else {
return
}
if let idx = cards.firstIndex(of: controlCard) {
// use pan velocity to "throw" the cards
let velocity = gesture.velocity(in: self)
// convert to a reasonable Int value
let offset: Int = Int(floor(velocity.x / 500.0))
// step up or down in array of cards based on velocity
let newIDX = max(min(idx - offset, cards.count - 1), 0)
doCentering(for: cards[newIDX])
}
currentCard = nil
default:
break
}
}
func updateCards(_ controlCard: CardView) -> Void {
guard let idx = cards.firstIndex(of: controlCard) else {
print("controlCard not found in array of cards - can't update")
return
}
var relativeCard: CardView = controlCard
var n = idx
// for each card to the right of the control card
while n < cards.count - 1 {
let nextCard = cards[n + 1]
// get percent distance of leading edge of relative card
// to 33% of the view width
let pct = relativeCard.frame.origin.x / (self.bounds.width * 1.0 / 3.0)
// move next card that percentage of the width of a card
nextCard.frame.origin.x = relativeCard.frame.origin.x + (relativeCard.frame.size.width * pct) // min(pct, 1.0))
relativeCard = nextCard
n += 1
}
// reset relative card and index
relativeCard = controlCard
n = idx
// for each card to the left of the control card
while n > 0 {
let prevCard = cards[n - 1]
// get percent distance of leading edge of relative card
// to half the view width
let pct = relativeCard.frame.origin.x / self.bounds.width
// move prev card that percentage of 33% of the view width
prevCard.frame.origin.x = (self.bounds.width * 1.0 / 3.0) * pct
relativeCard = prevCard
n -= 1
}
self.cards.forEach { c in
let x = c.frame.origin.x
// scale transform each card between 71% and 75%
// based on card's leading edge distance to one-half the view width
let pct = x / (self.bounds.width * 0.5)
let sc = 0.71 + (0.04 * min(pct, 1.0))
c.transform = CGAffineTransform(scaleX: sc, y: sc)
// set translucent for far left cards
if cards.count > 1 {
c.alpha = min(1.0, x / 10.0)
}
}
}
func doCentering(for cCard: CardView) -> Void {
guard let idx = cards.firstIndex(of: cCard) else {
return
}
var controlCard = cCard
// if the leading edge is greater than 1/2 the view width,
// and it's not the Bottom card,
// set cur card to the previous card
if idx > 0 && controlCard.frame.origin.x > self.bounds.width * 0.5 {
controlCard = cards[idx - 1]
}
// center of control card will be offset to the right of center
var newX = self.bounds.width * 0.6
if controlCard == cards.last {
// if it's the Top card, center it
newX = self.bounds.width * 0.5
}
if controlCard == cards.first {
// if it's the Bottom card, center it + just a little to the right
newX = self.bounds.width * 0.51
}
UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0.1, options: [.allowUserInteraction, .curveEaseOut], animations: {
controlCard.center.x = newX
self.updateCards(controlCard)
}, completion: nil)
}
}
class SwitcherView:UIView{
var卡：[CardView]=[]
var currentCard:CardView？
var firstLayout:Bool=true
//在开发过程中有用。。。
//如果为true，则以黄色突出显示当前的“控制”卡
//如果为false，请将它们全部保留为青色
让showHighlight:Bool=false
重写初始化（帧：CGRect）{
super.init（frame:frame）
commonInit（）
}
必需初始化？（编码器：NSCoder）{
super.init（编码器：编码器）
commonInit（）
}
func commonInit（）->Void{
clipsToBounds=true
//将20张“卡片”添加到视图中
因为我在1…20{
设v=CardView（）
v、 背景色=.cyan
v、 卡迪德=我
卡片。附加（五）
添加子视图（v）
v、 isHidden=true
}
//将平移手势识别器添加到视图中
让pan=UIPANGestureRecognitor（目标：self，操作：#选择器（self.didPan（：））
AddGestureRecognitor（pan）
}
覆盖func布局子视图（）{
super.layoutSubviews（）
如果第一个布局{
//如果是第一次，就把卡片排好
firstLayout=false
如果让firstCard=cards.first{
如果firstCard.frame.width==0{
cards.forEach{此卡位于
//thisCard.alpha=0.750
thisCard.frame=CGRect（原点：.0，大小：CGSize（宽度：self.bounds.width，高度：self.bounds.height））
thisCard.transform=CGAffineTransform（scaleX:0.71，y:0.71）
thisCard.frame.origin.x=0
如果thisCard==cards.last{
此卡.frame.origin.x=10
}
thisCard.ishiden=false
}
文档输入（用于：卡片。最后！）
}
}
}
}
@objc func didPan（uu手势：UIPangestureRecognitor）->Void{
让翻译=手势。翻译（in:self）
var pt=手势位置（in:self）
pt.y=self.bounds.midY
对于卡片中的c。反向（）{
如果c.frame.包含（pt）{
如果让cc=currentCard{
如果让idx1=cards.firstIndex（of:cc），
设idx2=cards.firstIndex（of:c），
idx2>idx1{
如果显示突出显示{
currentCard？.backgroundColor=.cyan
}
电流卡=c
如果显示突出显示{
currentCard？.backgroundColor=.yellow
}
}
}否则{
电流卡=c
如果显示突出显示{
currentCard？.backgroundColor=.yellow
}
}
打破
}
}
开关状态{
案例。更改：
如果让控制卡=当前卡{
//更新卡前缘
controlCard.frame.origin.x+=translation.x
//不允许向左拖动超过1.0
controlCard.frame.origin.x=max（controlCard.frame.origin.x，1.0）
//更新其余卡的位置
更新卡（控制卡）
手势.setTranslation（.0，in:self）
}
案件结束：
如果显示突出显示{
currentCard？.backgroundColor=.cyan
}
guard let controlCard=currentCard else{
返回
}
如果让idx=cards.firstIndex（of:controlCard）{
//使用平移速度“抛”牌
让速度=手势。速度（in:self）
//转换为合理的Int值
let offset:Int=Int（地板（速度x/500.0））
//基于速度的卡片阵列中的上下步