ios 可拖拽的View

作者: 小生不才_HR | 来源:发表于2023-08-02 16:59 被阅读0次

3.2 iOS view的拖拽
可全局拖拽、点击的View
iOS collectionView拖拽排序
可拖拽的view 与 viewpager 一起使用时的尴尬
微信小程序拖动组件之movable-view
IOS 可拖拽按钮
可拖拽 Bottom Sheet View Controller
Android OnDragListener
Android View的移动、缩放、旋转组合效果实战
Android自定义View实例教程~自定义可拖拽评价进度条「完

自己做的一个方向控制HRTouchMoveView

先看效果图

RPReplay_Final169104 -small-portrait.gif

主要功能

1.可拖拽View的实现，防越界处理
2.横屏显示，竖屏隐藏
3.方向按键点击，阴影效果实现
4.类似Assistive Touch 悬浮效果，可隐藏方向按键
5.苹果原生代码实现，不依赖第三方库，不使用扩展方法，复制代码，直接使用。

HRTouchMoveView.h

//
//  HRTouchMoveView.h
//  iViewsDemo
//
//  Created by Mac on 2023/8/3.
//  可拖拽移动的方向控制View

#import <UIKit/UIKit.h>
typedef NS_ENUM (NSInteger,MoveActionType) {
    MoveStop      = 0,
    MoveUp        = 1 << 0,
    MoveDown      = 1 << 1,
    MoveLeft      = 1 << 2,
    MoveRight     = 1 << 3
};
#define kScreenWidth  [UIScreen mainScreen].bounds.size.width
#define kScreenHeight  [UIScreen mainScreen].bounds.size.height
NS_ASSUME_NONNULL_BEGIN

@interface HRTouchMoveView : UIView
@property (nonatomic, copy) void(^TouchUpInsideBlock)(void);
@property (nonatomic, copy) void(^TouchDownBlock)(MoveActionType);
@end

NS_ASSUME_NONNULL_END

HRTouchMoveView.m

//
//  HRTouchMoveView.m
//  iViewsDemo
//
//  Created by Mac on 2023/8/3.
//

#import "HRTouchMoveView.h"
@interface HRTouchMoveView ()
@property (nonatomic, strong) UIView *centerView; // 中心拖拽控制移动
@property(nonatomic,strong) CAShapeLayer* toplayer;
@property(nonatomic,strong) CAShapeLayer* leftlayer;
@property(nonatomic,strong) CAShapeLayer* bottomlayer;
@property(nonatomic,strong) CAShapeLayer* rightlayer;
@property(nonatomic,strong,nullable) CAShapeLayer* selectedlayer; // 选中
@property(nonatomic,assign) CGPoint   beginPoint;
@property(nonatomic,assign) BOOL   hiddenArrow;// 隐藏马达
@property(nonatomic,strong) UIButton *leftBtn;
@property(nonatomic,strong) UIButton *rightBtn;
@property(nonatomic,strong) UIButton *upBtn;
@property(nonatomic,strong) UIButton *downBtn;
@property(nonatomic,assign) UIDeviceOrientation currentOrientation; // 当前屏幕方向
@end
@implementation HRTouchMoveView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if(self) {
        // 初始化
        self.backgroundColor = [[UIColor blackColor]colorWithAlphaComponent:0.33];
        self.layer.cornerRadius = kScreenWidth / 6;
        self.hidden = true;
        self.hiddenArrow = false;
//        NSLog(@"%ld,%ld,%ld,%ld,%ld",MoveStop,MoveUp,MoveDown,MoveLeft,MoveRight);
        // 中心View
        self.centerView = [[UIView alloc]initWithFrame:CGRectMake(frame.size.width /3, frame.size.width /3,frame.size.width /3, frame.size.width /3)];
        self.centerView.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:0.5];
        self.centerView.layer.cornerRadius = frame.size.width /6;
        [self.centerView setUserInteractionEnabled:true];
        [self addSubview:self.centerView];
        // 方向键
        self.leftBtn = [self patternButton:MoveLeft imageName:@"move_left"];
        self.rightBtn = [self patternButton:MoveRight imageName:@"move_right"];
        self.upBtn = [self patternButton:MoveUp imageName:@"move_up"];
        self.downBtn = [self patternButton:MoveDown imageName:@"move_down"];
        [self addSubview:_leftBtn];
        [self addSubview:_rightBtn];
        [self addSubview:_upBtn];
        [self addSubview:_downBtn];
        [self addLayer:MoveUp];
        [self addLayer:MoveDown];
        [self addLayer:MoveLeft];
        [self addLayer:MoveRight];
        // 中心点击隐藏
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handelHidden)];
        [self.centerView addGestureRecognizer:tap];
        //添加 设备旋转 通知
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(orientChange:)  name:UIDeviceOrientationDidChangeNotification object:nil];
       
    }
    return self;
}
#pragma mark - 隐藏方向键
- (void)handelHidden {
    self.hiddenArrow = !self.hiddenArrow;
    if (self.hiddenArrow) {
        [UIView animateWithDuration:0.12 animations:^{
            self.leftBtn.hidden = true;
            self.rightBtn.hidden = true;
            self.upBtn.hidden = true;
            self.downBtn.hidden = true;
            self.backgroundColor = [UIColor clearColor];
        }];
    }else{
        [UIView animateWithDuration:0.12 animations:^{
            self.leftBtn.hidden = false;
            self.rightBtn.hidden = false;
            self.upBtn.hidden = false;
            self.downBtn.hidden = false;
            self.backgroundColor = [[UIColor blackColor]colorWithAlphaComponent:0.33];
        }];
        
    }
}
// 添加阴影效果
- (void)addLayer:(MoveActionType)type {
    CGFloat itemWidth = self.frame.size.width/2;
    CGFloat _radius = self.frame.size.width/3;
    CGPoint viewCenter = CGPointMake(itemWidth, itemWidth); // 画弧的中心点，相对于view
    UIBezierPath *path;
    CAShapeLayer *pathLayer = [CAShapeLayer layer];
    pathLayer.lineWidth = _radius;
    pathLayer.strokeColor = [[UIColor lightGrayColor]colorWithAlphaComponent:0.5].CGColor;
    pathLayer.fillColor =  nil; // 默认为blackColor
    switch (type) {
        case MoveUp:
            path = [UIBezierPath bezierPathWithArcCenter:viewCenter radius:_radius startAngle:M_PI*5/4 endAngle:M_PI*7/4 clockwise:YES];
            pathLayer.path = path.CGPath;
            self.toplayer = pathLayer;
            break;
        case MoveDown:
            path = [UIBezierPath bezierPathWithArcCenter:viewCenter radius:_radius startAngle:M_PI/4 endAngle:M_PI*3/4 clockwise:YES];
            pathLayer.path = path.CGPath;
            self.bottomlayer = pathLayer;
            break;
        case MoveLeft:
            path = [UIBezierPath bezierPathWithArcCenter:viewCenter radius:_radius startAngle:M_PI*3/4 endAngle:M_PI*5/4 clockwise:YES];
            pathLayer.path = path.CGPath;
            self.leftlayer = pathLayer;
            break;
        case MoveRight:
            path = [UIBezierPath bezierPathWithArcCenter:viewCenter radius:_radius startAngle:-M_PI/4 endAngle:M_PI/4 clockwise:YES];
            pathLayer.path = path.CGPath;
            self.rightlayer = pathLayer;
            break;
        default:
            break;
    }
    
}
#pragma mark - 方向键按下的阴影效果实现
- (void)setSelectedlayer:(CAShapeLayer *)selectedlayer {
    if(_selectedlayer){
        [_selectedlayer removeFromSuperlayer];
    }
    if (selectedlayer) {
        [self.layer addSublayer:selectedlayer];
    }
    _selectedlayer = selectedlayer;
}
#pragma mark - 方向键
- (UIButton *)patternButton:(MoveActionType)type imageName:(NSString *)imageName {
    CGFloat _width = self.frame.size.width;
    CGFloat itemWidth = _width/3 ;
    UIButton *b = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, itemWidth, itemWidth)];
    switch (type) {
        case MoveUp:
            b.center = CGPointMake(self.center.x, itemWidth/2);
            [b setTitle:@"上" forState:UIControlStateNormal];
            break;
        case MoveDown:
            b.center = CGPointMake(self.center.x, _width - itemWidth/2);
            [b setTitle:@"下" forState:UIControlStateNormal];
            break;
        case MoveLeft:
            b.center = CGPointMake(itemWidth/2, self.center.y);
            [b setTitle:@"左" forState:UIControlStateNormal];
            break;
        case MoveRight:
            b.center = CGPointMake(_width - itemWidth/2, self.center.y);
            [b setTitle:@"右" forState:UIControlStateNormal];
            break;
        default:
            break;
    }
    b.tag = type;
    [b addTarget:self action:@selector(upInsideAction) forControlEvents:UIControlEventTouchUpInside];
    [b addTarget:self action:@selector(upInsideAction) forControlEvents:UIControlEventTouchUpOutside];
    [b addTarget:self action:@selector(touchDown:) forControlEvents:UIControlEventTouchDown];
    [b setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
    return b;
}
#pragma mark - 方向键释放
- (void)upInsideAction {
    if (_TouchUpInsideBlock) {
        self.TouchUpInsideBlock();
    }
    self.selectedlayer = nil;
}
#pragma mark - 方向键按下
- (void)touchDown:(UIButton *)btn {
    if (_TouchDownBlock) {
        self.TouchDownBlock(btn.tag);
    }
    if(btn.tag == 1){
//        NSLog(@"发送up指令");
        self.selectedlayer = self.toplayer;
    }else if(btn.tag == 2){
//        NSLog(@"发送down指令");
        self.selectedlayer = self.bottomlayer;
    }else if(btn.tag == 4){
//        NSLog(@"发送left指令");
        self.selectedlayer = self.leftlayer;
    }else if(btn.tag == 8){
//        NSLog(@"发送right指令");
        self.selectedlayer = self.rightlayer;
    }else{
        self.selectedlayer = nil;
    }
}
#pragma mark - 中心View拖拽控制移动
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [super touchesBegan:touches withEvent:event];
       UITouch *touch  = [touches anyObject];
       self.beginPoint = [touch locationInView:self];
}
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [super touchesMoved:touches withEvent:event];
}
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [super touchesEnded:touches withEvent:event];
    UITouch *touch = [touches anyObject];
//    NSLog(@"touch x :%f tpuch Y :%f",[touch locationInView:self].x,[touch locationInView:self].y);
    CGPoint currentPoint = [touch locationInView:self];
    CGFloat x = currentPoint.x - _beginPoint.x;
    CGFloat y = currentPoint.y - _beginPoint.y;
    CGFloat pointX = self.center.x + x;
    CGFloat pointY = self.center.y + y;
    // 添加了 防止视图超出屏幕范围的限制
    CGFloat btnW = self.frame.size.width/2;
    if (pointX > kScreenWidth - btnW) {
        pointX = kScreenWidth - btnW;
    }else if(pointX < btnW){
        pointX = btnW;
    }
    if (pointY > kScreenHeight - btnW){
        pointY = kScreenHeight - btnW;
    }else if(pointY < btnW){
        pointY = btnW;
    }
    self.center = CGPointMake(pointX,pointY);
}
#pragma mark - 屏幕旋转的通知回调
- (void)orientChange:(NSNotification *)noti {
    UIDeviceOrientation  orient = [UIDevice currentDevice].orientation;
    if (_currentOrientation != orient) {
        self.currentOrientation = orient;
        switch (orient) {
            case UIDeviceOrientationPortrait:
                //            NSLog(@"竖直屏幕");
                self.hidden = true;
                break;
            case UIDeviceOrientationLandscapeLeft:
                //            NSLog(@"手机左转");
                self.hidden = false;
                break;
            case UIDeviceOrientationPortraitUpsideDown:
                //            NSLog(@"手机竖直");
                break;
            case UIDeviceOrientationLandscapeRight:
                //            NSLog(@"手机右转");
                self.hidden = false;
                break;
            case UIDeviceOrientationUnknown:
                //            NSLog(@"未知");
                break;
            case UIDeviceOrientationFaceUp:
                //            NSLog(@"手机屏幕朝上");
                break;
            case UIDeviceOrientationFaceDown:
                //            NSLog(@"手机屏幕朝下");
                break;
            default:
                break;
        }
        
    }
}
- (void)dealloc {
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}
@end

3.2 iOS view的拖拽
1.2view的拖拽重点掌握UIView的触摸事件的监听程序效果: >重点掌握UIView的下列方法 >重点掌...
可全局拖拽、点击的View
先上图这个效果和IOS的Assistive Touch效果类似，可以实现全局拖拽，设置点击事件，并且点击和拖拽不...
iOS collectionView拖拽排序
iOS collectionView拖拽排序 iOS collectionView拖拽排序
可拖拽的view 与 viewpager 一起使用时的尴尬
（1）：可拖拽的view 的实现：（实现一） package com.mishou.health.widget;i...
微信小程序拖动组件之movable-view
movable-view 是一个可移动的视图容器，在页面中可以拖拽滑动。（movable-view必须在 mova...
IOS 可拖拽按钮
有想过利用UIControlEventTouchDragInside来做的，不过因为按钮需要同时响应UIContr...
可拖拽 Bottom Sheet View Controller
当我们想弹出一个预览视图，bottom sheet modal view controller 非常实用。在 iO...
Android OnDragListener
1、两个概念 1、目标View 不是被拖拽的View，是要拖拽去哪个区域，这个区域就目标View，它要设置OnDr...
Android View的移动、缩放、旋转组合效果实战
首先确定功能效果 1.一个View由关闭按钮、文字、拖拽按钮组成2.拖拽文字部分移动这个View3.在拖拽按钮处拖...
Android自定义View实例教程~自定义可拖拽评价进度条「完
Android自定义评View实例教程~自定义可拖拽进度条「完全自定义」实际效果，我们可以通过拖拽来设置进度，也...