基于IOS实现带箭头的view

// 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;

#define screenwidth [uiscreen mainscreen].bounds.size.width
#define screenheight [uiscreen mainscreen].bounds.size.height
#define length 5
#define length2 15

@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

- (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;
}

#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);
}

#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;
}
}
}

- (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];
}
}];
}

#pragma mark -
- (void)touchesbegan:(nsset<uitouch *> *)touches withevent:(uievent *)event
{
if (![[touches anyobject].view isequal:self.backgoundview]) {
[self dismiss];
} 
}

#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];
}];
}

#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];
}
}

@protocol selectindexpathdelegate <nsobject>
- (void)selectindexpathrow:(nsinteger )index;
@end

@interface viewcontroller ()<selectindexpathdelegate>

// 支持多种类型
/**
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];

- (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;
}
}