自定义分享界面

作者: 安然slience | 来源:发表于2016-07-22 15:46 被阅读188次

好久没有写文章,今天终于忙里偷闲,写一下这个自定义的分享界面,整个界面都是自定义,可修改性强,也可拿来直接用,希望能够给大家一些帮助.因为时间不多,并且代码量不是太大,就没有写成MVC的模式,代码简单易懂,如果大家有什么好的建议,也希望分享一下,谢谢!另附上几张图片,方便大家测试看效果(创建一个工程,将代码和图片拷贝进工程即可),附的图片如果打不开,大家自己找几张替换图片也可以
.h文件
#import <UIKit/UIKit.h>

  @interface ViewController : UIViewController

  @end

.m文件
#import "ViewController.h"

//屏幕宽
#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)
//屏幕高
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)

//此处是设置自定义按钮的尺寸,自定义方法是for循环创建几行按钮,每行固定几个按钮
#define Start_X 12.0f           // 第一个按钮的X坐标
#define Start_Y 10.0f           // 第一个按钮的Y坐标
#define Width_Space 15.0f        // 2个按钮之间的横间距
#define Height_Space 10.0f      // 竖间距
#define Button_Height (SCREEN_WIDTH - 24 - 45 - 50)/4    // 高
#define Button_Width (SCREEN_WIDTH - 24 - 45 - 50)/4      // 宽

@interface ViewController ()
@property(strong,nonatomic)UIView *shadeView;//背景遮盖
@property(strong,nonatomic)UIView *backView;//分享弹出框的背景view

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor whiteColor];//设置view背景颜色

    //写一个button来点击触发弹出分享框的事件
    UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 80, 50)];
    [btn setTitle:@"分享" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    btn.backgroundColor = [UIColor redColor];
    [btn addTarget:self action:@selector(btnAction) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

-(void)btnAction {
    NSLog(@"分享");
    [self setUpShadeView];//添加Beijing遮盖

    [self setUpShareWindow];//弹出分享框
    
    //动画从屏幕底部弹出分享框
    [UIView animateWithDuration:0.5 animations:^{
    self.backView.frame = CGRectMake(0, SCREEN_HEIGHT - 210, SCREEN_WIDTH, 210);
    }];
}

//根据按钮的tag值来判断是点击的哪一个按钮(触发事件)
-(void)shareAction:(UIButton *)btn {
    if (btn.tag == 1000) {
        NSLog(@"微信");
    }else if (btn.tag == 1001) {
        NSLog(@"朋友圈");
    }else if (btn.tag == 1002) {
        NSLog(@"QQ");
    }else if (btn.tag == 1003) {
        NSLog(@"QQ空间");
    }else if (btn.tag == 1004) {
        NSLog(@"新浪微博");
    }
}

//创建分享view
-(void)setUpShareWindow {

    //设置view的frame在屏幕下方(也就是看不见的位置),并将它添加在幕后英雄Window上
    UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, 210)];
    backView.backgroundColor = [UIColor clearColor];
    [[UIApplication sharedApplication].keyWindow addSubview:backView];
    self.backView = backView;

    //创建分享按钮的背景view
    UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(25, 0, backView.frame.size.width - 50, 150)];
    view1.backgroundColor = [UIColor whiteColor];
    view1.layer.cornerRadius = 5.0;
    view1.layer.masksToBounds = YES;
    [backView addSubview:view1];

    UIImage *image1 = [UIImage imageNamed:@"微信"];
    UIImage *image2 = [UIImage imageNamed:@"朋友圈"];
    UIImage *image3 = [UIImage imageNamed:@"QQ"];
    UIImage *image4 = [UIImage imageNamed:@"空间"];
    UIImage *image5 = [UIImage imageNamed:@"微博"];
    NSArray *imageArr = @[image1,image2,image3,image4,image5];
    NSArray *titleArr = @[@"微信",@"朋友圈",@"QQ",@"QQ空间",@"新浪微博"];
    //for循环创建几行按钮,每行几个
    for (int i = 0; i < 5; i++) {
        //此处的4为每行几个按钮,根据imageArr的count数,来自动布局几行,非常方便
        NSInteger index = i % 4;
        NSInteger page = i / 4;
    
        //自定义按钮(图片在上,文字在下),此处不多说,都是button的基本属性
        UIButton *shareBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        shareBtn.frame = CGRectMake(index * (Button_Width + Width_Space) + Start_X, page  * (Button_Height + Height_Space)+Start_Y, Button_Width, Button_Height);
        shareBtn.adjustsImageWhenHighlighted = NO;
        shareBtn.titleLabel.font = [UIFont systemFontOfSize:14];
        shareBtn.backgroundColor = [UIColor whiteColor];
        [shareBtn setImage:[imageArr objectAtIndex:i] forState:UIControlStateNormal];
        [shareBtn setTitle:[titleArr objectAtIndex:i] forState:UIControlStateNormal];
        [shareBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        //此处是为了设置图片和文字之间的约束
        CGSize imageSize = shareBtn.imageView.frame.size;
        CGSize titleSize = shareBtn.titleLabel.frame.size;
        CGFloat totalHeight = (SCREEN_WIDTH - 24 - 45 - 50)/4;
        CGSize textSize = [shareBtn.titleLabel.text sizeWithFont:shareBtn.titleLabel.font];
        CGSize frameSize = CGSizeMake(ceilf(textSize.width), ceilf(textSize.height));
        //这个判断不能少,是为了将图片和文字都显示在button的居中位置
        if (titleSize.width + 0.5 < frameSize.width) {
            titleSize.width = frameSize.width;
        }
        //设置图片和文字之间的约束
        shareBtn.imageEdgeInsets = UIEdgeInsetsMake(- (totalHeight - imageSize.height), 0.0, 0.0, - titleSize.width);
        shareBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
    shareBtn.titleEdgeInsets = UIEdgeInsetsMake(0, - imageSize.width, - (totalHeight - titleSize.height * 2), 0);
        shareBtn.tag = 1000 + i;
        [shareBtn addTarget:self action:@selector(shareAction:) forControlEvents:UIControlEventTouchUpInside];
        [view1 addSubview:shareBtn];
    }

    UIButton *cancleBtn = [[UIButton alloc] initWithFrame:CGRectMake(view1.frame.origin.x, CGRectGetMaxY(view1.frame) + 10, view1.frame.size.width, 40)];
    [cancleBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
    [cancleBtn setTitle:@"取消" forState:UIControlStateNormal];
    cancleBtn.adjustsImageWhenHighlighted = NO;
    cancleBtn.backgroundColor = [UIColor whiteColor];
    cancleBtn.layer.cornerRadius = 5.0;
    cancleBtn.layer.masksToBounds = YES;
    [cancleBtn addTarget:self action:@selector(cancleAction) forControlEvents:UIControlEventTouchUpInside];
    [backView addSubview:cancleBtn];
}

-(void)cancleAction {
    NSLog(@"取消");
    //此处将分享框的背景view的frame重新设置回屏幕以下看不见的地方,并动画展示
    [UIView animateWithDuration:0.5 animations:^{
        self.backView.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, 210);
    }];
    //等到分享窗口完全消失再移除遮盖,此方法是暂停0.5秒,也就是分享框收起的时间
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)),dispatch_get_main_queue(), ^{
        [self.shadeView removeFromSuperview];
    });
}

//背景遮罩
-(void)setUpShadeView {
    self.shadeView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    //设置透明色,此方法设置透明色不会影响添加在此View上的任何控件的透明度
    UIColor *color = [UIColor blackColor];
    self.shadeView.backgroundColor = [color colorWithAlphaComponent:0.3];
    [[UIApplication sharedApplication].keyWindow addSubview:self.shadeView];

    //添加手势
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hidePopupWindow)];
    [tap setNumberOfTapsRequired:1];
    [tap setNumberOfTouchesRequired:1];
    [self.shadeView addGestureRecognizer:tap];
}

-(void)hidePopupWindow {
    //此处将分享框的背景view的frame重新设置回屏幕以下看不见的地方,并动画展示
    [UIView animateWithDuration:0.5 animations:^{
        self.backView.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, 210);
    }];
   //等到分享窗口完全消失再移除遮盖,此方法是暂停0.5秒,也就是分享框收起的时间
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)),dispatch_get_main_queue(), ^{
        [self.shadeView removeFromSuperview];
    });
}

@end