JZShare - ShareSDK如何自定义分享UI

欢迎访问个人博客www.kohmax.com

首先附上源码：Jozo的Github -- JZShare

当我们用ShareSDK集成分享的功能，难免会遇到产品提来的需求，他会找设计自行设计出一套UI，然后指着那美轮美奂的效果告诉你，做成这样。

那么，怎样抛弃Mob原生的UI，来自行定义UI呢，其实也很简单。SDK里本来就有摒弃UI的调用分享的方法。本文的一切也将围绕它展开。

本文使用Mob版本为ShareSDK For iOS v3.3.0

/**
 *  分享内容
 *
 *  @param platformType             平台类型
 *  @param parameters               分享参数
 *  @param stateChangeHandler       状态变更回调处理
 */
+ (void)share:(SSDKPlatformType)platformType
   parameters:(NSMutableDictionary *)parameters
onStateChanged:(SSDKShareStateChangedHandler)stateChangedHandler;

下面开始正式的代码实现：

首先自定义一个类 "ShareCustom"

ShareCustom.h

#import <Foundation/Foundation.h>
@interface ShareCustom : NSObject

+(void)shareWithContent:(id)publishContent;//自定义分享界面

ShareCustom.m

// 适配
#define DevicesScale ([UIScreen mainScreen].bounds.size.height==480?1.00:[UIScreen mainScreen].bounds.size.height==568?1.00:[UIScreen mainScreen].bounds.size.height==667?1.17:1.29)

// 颜色
#define UIColorFromRGB(rgbValue) [UIColor  colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0  green:((float)((rgbValue & 0xFF00) >> 8))/255.0  blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

// 获取屏幕尺寸
#define kScreenHeight ([UIScreen mainScreen].bounds.size.height)
#define kScreenWidth ([UIScreen mainScreen].bounds.size.width)

// 设备类型
#define SYSTEM_VERSION   [[UIDevice currentDevice].systemVersion floatValue]

//屏幕宽度相对iPhone6屏幕宽度的比例
#define KWidth_Scale    [UIScreen mainScreen].bounds.size.width/375.0f


#import "JZShareCustom.h"
/**
 @author Jozo, 16-05-24 12:05:09
 
 导入ShareSDK分享功能
 */
#import <ShareSDK/ShareSDK.h>
#import <ShareSDKUI/ShareSDK+SSUI.h>
#import <ShareSDKConnector/ShareSDKConnector.h>

//腾讯开放平台（对应QQ和QQ空间）SDK头文件
#import <TencentOpenAPI/TencentOAuth.h>
#import <TencentOpenAPI/QQApiInterface.h>

//微信SDK头文件
#import "WXApi.h"


@implementation JZShareCustom

static id _publishContent;//类方法中的全局变量这样用（类型前面加static）
static UIVisualEffectView *_effectView;
/*
 自定义的分享类，使用的是类方法，其他地方只要 构造分享内容publishContent就行了
 */

+(void)shareWithContent:(id)publishContent/*只需要在分享按钮事件中 构建好分享内容publishContent传过来就好了*/
{
    _publishContent = publishContent;
    UIWindow *window = [UIApplication sharedApplication].keyWindow;
    
    
    UIBlurEffect * blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    _effectView = [[UIVisualEffectView alloc]initWithEffect:blur];
    _effectView.frame = CGRectMake(0, 0, kScreenWidth, kScreenHeight);
    [window addSubview:_effectView];
    
    
    /**
     点击退出手势
     */
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismiss)];
    [_effectView addGestureRecognizer:tap];
    
    
    /**
     加上一层黑色透明效果
     */
    UIView *blackV = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];
    blackV.backgroundColor = [UIColor blackColor];
    blackV.alpha = 0.2;
    [_effectView addSubview:blackV];
    
    
    /**
     Share Content
     */
    UIView *shareView = [[UIView alloc] initWithFrame:CGRectMake((kScreenWidth-220 * DevicesScale)/2.0f, (kScreenHeight-249 * DevicesScale)/2.0f,  220 * DevicesScale, 249*DevicesScale)];
    shareView.tag = 441;
    [window addSubview:shareView];
    
    UIImageView *shareImg = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"分享_bg"]];
    shareImg.frame = CGRectMake(0, 0, shareView.frame.size.width, shareView.frame.size.height);
    [shareView addSubview:shareImg];
    
    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, shareView.frame.size.width, 45*KWidth_Scale)];
    titleLabel.text = @"分享给小伙伴";
    titleLabel.textAlignment = NSTextAlignmentCenter;
    titleLabel.font = [UIFont systemFontOfSize:18*KWidth_Scale];
    titleLabel.textColor = UIColorFromRGB(0x374552);
    titleLabel.backgroundColor = [UIColor clearColor];
    [shareView addSubview:titleLabel];
    
    NSArray *btnImages = @[@"分享_qq", @"分享_微信好友", @"分享_QQ空间", @"分享_朋友圈"];
    NSArray *btnTitles = @[ @"QQ", @"微信好友", @"QQ空间", @"朋友圈",];
    for (NSInteger i=0; i<btnImages.count; i++) {
        
        CGFloat bt_width =  85 * DevicesScale;
        if(kScreenHeight == 568) {
            bt_width = 95 *DevicesScale;
        }
        
        CGFloat gap = (shareView.frame.size.width - 2*bt_width) / 3.0;
        CGFloat top = 0.0f;
        if (i<2) {
            top = 0*KWidth_Scale;
            
        }else{
            top = 0*KWidth_Scale + bt_width;
        }
        
        
        UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(gap * (i % 2 + 1) + i % 2 * bt_width, titleLabel.frame.origin.y + titleLabel.frame.size.height+top, bt_width, bt_width)];
        [button setImage:[UIImage imageNamed:btnImages[i]] forState:UIControlStateNormal];
        
        UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(0, bt_width - 20, bt_width, 20)];
        lbl.font = [UIFont systemFontOfSize:12*DevicesScale];
        lbl.textAlignment = NSTextAlignmentCenter;
        lbl.textColor = UIColorFromRGB(0x374552);
        lbl.text = btnTitles[i];
        [button addSubview:lbl];
        
        
        button.tag = 331+i;
        [button addTarget:self action:@selector(shareBtnClick:) forControlEvents:UIControlEventTouchUpInside];
        [shareView addSubview:button];
    }
    
    UIButton *cancleBtn = [[UIButton alloc] initWithFrame:CGRectMake((kScreenWidth - 24 *DevicesScale) / 2.0f, shareView.frame.origin.y + shareView.frame.size.height + 8, 24*DevicesScale, 24*DevicesScale)];
    [cancleBtn setBackgroundImage:[UIImage imageNamed:@"分享_关闭"] forState:UIControlStateNormal];
    cancleBtn.tag = 339;
    [cancleBtn addTarget:self action:@selector(shareBtnClick:) forControlEvents:UIControlEventTouchUpInside];
    cancleBtn.alpha = 1.0;
    [_effectView.contentView addSubview:cancleBtn];
    
    //为了弹窗不那么生硬，这里加了个简单的动画
    shareView.transform = CGAffineTransformMakeScale(1/300.0f, 1/270.0f);
    _effectView.contentView.alpha = 0;
    [UIView animateWithDuration:0.35f animations:^{
        shareView.transform = CGAffineTransformMakeScale(1, 1);
        _effectView.contentView.alpha = 1;
    } completion:^(BOOL finished) {
        
    }];
}

+(void)shareBtnClick:(UIButton *)btn
{
    
    int shareType = 0;
    id publishContent = _publishContent;
    if (btn.tag == 339) {
        
        [self dismiss];
        return;
    }
    switch (btn.tag) {
        case 331:
        {
            shareType = SSDKPlatformSubTypeQQFriend;
        }
            break;
            
        case 332:
        {
            shareType = SSDKPlatformSubTypeWechatSession;
        }
            break;
            
        case 333:
        {
            shareType = SSDKPlatformSubTypeQZone;
        }
            break;
            
        case 334:
        {
            shareType = SSDKPlatformSubTypeWechatTimeline;
        }
            break;
            
        default:
            break;
    }
    
    /*
     调用shareSDK的无UI分享类型，
     */
    
    [ShareSDK share:shareType parameters:publishContent onStateChanged:^(SSDKResponseState state, NSDictionary *userData, SSDKContentEntity *contentEntity, NSError *error) {
        
        
        switch (state) {
            case SSDKResponseStateSuccess:
            {
                
                NSLog(@"分享成功！");
                break;
            }
            case SSDKResponseStateFail:
            {
                
                NSLog(@"分享失败！");
                break;
            }
            default:
                break;
        }
        
        
        
    }];
    
}

+ (void)dismiss {
    UIWindow *window = [UIApplication sharedApplication].keyWindow;
    UIView *shareView = [window viewWithTag:441];
    
    //为了弹窗不那么生硬，这里加了个简单的动画
    shareView.transform = CGAffineTransformMakeScale(1, 1);
    [UIView animateWithDuration:0.35f animations:^{
        shareView.transform = CGAffineTransformMakeScale(1/300.0f, 1/270.0f);
        _effectView.contentView.alpha = 0;
    } completion:^(BOOL finished) {
        
        [shareView removeFromSuperview];
        [_effectView removeFromSuperview];
    }];
}


@end

可以直接拷贝以上代码，然后飘红的地方稍加修改即可

然后在需要调用分享的地方调用以下方法就可以自定义分享UI啦，当然你也可以在文章上方的源码Demo里自己体会，十分简单

#pragma mark - Private Method
- (void)goShare {
    
    //1、创建分享参数
    NSArray* imageArray = @[[UIImage imageNamed:@"share_icon"]];
    if (imageArray) {
        
        NSMutableDictionary *shareParams = [NSMutableDictionary dictionary];
        [shareParams SSDKSetupShareParamsByText:@"IM/音视频/呼叫中心/电话会议等通讯能力全方位展示，实力派，很任性。"
                                         images:imageArray
                                            url:[NSURL URLWithString:@"http://113.31.88.170:8081/cfct-server/demo/demo.html?to=UC_DEMO"]
                                          title:@"云之讯UC"
                                           type:SSDKContentTypeAuto];
        

        //调用自定义分享
        [ShareCustom shareWithContent:shareParams];
    }
    
}

That's all, thank you.