美文网首页iOS大咖说实用轮子UIKit
JZShare - ShareSDK如何自定义分享UI

JZShare - ShareSDK如何自定义分享UI

作者: 树深不闻钟 | 来源:发表于2016-06-02 11:38 被阅读3131次

    欢迎访问个人博客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.

    相关文章

      网友评论

      本文标题:JZShare - ShareSDK如何自定义分享UI

      本文链接:https://www.haomeiwen.com/subject/qsckdttx.html