zoukankan      html  css  js  c++  java
  • iOS开发之实现自定义浮动操作框效果

     今天有个需求是如上图实现类似微信的自定义浮动操作框效果

    我自己就写了个demo,大家感兴趣的可以试试,下面是代码

    VC代码如下

    #import "TestCustomMenuItemVC.h"
    #import "CustomMenuItemView.h"
    
    @interface TestCustomMenuItemVC ()
    
    /** 移动视图,给这个视图来添加浮动窗*/
    @property (strong, nonatomic) UIView *moveView;
    
    @end
    
    @implementation TestCustomMenuItemVC
    
    - (UIView *)moveView
    {
        if (_moveView == nil) {
            _moveView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
            _moveView.backgroundColor = [UIColor greenColor];
            [self.view addSubview:_moveView];
        }
        return _moveView;
    }
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        //解析出随机点击页面的坐标
        UITouch *touch = touches.anyObject;
        CGPoint point = [touch locationInView:self.view];
        NSLog(@"point x-%@ y-%@", @(point.x), @(point.y));
        //随机改变移动视图宽高
        NSInteger width = 50 + arc4random() % 200;
        NSInteger height = 20 + arc4random() %80;
        NSInteger ox = point.x - width/2;
        NSInteger oy = point.y - height/2;
        //对越界判断处理
        if (ox < 10) {
            ox = 10;
        } else if (ox > self.view.bounds.size.width - 10 - width) {
            ox = self.view.bounds.size.width - 10 - width;
        }
        if (oy < 30) {
            oy = 30;
        }
        self.moveView.frame = CGRectMake(ox, oy, width, height);
        //添加浮动窗
        CustomMenuItemView *view = [[CustomMenuItemView alloc] init];
        [view showInView:self.view frame:self.moveView.frame];
    }
    
    @end
    

     自定义浮动框视图类如下 CustomMenuItemView.h

    #import <UIKit/UIKit.h>
    
    @interface CustomMenuItemView : UIView
    
    - (void)showInView:(UIView *)view frame:(CGRect)rect;
    
    @end
    

     CustomMenuItemView.m

    #import "CustomMenuItemView.h"
    
    @implementation CustomMenuItemView
    
    - (void)showInView:(UIView *)view frame:(CGRect)rect
    {
        self.frame = view.bounds;
        [view addSubview:self];
        NSInteger jiantouSize = 10;
        NSInteger width = 250;
        NSInteger height = 120;
        UIView *bgview = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, height)];
        bgview.backgroundColor = [UIColor darkGrayColor];
        bgview.layer.masksToBounds = YES;
        bgview.layer.cornerRadius = 6;
        [self addSubview:bgview];
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, jiantouSize, jiantouSize)];
        imageView.image = [UIImage imageNamed:@"down"];
        [self addSubview:imageView];
        
        NSInteger ox = rect.origin.x + rect.size.width/2 - width/2;
        NSInteger oy = rect.origin.y - height/2 - jiantouSize - height/2;
        NSInteger jiantouCenterY = rect.origin.y - jiantouSize/2;
        
        if (oy <= 50) {
            imageView.transform = CGAffineTransformRotate(imageView.transform, M_PI);
            oy = rect.origin.y + rect.size.height + jiantouSize;
            jiantouCenterY = rect.origin.y + rect.size.height + jiantouSize/2;
        }
        
        if (oy > view.bounds.size.height - jiantouSize - height - 10) {
            oy = view.bounds.size.height - height - 10;
            jiantouCenterY = view.bounds.size.height - jiantouSize/2 - height - 10;
        }
        
        if (ox <= 10) {
            ox = 10;
        } else if (ox >= view.bounds.size.width - 10 - width) {
            ox = view.bounds.size.width - 10 - width;
        }
        bgview.frame = CGRectMake(ox, oy, width, height);
        imageView.center = CGPointMake(rect.origin.x + rect.size.width/2, jiantouCenterY);
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        self.hidden = YES;
        self.removeFromSuperview;
    }
    
    @end
    
  • 相关阅读:
    PAT 1088. Rational Arithmetic
    PAT 1087. All Roads Lead to Rome
    PAT 1086. Tree Traversals Again
    PAT 1085. Perfect Sequence
    PAT 1084. Broken Keyboard
    PAT 1083. List Grades
    PAT 1082. Read Number in Chinese
    求最大公因数
    [转载]Latex文件转成pdf后的字体嵌入问题的解决
    [转载]Matlab有用的小工具小技巧
  • 原文地址:https://www.cnblogs.com/hecanlin/p/14927269.html
Copyright © 2011-2022 走看看