swift 類似高德地圖和58同城上下滑動view
演示:
程式碼地址: https://github.com/RainManGO/PanView
主要在Xib中使用:xib的view直接繫結panview即可。如圖:
程式碼:
//
// PanView.swift
//
//
// Created by ZY on 2018/5/23.
// Copyright © 2018年 zy. All rights reserved.
//
import UIKit
enum slideStates {
case top
case bottom
}
class PanView: UIView {
var panViewStates: slideStates = .bottom //預設狀態是在底部
var upPointY = 0.0 //最高值
var middleY = 0.0 //滑動view 中間判定值
var bottionY = 0.0 //最低值
var currentY = 0.0 //當前的Y值
let maxtop = 80.0
override func awakeFromNib() {
super.awakeFromNib()
countY()
addPanRecoginer()
addTapRecoginer()
}
}
//計算資料值
extension PanView {
func countY(){
upPointY = maxtop //最高值
middleY = Double(((self.superview?.frame.height)! - CGFloat(maxtop))/2) //滑動view 中間判定值
bottionY = Double(self.frame.minY) //最低值
currentY = bottionY
}
}
//手勢
extension PanView {
func addPanRecoginer(){
let panRecoginer = UIPanGestureRecognizer.init(target: self, action: #selector(panHandle(pan:)))
self.addGestureRecognizer(panRecoginer)
}
func addTapRecoginer(){
let tapRecoginer = UITapGestureRecognizer.init(target: self, action: #selector(tapHandle(tap:)))
self.addGestureRecognizer(tapRecoginer)
}
}
//事件
extension PanView {
@objc func panHandle(pan:UIPanGestureRecognizer){
let translation = pan.translation(in: self.superview)
let transY = Double(translation.y)
if pan.state == .changed {
if Double(self.frame.origin.y) < upPointY{
currentY = upPointY
}else if Double(self.frame.origin.y) > bottionY{
currentY = bottionY
}else{
self.frame.origin.y = CGFloat(currentY + transY)
}
}else if pan.state == .ended {
if (currentY + transY > upPointY) && (currentY + transY < middleY) { //如果當前位置在最上部和中線中間
currentY = upPointY
}else if (currentY + transY < bottionY) && (currentY + transY > middleY){
currentY = bottionY
}else if currentY + transY < upPointY{
currentY = upPointY
}else{
currentY = bottionY
}
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 10, initialSpringVelocity: 5, options: [], animations: {
self.frame.origin.y = CGFloat(self.currentY)
}) { (complete) in
}
currentY = Double(self.frame.origin.y)
}
}
//待擴充套件tap
@objc func tapHandle(tap:UITapGestureRecognizer){
}
}
相關文章
- 高德地圖和google地圖適配地圖Go
- 高德地圖上展示終端資訊地圖
- 高德地圖app怎麼使用北斗地圖? 高德地圖設定北斗地圖的教程地圖APP
- Flutter整合高德定位和地圖功能Flutter地圖
- 自定義View-27 仿58同城載入資料動畫View動畫
- 高德地圖導航和路徑規劃地圖
- 高德地圖之地圖的屬性地圖
- 機器學習在高德地圖軌跡分類的探索和應用機器學習地圖
- 高德地圖開發彙總地圖
- 高德地圖JSAPI學習(一)地圖JSAPI
- 高德地圖之地圖的生命週期地圖
- 高德地圖首席科學家任小楓:視覺智慧在高德地圖的應用地圖視覺
- Android高德地圖貼合圖片完成手繪地圖展示Android地圖
- uniapp 高德地圖 sha 生成方法APP地圖
- 高德地圖的四處進擊地圖
- java接入高德地圖常用WEB APIJava地圖WebAPI
- Android專案匯入高德地圖Android地圖
- 提-關於高德地圖熱力圖-問:地圖
- 高德地圖未來行程規劃在哪裡? 高德地圖預設出行時間的技巧教程地圖行程
- Qt/C++地圖高階繪圖/指定唯一標識新增刪除修改/動態顯示和隱藏/支援天地圖高德地圖百度地圖QTC++地圖繪圖
- 阿里巴巴高德地圖首席科學家任小楓:高精演算法推動高精地圖落地阿里地圖演算法
- 58同城財報圖解:2018年58同城淨利潤4.109億元 同比下降0.8%圖解
- 高德地圖-地理圍欄功能實現地圖
- react頁面喚起高德地圖appReact地圖APP
- react中使用高德地圖的原生APIReact地圖API
- 對接高德地圖API的總結地圖API
- 高德地圖:2022年五一假期出行提示地圖
- 高德地圖靠什麼生存下來?地圖
- Flutter自定義View——仿高德三級聯動DrawerFlutterView
- 58同城財報圖解:2019年Q4 58同城總收入5.957億美元 同比增長15.1%圖解
- vue中使用高德地圖自定義開發Vue地圖
- javaweb使用高德地圖進行網頁定位JavaWeb地圖網頁
- 地圖資料採集,包括百度地圖採集,高德地圖採集,360地圖採集地圖
- 仿百度地圖上拉下滑抽屜盒地圖
- vue 高德地圖 三維切換為二維Vue地圖
- DataV動態GPS資料來源在高德地圖上座標轉換方案地圖
- 微信小程式之:小程式接入高德地圖SDK微信小程式地圖
- [MAUI]整合高德地圖元件至.NET MAUI Blazor專案UI地圖元件Blazor