Skip to content

Latest commit

 

History

History
463 lines (373 loc) · 20.9 KB

README.md

File metadata and controls

463 lines (373 loc) · 20.9 KB
Raw

BAGridView

CI Status Version License Platform Language BAHome Team Name

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

Installation

BAGridView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'BAGridView'

Author

boai, [email protected]

License

BAGridView is available under the MIT license. See the LICENSE file for more info.

1、功能及简介

  • 1、支付宝首页 九宫格 布局封装
  • 2、自适应按钮位置和数量、badge
  • 3、自定义文字图片 或者 两行文字样式
  • 4、自定义分割线：显示/隐藏
  • 5、自定义分割线：颜色
  • 6、新增 支持 自定义 图片文字间距功能（感谢群里 @武汉-马阿飞 同学提出的 需求！）
  • 7、新增 自定义 所有文字字体（感谢群里 @武汉-马阿飞 同学提出的 需求！）
  • 8、新增 支持 自定义 item 背景颜色 和 选中背景颜色（感谢群里 @武汉-马阿飞 同学提出的 需求！）
  • 9、新增网络图片、placdholderImage功能（感谢群里 @武汉-马阿飞 同学提出的 需求！）

2、图片示例

BAGridView1 BAGridView2

3、安装、导入示例和源码地址

  • 1、pod 导入【最新版本：】：
    pod 'BAGridView'
    如果发现 pod search BAGridView 搜索出来的不是最新版本，需要在终端执行 cd 转换文件路径命令退回到 desktop，然后执行 pod setup 命令更新本地spec缓存（可能需要几分钟），然后再搜索就可以了。
    具体步骤：
  • pod setup : 初始化
  • pod repo update : 更新仓库
  • pod search BAGridView
  • 2、文件夹拖入：下载demo，把 BAGridView 文件夹拖入项目即可，
  • 3、导入头文件：
    #import "BAKit_BAGridView.h"
  • 4、项目源码地址：
    OC 版 ：https://github.com/BAHome/BAGridView

4、BAGridView 的类结构及 demo 示例

BAGridView

BAGridView.h

#import <UIKit/UIKit.h>

@class BAGridView_Config;
@interface BAGridView : UIView

/**
快速创建宫格

@param config view 基础配置
@param block 点击事件回调
@return BAGridView
*/
+ (instancetype)ba_creatGridViewWithGridViewConfig:(BAGridView_Config *)config
block:(BAGridViewBlock)block;

@end

demo 示例

// 示例1：

- (BAGridView *)gridView {
    if (!_gridView) {
        
        BAGridView_Config *config = self.ba_GridViewConfig;
        
        config.scrollEnabled = YES;
        // 是否显示分割线
        config.showLineView = YES;
        // item：分割线颜色，默认：BAKit_Color_Gray_11【BAKit_Color_RGB(248, 248, 248)】
        config.ba_gridView_lineColor = BAKit_Color_Red_pod;
        // item：每行 item 的个数，默认为4个
        config.ba_gridView_rowCount = kGridView_rowCount;
        // item：高度/宽度
        config.ba_gridView_itemHeight = kGridView_itemHeight;
        config.ba_gridView_imageWidth = 40;
        config.ba_gridView_imageHeight = 40;
        
        // item：图片与文字间距（或者两行文字类型的间距），默认：0
        config.ba_gridView_itemImageInset = 5;
        //  item：title 颜色，默认：BAKit_Color_Black【[UIColor blackColor]】
        //            config.ba_gridView_titleColor = BAKit_Color_Black;
        // item：title Font，默认：图文样式下 16，两行文字下（上25，下12）
        config.ba_gridView_titleFont = [UIFont boldSystemFontOfSize:15];
        // item：背景颜色，默认：BAKit_Color_White
        config.ba_gridView_backgroundColor = [UIColor yellowColor];
        // item：背景选中颜色，默认：无色
        config.ba_gridView_selectedBackgroundColor = BAKit_Color_Red_pod;
        // badge
        config.ba_gridView_badgeType = kBAGridViewBadgeType_Center;
        config.ba_gridView_badgeFont = [UIFont systemFontOfSize:10];
        config.ba_gridView_badgeRectCorners = UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomRight;
//        config.ba_gridView_badgeCornerRadius = 3;
//        config.ba_gridView_badgeBgColor = UIColor.orangeColor;
//        config.ba_gridView_badgeTextColor = UIColor.greenColor;
//        config.ba_gridView_badgeHeight = 30;
//        config.ba_gridView_badgeOffsetPoint = CGPointMake(10, -10);

        config.dataArray = self.gridDataArray;
        //        config.ba_gridView_itemEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10);
        //        config.minimumLineSpacing = 10;
        //        config.minimumInteritemSpacing = 10;
        
        
        _gridView = [BAGridView ba_creatGridViewWithGridViewConfig:self.ba_GridViewConfig
                                                  placdholderImage:[UIImage imageNamed:@"icon_placeholder"]
                                                             block:^(BAGridItemModel *model, NSIndexPath *indexPath) {
            
            BAKit_ShowAlertWithMsg_ios8(model.titleString);
        }];
    }
    return _gridView;
}

- (BAGridView *)gridView2 {
    if (!_gridView2) {
        BAGridView_Config *config = self.ba_GridViewConfig2;
        
        config.showLineView = YES;
        
        // item：分割线颜色，默认：BAKit_Color_Gray_11【BAKit_Color_RGB(248, 248, 248)】
        config.ba_gridView_lineColor = BAKit_Color_Red_pod;
        // item：每行 item 的个数，默认为4个
        config.ba_gridView_rowCount = kGridView_rowCount2;
        // item：高度
        config.ba_gridView_itemHeight = kGridView_itemHeight2;
        config.ba_gridView_itemWidth = 0;
        
        // item：图片与文字间距（或者两行文字类型的间距），默认：0
        //            config.ba_gridView_itemImageInset = 10;
        //  item：title 颜色，默认：BAKit_Color_Black【[UIColor blackColor]】
        config.ba_gridView_titleColor = BAKit_Color_Black_pod;
        //  item：Desc 颜色，默认：BAKit_Color_Gray_9【BAKit_Color_RGB(216, 220, 228)】
        config.ba_gridView_titleDescColor = BAKit_Color_Gray_7_pod;
        // item：title Font，默认：图文样式下 16，两行文字下（上25，下12）
        config.ba_gridView_titleFont = [UIFont boldSystemFontOfSize:25];
        // item：Desc Font，默认：两行文字下 12
        config.ba_gridView_titleDescFont = [UIFont boldSystemFontOfSize:15];
        // item：背景颜色，默认：BAKit_Color_White
        config.ba_gridView_backgroundColor = [UIColor yellowColor];
        // item：背景选中颜色，默认：无色
        config.ba_gridView_selectedBackgroundColor = [UIColor greenColor];
        config.dataArray = self.gridDataArray2;
        
        _gridView2 = [BAGridView ba_creatGridViewWithGridViewConfig:config block:^(BAGridItemModel *model, NSIndexPath *indexPath) {
            
            BAKit_ShowAlertWithMsg_ios8(model.titleString);
        }];
    }
    return _gridView2;
}

- (NSMutableArray <BAGridItemModel *> *)gridDataArray {
    if (!_gridDataArray) {
        _gridDataArray = @[].mutableCopy;
        
        BAGridView_Config *config = self.ba_GridViewConfig;
        
        // 可以为本地图片
        //        NSArray *imageNameArray = @[@"tabbar_mainframeHL", @"tabbar_mainframeHL", @"tabbar_mainframeHL", @"tabbar_mainframeHL", @"tabbar_mainframeHL"];
        // 也可以是网络图片
        
        NSArray *imageNameArray;
        NSArray *bgImageNameArray;
        
        if (config.gridViewType == BAGridViewTypeBgImageTitle) {
            bgImageNameArray = @[@"http://d.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d67cda2ef50d0828381e30fd44.jpg",
                                 @"http://d.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d67cda2ef50d0828381e30fd44.jpg",
                                 @"http://d.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d67cda2ef50d0828381e30fd44.jpg",
                                 @"http://d.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d67cda2ef50d0828381e30fd44.jpg",
                                 @"http://d.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d67cda2ef50d0828381e30fd44.jpg"
            ];
        } else {
            imageNameArray = @[@"http://d.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d67cda2ef50d0828381e30fd44.jpg",
                               @"http://d.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d67cda2ef50d0828381e30fd41.jpg",
                               @"http://d.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d67cda2ef50d0828381e30fd442.jpg",
                               @"http://d.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d67cda2ef50d0828381e30fd443.jpg",
                               @"http://d.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d67cda2ef50d0828381e30fd44.jpg"
            ];
        }
        
        if (config.gridViewType == BAGridViewTypeImageTitle || config.gridViewType == BAGridViewTypeTitleImage) {
            bgImageNameArray = @[
                @"http://img.qq1234.org/uploads/allimg/161212/16012W921-11.jpg",
                @"http://img.qq1234.org/uploads/allimg/161212/16012W921-11.jpg",
                @"http://img.qq1234.org/uploads/allimg/161212/16012W921-11.jpg",
                @"http://img.qq1234.org/uploads/allimg/161212/16012W921-11.jpg",
                @"http://img.qq1234.org/uploads/allimg/161212/16012W921-11.jpg",
            ];
        }
        
        NSArray *titleArray = @[@"小区tabbar_main", @"商圈", @"社交57128423", @"出行", @"武术"];
        
        for (NSInteger i = 0; i < titleArray.count; i++) {
            BAGridItemModel *model = [BAGridItemModel new];
            if (imageNameArray.count > 0) {
                model.imageName = imageNameArray[i];
            }
            if (bgImageNameArray.count > 0) {
                model.bgImageName = bgImageNameArray[i];
            }
            model.titleString = titleArray[i];
            
            if (config.gridViewType == BAGridViewTypeImageTitle) {
                model.badge = @(BAKit_RandomNumber(2000)).stringValue;
                if (i == 1) {
                    model.badge = @"新功能";
                }
            }
            
            [self.gridDataArray addObject:model];
        }
    }
    return _gridDataArray;
}

- (NSMutableArray <BAGridItemModel *> *)gridDataArray2 {
    if (!_gridDataArray2) {
        _gridDataArray2 = @[].mutableCopy;
        
        NSArray *titleArray = @[@"200", @"20", @"200",
                                @"10", @"￥3899989", @"30",
                                @"10", @"300", @"30", ];
        NSArray *descArray = @[@"1新增积分总量",
                               @"2返还积分总量",
                               @"3全返单元总量",
                               @"4每单元返还积分",
                               @"5全返单元总量",
                               @"6每单元返还积分",
                               @"7每单元返还积分",
                               @"8全返单元总量",
                               @"9每单元返还积分"];
        
        for (NSInteger i = 0; i < titleArray.count; i++) {
            BAGridItemModel *model = [BAGridItemModel new];
            model.desc = descArray[i];
            if (i == 4) {
                //初始化一个attriburitedString对象
                NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc] initWithString:titleArray[i]];
                //给这个属性添加一个属性前3个字符的背景颜色
                NSRange orRange = NSMakeRange(0, 1);
                [attributeString addAttributes:@{NSForegroundColorAttributeName:[UIColor orangeColor], NSFontAttributeName:[UIFont systemFontOfSize:11]} range:orRange];
              
                //添加多个属性
                NSRange seRange = NSMakeRange(3, 2);
                [attributeString addAttributes:@{ NSForegroundColorAttributeName: [UIColor redColor], NSBackgroundColorAttributeName: [UIColor blueColor]} range:seRange];
                
                model.titleAttributedString = attributeString;
            } else {
                model.titleString = titleArray[i];
            }
            
            [_gridDataArray2 addObject:model];
        }
    }
    return _gridDataArray2;
}

其他示例可下载demo查看源码！

5、更新记录：【倒叙】

欢迎使用 【BAHome】 系列开源代码 ！ 如有更多需求，请前往：【https://github.com/BAHome】

最新更新时间：2022-3-10 【倒叙】
最新Version：【Version：1.2.7】
更新内容：
1.2.7.1 新增两行文字样式下的 badge 显示！

最新更新时间：2021-07-15 【倒叙】
最新Version：【Version：1.2.5】
更新内容：
1.2.5.1 新增 NSMutableAttributedString 标题和副标题！

最新更新时间：2020-11-16 【倒叙】
最新Version：【Version：1.2.4】
更新内容：
1.2.4.1 新增自定义横向滚动排列样式！

最新更新时间：2020-07-30 【倒叙】
最新Version：【Version：1.2.2】
更新内容：
1.2.2.1、 新增背景图片填充模式！详见：code

最新更新时间：2020-05-13 【倒叙】
最新Version：【Version：1.2.1】
更新内容：
1.2.1.1、修复 scrollEnabled 无效的问题！详见：code

最新更新时间：2020-04-15 【倒叙】
最新Version：【Version：1.2.0】
更新内容：
1.2.0.1、新增 图片的填充样式！详见：code

最新更新时间：2020-04-09 【倒叙】
最新Version：【Version：1.1.9】
更新内容：
1.1.9.1、新增 图片的圆角设置！详见：code

最新更新时间：2020-03-21 【倒叙】
最新Version：【Version：1.1.7】
更新内容：
1.1.7.1、修复 角标第一次隐藏后刷新数据无法再次显示的entity！详见：code

最新更新时间：2020-03-14 【倒叙】
最新Version：【Version：1.1.6】
更新内容：
1.1.6.1、新增自定义 badge，可以实现自定义 badge 样式、字体、字体颜色、背景颜色、圆角、offset等，满足大部分用户的角标需求！详见：code

最新更新时间：2019-10-09 【倒叙】
最新Version：【Version：1.1.5】
更新内容：
1.1.5.1、新增自定义图片的宽高！详见：code
1.1.5.2、新增自定义背景图片！详见：demo

最新更新时间：2019-09-10 【倒叙】
最新Version：【Version：1.1.4】
更新内容：
1.1.4.1、优化部分代码，公开属性 config，新增 获取网络数据后的刷新操作示例！详见：demo
1.1.4.1、优化部分代码，优化默认不设置 itemWidth 时的自适应宽度设置，详见：demo

最新更新时间：2018-05-31 【倒叙】
最新Version：【Version：1.1.3】
更新内容：
1.1.3.1、优化部分代码，新增 是否可以滑动属性【scrollEnabled】！详见：demo

最新更新时间：2018-05-31 【倒叙】
最新Version：【Version：1.1.2】
更新内容：
1.1.2.1、优化部分代码，新增 是否可以滑动属性【scrollEnabled】！详见：demo

最新更新时间：2018-05-29 【倒叙】
最新Version：【Version：1.1.1】
更新内容：
1.1.1.1、优化部分代码，新增背景图片设置！详见：demo

最新更新时间：2018-05-28 【倒叙】
最新Version：【Version：1.1.0】
更新内容：
1.1.0.1、全新版本适配，适配更加简洁！详见：demo
1.1.0.2、原 配置方法 单独抽成 BAGridView_Config 类，所有的配置都可以单独设置！更加简洁明了！如果代码中有使用老版本的，可以更改适配，也可以选择锁定上一版本【1.0.7】

最新更新时间：2017-12-23 【倒叙】
最新Version：【Version：1.0.7】
更新内容：
1.0.7.1、新增图文样式下文字 title 内容可以显示最多两行！详见：demo 1
1.0.7.2、新增 BAGridView_Version.h 类，版本更新分离更易读！

最新更新时间：2017-07-07 【倒叙】
最新Version：【Version：1.0.6】
更新内容：
1.0.6.1、新增网络图片、placdholderImage功能（感谢群里 @武汉-马阿飞 同学提出的 需求！）

最新更新时间：2017-06-23 【倒叙】
最新Version：【Version：1.0.5】
更新内容：
1.0.5.1、优化部分宏定义

最新更新时间：2017-06-23 【倒叙】
最新Version：【Version：1.0.4】
更新内容：
1.0.4.1、优化部分宏定义

最新更新时间：2017-06-23 【倒叙】
最新Version：【Version：1.0.3】
更新内容：
1.0.3.1、新增 支持 自定义 item 选中改变颜色后自动还原背景颜色（感谢群里 @武汉-马阿飞 同学提出的 需求！）

最新更新时间：2017-06-21 【倒叙】
最新Version：【Version：1.0.1】
更新内容：
1.0.1.1、新增 支持 自定义 图片文字间距功能（感谢群里 @武汉-马阿飞 同学提出的 需求！）
1.0.1.2、新增 自定义 所有文字字体（感谢群里 @武汉-马阿飞 同学提出的 需求！）

最新更新时间：2017-06-20 【倒叙】
最新Version：【Version：1.0.0】
更新内容：
1.0.0.1、支付宝首页 九宫格 布局封装
1.0.0.2、自适应按钮位置和数量
1.0.0.3、自定义文字图片 或者 两行文字样式
1.0.0.4、自定义分割线：显示/隐藏
1.0.0.5、自定义分割线：颜色

6、bug 反馈

1、开发中遇到 bug，希望小伙伴儿们能够及时反馈与我们 BAHome 团队，我们必定会认真对待每一个问题！

2、以后提需求和 bug 的同学，记得把 git 或者博客链接给我们，我直接超链到你们那里！希望大家积极参与测试！

7、BAHome 团队成员

1、QQ 群 479663605
【注意：此群为 2 元 付费群，介意的小伙伴儿勿扰！】

孙博岩
QQ：137361770
git：https://github.com/boai
简书：http://www.jianshu.com/u/95c9800fdf47
微博：

马景丽
QQ：1253540493
git：https://github.com/MaJingli

陆晓峰
QQ：442171865
git：https://github.com/zeR0Lu

陈集
QQ：3161182978
git：https://github.com/chenjipdc
简书：http://www.jianshu.com/u/90ae559fc21d

任子丰
QQ：459643690
git：https://github.com/renzifeng

吴丰收
QQ：498121294

石少庸
QQ：363605775
git：https://github.com/CrazyCoderShi
简书：http://www.jianshu.com/u/0726f4d689a3

8、开发环境 和 支持版本

开发使用 最新版本 Xcode，理论上支持 iOS 8 及以上版本，如有版本适配问题，请及时反馈！多谢合作！

9、感谢

感谢 BAHome 团队成员倾力合作，后期会推出一系列 常用 UI 控件的封装，大家有需求得也可以在 issue 提出，如果合理，我们会尽快推出新版本！

BAHome 的发展离不开小伙伴儿的信任与推广，再次感谢各位小伙伴儿的支持！