QQ首页弹出框
这是QQ首页的弹出列表，现在我们自己写一个这样的弹出列表。这其实就是弹出一个全屏的透明view，上面加了一个tableview。我写了一个简单的弹出框，只是一个基本tableView，只有看明白思路，要实现QQ这样的弹出框，只需要自定义一个cell就行，代码灵活性很高。有什么问题，可留言。
下面是使用方法：
NSArray *carr = @[@"创建群聊",@"加好友/群",@"扫一扫",@"面对面快传",@"付款",@"面对面红包"];
SPPopListView *popListView = [[SPPopListView alloc]initPopListView:carr clickBlock:^(NSString *cstrClickTitle) {
DDLog(@"cstrClickTitle==%@",cstrClickTitle);
}];
[popListView show];
这是分装的view
//
// SPPopListView.h
// TongYuanHospital
//
// Created by ZSP on 2017/6/8.
// Copyright © 2017年 ZSP. All rights reserved.
//
#import <UIKit/UIKit.h>
typedef void (^ClickBlock)(NSString *cstrClickTitle);
@interface SPPopListView : UIView
@property (nonatomic, copy) ClickBlock clickBlock;
/**
initPopListView 初始化
@param carrData 列表数据
@param clickBlock 点击的回调
@return self
*/
- (instancetype)initPopListView:(NSArray *)carrData clickBlock:(void(^)(NSString *cstrClickTitle))clickBlock;
/**
显示SPDatePickerView展示
*/
- (void)show;
@end
//
// SPPopListView.m
// TongYuanHospital
//
// Created by ZSP on 2017/6/8.
// Copyright © 2017年 ZSP. All rights reserved.
//
#import "SPPopListView.h"
@interface SPPopListView()<UITableViewDelegate,UITableViewDataSource>
@property (nonatomic, strong) UIView *backView;
@property (nonatomic, strong) UITableView *tableview;
@property (nonatomic, strong) NSArray *popDataArr;
@end
@implementation SPPopListView
- (instancetype)initPopListView:(NSArray *)carrData clickBlock:(void(^)(NSString *cstrClickTitle))clickBlock{
self = [super initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
if (self) {
self.clickBlock = [clickBlock copy];
[self addPopListView:carrData ];
}
return self;
}
- (void)addPopListView:(NSArray *)carrData {
self.popDataArr = carrData;
_backView = [[UIView alloc]init];
[self addSubview:_backView];
_backView.backgroundColor = mRGBAColor(0, 0, 0, 0.2);
[_backView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self);
}];
_backView.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapClick)];
[_backView addGestureRecognizer:tap];
_tableview = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 0, 0) style:UITableViewStylePlain];
_tableview.backgroundColor = [UIColor whiteColor];
_tableview.separatorStyle = UITableViewCellSeparatorStyleNone;
_tableview.showsVerticalScrollIndicator=NO;
_tableview.delegate = self;
_tableview.dataSource = self;
[self.backView addSubview:_tableview];
self.tableview.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
self.tableview.layer.cornerRadius = 10;
self.tableview.backgroundColor = [UIColor whiteColor];
self.tableview.scrollEnabled = NO;
[self addSubview:self.tableview];
[self setBezierPath];
//动画一
// [self showTableViewWithAnimation1];
//动画二
[self showTableViewWithAnimation2];
}
//动画一
- (void)showTableViewWithAnimation1{
self.tableview.frame = CGRectMake(SCREEN_WIDTH-150, 64, 140 , 0);
// self.tableview.alpha = 0;
[UIView animateWithDuration:0.3 animations:^{
// self.tableview.alpha = 1;
self.tableview.frame = CGRectMake(SCREEN_WIDTH-150, 64, 140, 50.0 * (self.popDataArr.count));
} completion:^(BOOL finished){
}];
}
//动画二
- (void)showTableViewWithAnimation2{
self.tableview.frame = CGRectMake(SCREEN_WIDTH-150, 64, 140, 50.0 * (self.popDataArr.count));
// self.tableview.alpha = 0;
self.tableview.layer.anchorPoint = CGPointMake(1, 0);
self.tableview.layer.position = CGPointMake(SCREEN_WIDTH-10, 64);
self.tableview.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView animateWithDuration:0.25 animations:^{
// if (isShow) {
// self.tableview.alpha = 1;
self.tableview.transform = CGAffineTransformMakeScale(1.0, 1.0);
// }else{
// menuView.alpha = 0;
// backView.alpha = 0;
// menuView.transform = CGAffineTransformMakeScale(0.01, 0.01);
// }
}];
}
// 画三角形-------
- (void)setBezierPath{
CGFloat width = SCREEN_WIDTH-15;//白色箭头的偏移量
CGFloat height = 64;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(width - 25, height)];
[path addLineToPoint:CGPointMake(width - 20, height-5)];
[path addLineToPoint:CGPointMake(width - 15, height)];
CAShapeLayer *layer = [CAShapeLayer layer];
// 颜色设置和cell颜色一样
layer.fillColor = [UIColor whiteColor].CGColor;
layer.strokeColor = [UIColor whiteColor].CGColor;
layer.path = path.CGPath;
[self.layer addSublayer:layer];
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *cellIdentifier = @"cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
cell.textLabel.textColor = THEME_BLACK;
cell.backgroundColor = [UIColor clearColor];
[cell.textLabel setFont:[UIFont systemFontOfSize:14]];
cell.textLabel.textAlignment = NSTextAlignmentCenter;
}
cell.selectionStyle = UITableViewCellSelectionStyleNone;
cell.textLabel.text = self.popDataArr[indexPath.row];
cell.separatorInset = UIEdgeInsetsMake(0, 2, 0, 3);
return cell;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.popDataArr.count;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 160, 10)];
view.backgroundColor = [UIColor clearColor];
return view;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
return 0.0001;
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 50;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
self.clickBlock(self.popDataArr[indexPath.row]);
[self removeFromSuperview];
}
- (void)tapClick{
[self removeFromSuperview];
}
- (void)show{
[[UIApplication sharedApplication].keyWindow addSubview:self];
}
@end
注意 :
- 里面写了2种不同的显现动画，可以任意选择一种。
- 在网上看很多这个箭头三角写的不太好，当列表数量改变时候，这个箭头就会变形。所以我用
UIBezierPath画的小三角箭头，在不同的列表数时候，这个三角形不会变形。 - 这里只是写了一个最简单tableview，大家可以根据自己的需求，自定义cell就行。
动画一
动画二
