iOS按比例实现方块图

本文实例为大家分享了iOS按比例实现方块图的具体代码,供大家参考,具体内容如下

原理:二分法递归实现,就是每次“对半分”,分到只剩两个

上代码:SZBlockView

@interface SZBlockView : UIView
@property (nonatomic, strong) NSArray *data;//数据源
@end

#import "SZBlockView.h"
#import "SZItemView.h"

@implementation SZBlockView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = UIColor.whiteColor;
    }
    return self;
}

-(void)setData:(NSArray *)data
{
    _data = data;
    [self removeAll];
    for (NSString* value in data) {
        [self addSubNode:[value intValue]];
    }
    [self recalcLayout];
}

-(void)addSubNode:(int)value
{
    SZItemView* item = [SZItemView new];
    item.value = value;
    [self addSubview:item];
}

-(void)removeAll
{
    //移除所有子视图
    [self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
}

-(bool)isVertical:(double)w Height:(double) h
{
    return w / h > 1.618;//黄金比例,可以自己根据需求修改
}

-(void)recalcLayout
{
    if (self.subviews.count < 1) return;
    [self recalcSquarifiedLayout:0 Finish:self.subviews.count - 1 Area:self.bounds];
}

-(void)recalcSliceLayout:(NSUInteger)nStart Finish:(NSUInteger)nFinish Area:(CGRect)rect IsVertical:(bool) bIsVertical
{
    NSAssert(nStart < self.subviews.count, @"nStart >= self.subviews.count");
    NSAssert(nFinish < self.subviews.count, @"nFinish >= self.subviews.count");

    if (nStart == nFinish)
    {
        [self.subviews[nStart] setFrame:rect];
        return;
    }

    double dblTotal = [self getChildrenTotal:nStart Finish:nFinish];

    double x = rect.origin.x;
    double y = rect.origin.y;

    if (bIsVertical)
    {
        for (NSUInteger i = nStart; i <= nFinish; i++)
        {
            SZItemView* item = self.subviews[i];
            double cx = rect.size.width * item.value / dblTotal;
            CGRect rectSubNode = item.frame;
            rectSubNode = rect;
            rectSubNode.origin.x = x;
            if (i == nFinish) {
                rectSubNode.size.width = cx;
            }else{
                rectSubNode.size.width = cx-1;
            }

            item.frame = rectSubNode;

            x += cx;
        }
    } else
    {
        for (NSUInteger i = nStart; i <= nFinish; i++)
        {
            SZItemView* item = self.subviews[i];
            double cy = rect.size.height * item.value / dblTotal;
            CGRect rectSubNode = item.frame;
            rectSubNode = rect;
            rectSubNode.origin.y = y;
            if (i==nFinish) {
                rectSubNode.size.height = cy;
            }else{
                rectSubNode.size.height = cy-1;
            }

            item.frame = rectSubNode;
            y += cy;
        }
    }
}

-(void)recalcSquarifiedLayout:(NSUInteger)nStart Finish:(NSUInteger)nFinish Area:(CGRect) rect
{
    NSAssert(nStart < self.subviews.count, @"nStart >= self.subviews.count");
    NSAssert(nFinish < self.subviews.count, @"nFinish >= self.subviews.count");

    if (nStart + 2 > nFinish)
    {
        return [self recalcSliceLayout:nStart Finish:nFinish Area:rect IsVertical:[self isVertical:rect.size.width Height:rect.size.height]];
    }

    double total = [self getChildrenTotal:nStart Finish:nFinish],total_left = 0.;
    for (NSUInteger i = nStart; i <= nFinish; i++)
    {
        SZItemView* item = self.subviews[i];
        double pre_dt = total_left - total / 2;
        total_left += item.value;
        double dt = total_left - total / 2;

        if (dt > 0)
        {
            if (dt + pre_dt > 0)
            {
                total_left -= item.value;
                i--;
            }
            if ([self isVertical:rect.size.width Height:rect.size.height])
            {
                CGRect rectLeft = rect;
                rectLeft.size.width = rect.size.width * total_left / total - 1;
                [self recalcSquarifiedLayout:nStart Finish:i Area:rectLeft];

                CGRect rectRight = rect;
                rectRight.origin.x = rectLeft.origin.x + rectLeft.size.width + 1;
                rectRight.size.width = rect.size.width - rectLeft.size.width - 1;
                [self recalcSquarifiedLayout:i + 1 Finish:nFinish Area:rectRight];
            } else
            {
                CGRect rectTop = rect;
                rectTop.size.height = rect.size.height * total_left / total - 1;
                [self recalcSquarifiedLayout:nStart Finish:i Area:rectTop];

                CGRect rectBottom = rect;
                rectBottom.origin.y = rectTop.origin.y + rectTop.size.height + 1;
                rectBottom.size.height = rect.size.height - rectTop.size.height - 1;
                [self recalcSquarifiedLayout:i + 1 Finish:nFinish Area:rectBottom];
            }
            return;
        }
    }

//    NSAssert(false, @"unreachable");
}

-(double)getChildrenTotal:(NSUInteger)nStart Finish:(NSUInteger) nFinish
{
    double dblTotal = 0.;

    for (NSUInteger i = nStart; i <= nFinish; i++)
    {
        SZItemView* item = self.subviews[i];
        dblTotal += item.value;
    }

    return dblTotal;
}

@end

SZItemView 里面的每一个小的视图

@interface SZItemView : UIView
@property (nonatomic, assign) int value;//传入要显示的值
@end

#import "SZItemView.h"
@interface SZItemView ()
@property (nonatomic, strong) UILabel *valueLabel;
@end

@implementation SZItemView

- (instancetype)init
{
    self = [super init];
    if (self) {
        [self setupUI];
    }
    return self;
}
-(void)setupUI{
    UILabel *valueLabel = [[UILabel alloc] initWithFrame:self.frame];
    valueLabel.adjustsFontSizeToFitWidth = YES;
    self.valueLabel = valueLabel;
    valueLabel.textAlignment = NSTextAlignmentCenter;
    valueLabel.textColor = UIColor.whiteColor;
    [self addSubview:valueLabel];
}

- (void)setValue:(int)value{
    _value = value;
    self.valueLabel.text = [NSString stringWithFormat:@"%d",value];
    self.backgroundColor = UIColor.orangeColor;
}
- (void)layoutSubviews{//如果用masonry布局此方法可不实现
    self.valueLabel.frame = self.bounds;
    self.valueLabel.adjustsFontSizeToFitWidth = YES;
}
@end

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS实现圆环比例图

    本文实例为大家分享了iOS实现圆环比例图的具体代码,供大家参考,具体内容如下 实现效果 实现方法 1. SSTCircleProgressView @interface SSTCircleProgressView : UIView /** *进度条的角的类型 */ @property (nonatomic,copy) CAShapeLayerLineCap lineCap; /** *进度条显示的文字 */ @property (nonatomic,copy) NSString *progres

  • iOS按比例实现方块图

    本文实例为大家分享了iOS按比例实现方块图的具体代码,供大家参考,具体内容如下 原理:二分法递归实现,就是每次"对半分",分到只剩两个 上代码:SZBlockView @interface SZBlockView : UIView @property (nonatomic, strong) NSArray *data;//数据源 @end #import "SZBlockView.h" #import "SZItemView.h" @implem

  • IOS 开发中画扇形图实例详解

    IOS 开发中画扇形图实例详解 昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要了解一个uiview的方法 -(void)drawRect:(CGRect)rect 我们知道了这个方法,就可以在自定义UIView的子类的- (void)drawRect:(CGRect)rect里面绘图了,关于drawrect的调用周期,网上也是一找一大堆,等下我会整理一下,转载一篇供你们参考.

  • Android仿ios加载loading菊花图效果

    项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loading,一般用的比较多的是仿照ios 的菊花加载loading 图,当然一些条件下还会涉及到加载成功/ 失败情况的显示,还有显示文字.   使用ProgressBar 来加载动画转圈,这里使用drawable文件 定义转圈动画, indeterminateDrawable 属性进行加载. <?xml version="1.0" encoding="utf-8"?> &

  • iOS UIBezierPath实现饼状图

    本文实例为大家分享了iOS UIBezierPath实现饼状图的具体代码,供大家参考,具体内容如下 首先看效果图: 代码: #import <UIKit/UIKit.h> NS_ASSUME_NONNULL_BEGIN @interface CircleView : UIView @property (nonatomic, copy) NSArray<NSNumber *> *valueArray; @end NS_ASSUME_NONNULL_END // #define S_W

  • iOS简单实现轮播图效果

    本文实例为大家分享了iOS简单实现轮播图效果的具体代码,供大家参考,具体内容如下 平常在开发过程中,首页的轮播图总是少不了,轮播图我们都知道肯定是要使用 UIScrollView ,难点就在最后一张图片被滑动时,如何回到第一张图片以及第一张滑动到最后一张.我们可以使用如下方式实现轮播图,在划到3后面的1后,设置 contentOffset 回到最先的1,并设置 pageControl ,即可达到效果 (从1划到3也同理) 看一下效果: 完成这种轮播图,我们的 View 需要如下的属性和方法 @i

  • 浅析IOS中播放gif动态图的方法

    一.引言 在iOS开发中,UIImageView类专门来负责图片数据的渲染,并且UIImageView也有帧动画的方法来播放一组图片,但是对于gif类型的数据,UIImageView中并没有现成的接口提供给开发者使用,在iOS中一般可以通过两种方式来播放gif动态图,一种方式是通过ImageIO框架中的方法将gif文件中的数据进行解析,再使用coreAnimation核心动画来播放gif动画,另一种方式计较简单,可以直接通过webView来渲染gif图. 二.为原生的UIImageView添加类

  • iOS应用开发中矢量图的使用及修改矢量图颜色的方法

    之前捣鼓了点东西,要适配6和Plus,自己做做切图才发现确实有够烦.基于矢量图生成PNG图形的方法也是事后才知道,学习下,希望接下来可以实践.下面进入译文. iOS应用的视觉形式通常是以图形元素驱动的.在设计开发一款应用时,你需要不同规格的应用图标,例如不同尺寸的Default.png图片,同时还需要为UI的实现准备@1x和@2x图形资源.所有这些图形元素都会让你的产品看上去更吸引人,但弊端也是很明显的 - 你需要为每种规格的图形元素单独切图.而随着iPhone 6及Plus的发布,我们又多了一

  • 两行IOS代码实现轮播图

    此篇文章讲述IOS轮播图,仅需要几步就可以完成,很简单了. 第一步:利用cocopods导入KJBannerView组件 #import "KJBannerView.h" 第二步:在m文件加入代理 <KJBannerViewDelegate> //并且定义组件 @property (nonatomic,strong) KJBannerView *banner2; 第三步:实现就仅此一步 -(void)initData{ KJBannerView *banner2 = [[K

  • iOS 在线视频生成GIF图功能的方法

    在一些视频APP中,都可以看到一个将在线视频转成GIF图的功能.下面就来说说思路以及实现.我们知道本地视频可以生成GIF,那么将在线视频截取成本地视频不就可以了吗?经过比较,腾讯视频App也是这么做的.话不多说,下面开始上代码: 第一步:截取视频 #pragma mark -截取视频 - (void)interceptVideoAndVideoUrl:(NSURL *)videoUrl withOutPath:(NSString *)outPath outputFileType:(NSStrin

  • iOS实现比例拼图的方法示例

    需求原型图: 要求: 各个模块的大小反映各个模块的占比(销售额),所有模块共同组成一个正方形. 后台返回的数据格式: { "result": true, "data": { "category_sale": [ { "name": "我是你的哥", "sale_amount": 1, "gross_margin_ratio": 0.22 }, { "name

随机推荐