服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - 基于IOS实现带箭头的view

基于IOS实现带箭头的view

2021-01-24 15:10iOS开发网 IOS

这篇文章封装了一个比较常用的控件, 带箭头的View, iOS在很多场景下可以使用到带箭头的View,下面一起来学习学习。

我使用DrawRect进行的View的拉伸(是这样描述的吧??), 效果图也实现了类似于微信的View效果, 你可以看一看.

基于IOS实现带箭头的view

创建继承于UIView的视图 .h文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// backGoundView
@property (nonatomic, strong) UIView * _Nonnull backGoundView;
// titles
@property (nonatomic, strong) NSArray * _Nonnull dataArray;
// images
@property (nonatomic, strong) NSArray * _Nonnull images;
// height
@property (nonatomic, assign) CGFloat row_height;
// font
@property (nonatomic, assign) CGFloat fontSize;
// textColor
@property (nonatomic, assign) UIColor * _Nonnull titleTextColor;
// delegate
@property (nonatomic, assign) id <selectIndexPathDelegate> _Nonnull delegate;
// 初始化方法
- (instancetype _Nonnull)initWithOrigin:(CGPoint) origin
Width:(CGFloat) width
Height:(CGFloat) height
Type:(XTDirectionType)type
Color:( UIColor * _Nonnull ) color;
- (void)popView;
- (void)dismiss;

##.m 实现部分

定义用到的宏

?
1
2
3
4
#define ScreenWidth [UIScreen mainScreen].bounds.size.width
#define ScreenHeight [UIScreen mainScreen].bounds.size.height
#define Length 5
#define Length2 15
?
1
2
3
4
5
@property (nonatomic, assign) CGPoint origin;     // 箭头位置
@property (nonatomic, assign) CGFloat height;     // 视图的高度
@property (nonatomic, assign) CGFloat width;      // 视图的宽度
@property (nonatomic, assign) XTDirectionType type;    // 箭头位置类型
@property (nonatomic, strong) UITableView *tableView;   // 填充的tableview

自定义初始化方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- (instancetype)initWithOrigin:(CGPoint)origin Width:(CGFloat)width Height:(CGFloat)height Type:(XTDirectionType)type Color:(UIColor *)color
{
 
self = [super initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
if (self) {
self.backgroundColor = [UIColor clearColor];
self.origin = origin;
self.width = width;
self.height = height;
self.type = type;
self.backGoundView = [[UIView alloc] initWithFrame:CGRectMake(origin.x, origin.y, width, height)];
self.backGoundView.backgroundColor = color;
[self addSubview:self.backGoundView];
[self.backGoundView addSubview:self.tableView];
}
return self;
}

drawRect

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
#pragma mark - drawRect
- (void)drawRect:(CGRect)rect {
// Drawing code
 
CGContextRef context = UIGraphicsGetCurrentContext();
 
switch (self.type) {
case XTTypeOfUpLeft:
case XTTypeOfUpCenter:
case XTTypeOfUpRight:{
{
CGFloat startX = self.origin.x;
CGFloat startY = self.origin.y;
CGContextMoveToPoint(context, startX, startY);
CGContextAddLineToPoint(context, startX + Length, startY + Length);
CGContextAddLineToPoint(context, startX - Length, startY + Length);
}
break;
}
case XTTypeOfDownLeft:
case XTTypeOfDownCenter:
case XTTypeOfDownRight: {
{
CGFloat startX = self.origin.x;
CGFloat startY = self.origin.y;
CGContextMoveToPoint(context, startX, startY);
CGContextAddLineToPoint(context, startX - Length, startY - Length);
CGContextAddLineToPoint(context, startX + Length, startY - Length);
}
break;
}
case XTTypeOfLeftUp:
case XTTypeOfLeftCenter:
case XTTypeOfLeftDown: {
{
CGFloat startX = self.origin.x;
CGFloat startY = self.origin.y;
CGContextMoveToPoint(context, startX, startY);
CGContextAddLineToPoint(context, startX + Length, startY - Length);
CGContextAddLineToPoint(context, startX + Length, startY + Length);
}
break;
}
case XTTypeOfRightUp:
case XTTypeOfRightCenter:
case XTTypeOfRightDown: {
{
CGFloat startX = self.origin.x;
CGFloat startY = self.origin.y;
CGContextMoveToPoint(context, startX, startY);
CGContextAddLineToPoint(context, startX - Length, startY - Length);
CGContextAddLineToPoint(context, startX - Length, startY + Length);
}
break;
}
}
CGContextClosePath(context);
[self.backGoundView.backgroundColor setFill];
[self.backgroundColor setStroke];
CGContextDrawPath(context, kCGPathFillStroke);
}

弹出视图

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
#pragma mark - popView
- (void)popView
{
// 同步显示 子控件(views)和(self)
NSArray *results = [self.backGoundView subviews];
for (UIView *view in results) {
[view setHidden:YES];
}
UIWindow *windowView = [UIApplication sharedApplication].keyWindow;
[windowView addSubview:self];
switch (self.type) {
case XTTypeOfUpLeft: {
{
self.backGoundView.frame = CGRectMake(self.origin.x, self.origin.y + Length, 0, 0);
CGFloat origin_x = self.origin.x - Length2;
CGFloat origin_y = self.origin.y + Length;
CGFloat size_width = self.width;
CGFloat size_height = self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
case XTTypeOfUpCenter: {
{
self.backGoundView.frame = CGRectMake(self.origin.x, self.origin.y + Length, 0, 0);
CGFloat origin_x = self.origin.x - self.width / 2;
CGFloat origin_y = self.origin.y + Length;
CGFloat size_width = self.width;
CGFloat size_height = self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
case XTTypeOfUpRight: {
{
self.backGoundView.frame = CGRectMake(self.origin.x, self.origin.y + Length, 0, 0);
CGFloat origin_x = self.origin.x + Length2;
CGFloat origin_y = self.origin.y + Length;
CGFloat size_width = -self.width;
CGFloat size_height = self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
case XTTypeOfDownLeft: {
{
self.backGoundView.frame = CGRectMake(self.origin.x, self.origin.y - Length, 0, 0);
CGFloat origin_x = self.origin.x - Length2;
CGFloat origin_y = self.origin.y - Length;
CGFloat size_width = self.width;
CGFloat size_height = -self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
case XTTypeOfDownCenter: {
{
self.backGoundView.frame = CGRectMake(self.origin.x, self.origin.y - Length, 0, 0);
CGFloat origin_x = self.origin.x - self.width / 2;
CGFloat origin_y = self.origin.y - Length;
CGFloat size_width = self.width;
CGFloat size_height = -self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
case XTTypeOfDownRight: {
{
self.backGoundView.frame = CGRectMake(self.origin.x, self.origin.y - Length, 0, 0);
CGFloat origin_x = self.origin.x-self.width + Length2;
CGFloat origin_y = self.origin.y - Length;
CGFloat size_width = self.width;
CGFloat size_height = -self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
 
case XTTypeOfLeftUp: {
{
self.backGoundView.frame = CGRectMake(self.origin.x + Length, self.origin.y, 0, 0);
CGFloat origin_x = self.origin.x + Length;
CGFloat origin_y = self.origin.y - Length2;
CGFloat size_width = self.width;
CGFloat size_height = self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
case XTTypeOfLeftCenter: {
{
self.backGoundView.frame = CGRectMake(self.origin.x + Length, self.origin.y, 0, 0);
CGFloat origin_x = self.origin.x + Length;
CGFloat origin_y = self.origin.y - self.height / 2;
CGFloat size_width = self.width;
CGFloat size_height = self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
case XTTypeOfLeftDown: {
{
self.backGoundView.frame = CGRectMake(self.origin.x + Length, self.origin.y, 0, 0);
CGFloat origin_x = self.origin.x + Length;
CGFloat origin_y = self.origin.y - self.height + Length2;
CGFloat size_width = self.width;
CGFloat size_height = self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
case XTTypeOfRightUp: {
{
self.backGoundView.frame = CGRectMake(self.origin.x - Length, self.origin.y, 0, 0);
CGFloat origin_x = self.origin.x - Length;
CGFloat origin_y = self.origin.y - Length2;
CGFloat size_width = -self.width;
CGFloat size_height = self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
case XTTypeOfRightCenter: {
{
self.backGoundView.frame = CGRectMake(self.origin.x - Length, self.origin.y, 0, 0);
CGFloat origin_x = self.origin.x - Length;
CGFloat origin_y = self.origin.y - self.height / 2;
CGFloat size_width = -self.width;
CGFloat size_height = self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
case XTTypeOfRightDown: {
{
self.backGoundView.frame = CGRectMake(self.origin.x - Length, self.origin.y, 0, 0);
CGFloat origin_x = self.origin.x - Length;
CGFloat origin_y = self.origin.y - self.height + Length2;
CGFloat size_width = -self.width;
CGFloat size_height = self.height;
[self startAnimateView_x:origin_x _y:origin_y origin_width:size_width origin_height:size_height];
}
break;
}
}
}

#pragma mark -

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (void)startAnimateView_x:(CGFloat) x
_y:(CGFloat) y
origin_width:(CGFloat) width
origin_height:(CGFloat) height
{
[UIView animateWithDuration:0.25 animations:^{
self.backGoundView.frame = CGRectMake(x, y, width, height);
}completion:^(BOOL finished) {
NSArray *results = [self.backGoundView subviews];
for (UIView *view in results) {
[view setHidden:NO];
}
}];
}

点击空白处回收

?
1
2
3
4
5
6
7
#pragma mark -
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
if (![[touches anyObject].view isEqual:self.backGoundView]) {
[self dismiss];
}
}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#pragma mark -
- (void)dismiss
{
/**
* 删除 在backGroundView 上的子控件
*/
NSArray *results = [self.backGoundView subviews];
for (UIView *view in results) {
[view removeFromSuperview];
}
[UIView animateWithDuration:0.25 animations:^{
//
self.backGoundView.frame = CGRectMake(self.origin.x, self.origin.y, 0, 0);
} completion:^(BOOL finished) {
//
[self removeFromSuperview];
}];
}

内部的tableview

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
#pragma mark -
- (UITableView *)tableView
{
if (!_tableView) {
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.backGoundView.frame.size.width - 5, self.backGoundView.frame.size.height) style:UITableViewStylePlain];
_tableView.dataSource = self;
_tableView.backgroundColor = [UIColor clearColor];
_tableView.delegate = self;
}
return _tableView;
}
#pragma mark -
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.dataArray.count;
}
#pragma mark -
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (self.row_height == 0) {
return 44;
}else{
return self.row_height;
}
}
#pragma mark -
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
 
static NSString *cellIdentifier = @"cellIdentifier2";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier];
}
cell.backgroundColor = [UIColor clearColor];
cell.imageView.image = [UIImage imageNamed:self.images[indexPath.row]];
cell.textLabel.text = self.dataArray[indexPath.row];
cell.textLabel.font = [UIFont systemFontOfSize:self.fontSize];
cell.textLabel.textColor = self.titleTextColor;
return cell;
}
// 想要实现点击进行其他操作, 这里用到了协议
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
if (self.delegate && [self.delegate respondsToSelector:@selector(selectIndexPathRow:)]) {
[self.delegate selectIndexPathRow:indexPath.row];
}
}

##在.h文件还要声明一份协议

?
1
2
3
@protocol selectIndexPathDelegate <NSObject>
- (void)selectIndexPathRow:(NSInteger )index;
@end

使用

?
1
@interface ViewController ()<selectIndexPathDelegate>

##你可以在btn的点击方法里这样写

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 支持多种类型
/**
XTTypeOfUpLeft,  // 上左
XTTypeOfUpCenter, // 上中
XTTypeOfUpRight, // 上右
 
XTTypeOfDownLeft, // 下左
XTTypeOfDownCenter, // 下中
XTTypeOfDownRight, // 下右
 
XTTypeOfLeftUp,  // 左上
XTTypeOfLeftCenter, // 左中
XTTypeOfLeftDown, // 左下
 
XTTypeOfRightUp, // 右上
XTTypeOfRightCenter,// 右中
XTTypeOfRightDown, // 右下
*/
 
CGPoint point = CGPointMake(_customBtn.center.x,_customBtn.frame.origin.y + 64);
XTPopView *view1 = [[XTPopView alloc] initWithOrigin:point Width:130 Height:40 * 4 Type:XTTypeOfUpRight Color:[UIColor colorWithRed:0.2737 green:0.2737 blue:0.2737 alpha:1.0]];
view1.dataArray = @[@"发起群聊",@"添加朋友", @"扫一扫", @"收付款"];
view1.images = @[@"发起群聊",@"添加朋友", @"扫一扫", @"付款"];
view1.fontSize = 13;
view1.row_height = 40;
view1.titleTextColor = [UIColor whiteColor];
view1.delegate = self;
[view1 popView];

##想要使用点击方法 只要实现协议的方法就可以了

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
- (void)selectIndexPathRow:(NSInteger)index
{
switch (index) {
case 0:
{
NSLog(@"Click 0 ......");
}
break;
case 1:
{
NSLog(@"Clikc 1 ......");
}
break;
case 2:
{
NSLog(@"Clikc 2 ......");
}
break;
case 3:
{
NSLog(@"Clikc 3 ......");
}
break;
default:
break;
}
}

总结

以上就是基于IOS实现带箭头的view的全部内容,希望对大家开发IOS能有所帮助。

延伸 · 阅读

精彩推荐
  • IOSiOS开发技巧之状态栏字体颜色的设置方法

    iOS开发技巧之状态栏字体颜色的设置方法

    有时候我们需要根据不同的背景修改状态栏字体的颜色,下面这篇文章主要给大家介绍了关于iOS开发技巧之状态栏字体颜色的设置方法,文中通过示例代码...

    梦想家-mxj8922021-05-10
  • IOSiOS中UILabel实现长按复制功能实例代码

    iOS中UILabel实现长按复制功能实例代码

    在iOS开发过程中,有时候会用到UILabel展示的内容,那么就设计到点击UILabel复制它上面展示的内容的功能,也就是Label长按复制功能,下面这篇文章主要给大...

    devilx12792021-04-02
  • IOSiOS实现控制屏幕常亮不变暗的方法示例

    iOS实现控制屏幕常亮不变暗的方法示例

    最近在工作中遇到了要将iOS屏幕保持常亮的需求,所以下面这篇文章主要给大家介绍了关于利用iOS如何实现控制屏幕常亮不变暗的方法,文中给出了详细的...

    随风13332021-04-02
  • IOSiOS开发之视图切换

    iOS开发之视图切换

    在iOS开发中视图的切换是很频繁的,独立的视图应用在实际开发过程中并不常见,除非你的应用足够简单。在iOS开发中常用的视图切换有三种,今天我们将...

    执着丶执念5282021-01-16
  • IOSiOS中滑动控制屏幕亮度和系统音量(附加AVAudioPlayer基本用法和Masonry简单使用)

    iOS中滑动控制屏幕亮度和系统音量(附加AVAudioPlayer基本用法和

    这篇文章主要介绍了iOS中滑动控制屏幕亮度和系统音量(附加AVAudioPlayer基本用法和Masonry简单使用)的相关资料,需要的朋友可以参考下...

    CodingFire13652021-02-26
  • IOSiOS自定义UICollectionViewFlowLayout实现图片浏览效果

    iOS自定义UICollectionViewFlowLayout实现图片浏览效果

    这篇文章主要介绍了iOS自定义UICollectionViewFlowLayout实现图片浏览效果的相关资料,需要的朋友可以参考下...

    jiangamh8882021-01-11
  • IOSiOS中MD5加密算法的介绍和使用

    iOS中MD5加密算法的介绍和使用

    MD5加密是最常用的加密方法之一,是从一段字符串中通过相应特征生成一段32位的数字字母混合码。对输入信息生成唯一的128位散列值(32个字符)。这篇文...

    LYSNote5432021-02-04
  • IOS详解iOS中多个网络请求的同步问题总结

    详解iOS中多个网络请求的同步问题总结

    这篇文章主要介绍了详解iOS中多个网络请求的同步问题总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    liang199111312021-03-15