整理了下最近用到的关于一些图形相关UI,都可以通过配置信息viewStyle,然后调用updateViewControls进行更改，这里简单介绍下:

具体使用详见:FJFMarqueeGradientEffectDemo

一.渐变曲线

效果如下:

渐变曲线.gif

可配置信息如下:

• FJFGradualCurveGraphView配置如下:

@interface FJFGradualCurveGraphViewStyle : NSObject
// topLayerFillColor
@property (nonatomic, strong) UIColor *topLayerFillColor;
// topLayerStrokeColor
@property (nonatomic, strong) UIColor *topLayerStrokeColor;
// lineWidth(线宽度)
@property (nonatomic, assign) CGFloat  lineWidth;

// bottomLayerFillColor
@property (nonatomic, strong) UIColor *bottomLayerFillColor;
// bottomLayerStrokeColor
@property (nonatomic, strong) UIColor *bottomLayerStrokeColor;


// singleVerticalItemViewValue(每个item视图代表值)
@property (nonatomic, assign) CGFloat  singleVerticalItemViewValue;
// singleVerticalItemViewHeight(每个item视图高度)
@property (nonatomic, assign) CGFloat  singleVerticalItemViewHeight;

// singleHorizontalItemViewValue(每个item视图代表值)
@property (nonatomic, assign) CGFloat  singleHorizontalItemViewValue;
// singleHorizontalItemViewWidth(每个item视图宽度)
@property (nonatomic, assign) CGFloat  singleHorizontalItemViewWidth;

// backgroundViewColor (如果是渐变颜色，不能为clearColor)
@property (nonatomic, strong) UIColor *backgroundViewColor;

// lineCenterViewColor 中心线 背景色
@property (nonatomic, strong) UIColor *lineCenterViewColor;

// lineCenterViewHeight 中心线 高度
@property (nonatomic, assign) CGFloat lineCenterViewHeight;

// valueTextValueModelArray
@property (nonatomic, strong) NSArray <FJFGradualCurveGraphValueModel *>*valueTextValueModelArray;

@end

• FJFGradualCurveGraphBackgroundView配置如下:

// 控件  属性
@interface FJFGradualCurveGraphBackgroundControlsProperty : NSObject
// verticalFont
@property (nonatomic, strong) UIFont *verticalFont;
// horizontalFont
@property (nonatomic, strong) UIFont *horizontalFont;
// verticalTextColor
@property (nonatomic, strong) UIColor *verticalTextColor;
// horizontalTextColor
@property (nonatomic, strong) UIColor *horizontalTextColor;
// lineViewBackgroundColor
@property (nonatomic, strong) UIColor *lineViewBackgroundColor;
@end

@interface FJFGradualCurveGraphBackgroundViewStyle : NSObject
// lineViewHeight
@property (nonatomic, assign) CGFloat  lineViewHeight;
// leftEdgeSpacing
@property (nonatomic, assign) CGFloat  leftEdgeSpacing;
// rightEdgeSpacing
@property (nonatomic, assign) CGFloat  rightEdgeSpacing;
// verticalLabelWidth
@property (nonatomic, assign) CGFloat  verticalLabelWidth;
// verticalViewSpacing 间距
@property (nonatomic, assign) CGFloat  verticalViewSpacing;
// labelToVerticalLineSpacing 垂直 分割线 和 label 间距
@property (nonatomic, assign) CGFloat  labelToVerticalLineSpacing;
// curveGraphViewTopEdgeSpacing 顶部 间距
@property (nonatomic, assign) CGFloat  curveGraphViewTopEdgeSpacing;
// curveGraphBackgroundViewWidth  宽度
@property (nonatomic, assign) CGFloat  curveGraphBackgroundViewWidth;
// verticalTextArray
@property (nonatomic, strong) NSArray <NSString *> *verticalTextArray;
// horizontalTextArray
@property (nonatomic, strong) NSArray <NSString *> *horizontalTextArray;
// horizontalLabelToCurveGraphViewSpacing 底部 label 间距
@property (nonatomic, assign) CGFloat  horizontalLabelToCurveGraphViewSpacing;
// hideVerticalFirstLabel 隐藏 垂直 第一个 属性
@property (nonatomic, assign, getter=isHideVerticalFirstLabel) BOOL  hideVerticalFirstLabel;
// hideVerticalLineView 隐藏 垂直分割线
@property (nonatomic, assign, getter=isHideVerticalLineView) BOOL  hideVerticalLineView;
// controlsPropertyStyle 控件 基本 属性
@property (nonatomic, strong) FJFGradualCurveGraphBackgroundControlsProperty *controlsPropertyStyle;
@end

二. 带箭头边框

效果如下:

带箭头边框.gif

具体可配置信息:

// contentViewCornerRadius
@property (nonatomic, assign) CGFloat  contentViewCornerRadius;
// contentViewBorderWidth
@property (nonatomic, assign) CGFloat  contentViewBorderWidth;
// contentViewBorderColor
@property (nonatomic, strong) UIColor  *contentViewBorderColor;
// contentViewFillColor 填充色
@property (nonatomic, strong) UIColor  *contentViewFillColor;
// indicatorTriangleViewWidth 箭头 宽度
@property (nonatomic, assign) CGFloat  indicatorTriangleViewWidth;
// indicatorTriangleViewHeight 箭头 高度
@property (nonatomic, assign) CGFloat  indicatorTriangleViewHeight;
// indicatorTriangleViewOffset 箭头 相对于 所在位置 偏移
// 上、下 (偏移量是从左到右算)
// 左、右 (偏移量是从上到下算)
@property (nonatomic, assign) CGFloat  indicatorTriangleViewOffset;
// indicatorTriangleViewType 箭头 方向
@property (nonatomic, assign) FJFIndicatorTriangleViewType  indicatorTriangleViewType;

这里做了一个取巧的方法就是三角箭头指示器，通过计算出底边占据三角形总边长的比例，来设置CAShapeLayer的strokeStart和strokeEnd,来形成边框。

三. 曲线图

效果如下:

曲线图.gif

曲线图分为两部分:FJFCurveGraphView曲线的绘制和FJFCurveGraphBackgroundView背景相关的提示。

具体配置信息如下:
FJFCurveGraphView的配置信息:

@interface FJFCurveGraphViewStyle : NSObject
// strokeColor
@property (nonatomic, strong) UIColor *strokeColor;
// fillColor
@property (nonatomic, strong) UIColor *fillColor;
// labelTextColor
@property (nonatomic, strong) UIColor *labelTextColor;
// labelTextFont
@property (nonatomic, strong) UIFont *labelTextFont;
// tipCircleViewColor
@property (nonatomic, strong) UIColor *tipCircleViewColor;
// tipCircleViewSize
@property (nonatomic, assign) CGFloat tipCircleViewSize;
// lineWidth(线宽度)
@property (nonatomic, assign) CGFloat  lineWidth;
// singleItemViewValue(每个item视图代表值)
@property (nonatomic, assign) CGFloat  singleItemViewValue;
// singleItemViewHeight(每个item视图高度)
@property (nonatomic, assign) CGFloat  singleItemViewHeight;
// valueTextArray
@property (nonatomic, strong) NSArray <NSString *>*valueTextArray;
@end

FJFCurveGraphBackgroundView的配置信息:

// 控件  属性
@interface FJFCurveGraphBackgroundControlsProperty : NSObject
// verticalFont
@property (nonatomic, strong) UIFont *verticalFont;
// horizontalFont
@property (nonatomic, strong) UIFont *horizontalFont;
// verticalTextColor
@property (nonatomic, strong) UIColor *verticalTextColor;
// horizontalTextColor
@property (nonatomic, strong) UIColor *horizontalTextColor;
// lineViewBackgroundColor
@property (nonatomic, strong) UIColor *lineViewBackgroundColor;
@end

@interface FJFCurveGraphBackgroundViewStyle : NSObject
// lineViewHeight
@property (nonatomic, assign) CGFloat  lineViewHeight;
// leftEdgeSpacing
@property (nonatomic, assign) CGFloat  leftEdgeSpacing;
// rightEdgeSpacing
@property (nonatomic, assign) CGFloat  rightEdgeSpacing;
// verticalLabelWidth
@property (nonatomic, assign) CGFloat  verticalLabelWidth;
// verticalViewSpacing 间距
@property (nonatomic, assign) CGFloat  verticalViewSpacing;
// horizontalLabelWidth
@property (nonatomic, assign) CGFloat  horizontalLabelWidth;
// labelToVerticalLineSpacing 垂直 分割线 和 label 间距
@property (nonatomic, assign) CGFloat  labelToVerticalLineSpacing;
// curveGraphViewTopEdgeSpacing 顶部 间距
@property (nonatomic, assign) CGFloat  curveGraphViewTopEdgeSpacing;
// curveGraphBackgroundViewWidth  宽度
@property (nonatomic, assign) CGFloat  curveGraphBackgroundViewWidth;
// verticalTextArray
@property (nonatomic, strong) NSArray <NSString *> *verticalTextArray;
// horizontalTextArray
@property (nonatomic, strong) NSArray <NSString *> *horizontalTextArray;
// horizontalLabelToCurveGraphViewSpacing 底部 label 间距
@property (nonatomic, assign) CGFloat  horizontalLabelToCurveGraphViewSpacing;
// hideVerticalFirstLabel 隐藏 垂直 第一个 属性
@property (nonatomic, assign, getter=isHideVerticalFirstLabel) BOOL  hideVerticalFirstLabel;
// controlsPropertyStyle 控件 基本 属性
@property (nonatomic, strong) FJFCurveGraphBackgroundControlsProperty *controlsPropertyStyle;
@end

四. 柱状图

效果如下:

柱状图.gif

柱状图同样分为两部分:

• FJFHistogramView 柱状图
• FJFHistogramBackgroundView 柱状图背景

具体配置信息:

• FJFHistogramView的配置信息:FJFHistogramViewStyle

@interface FJFHistogramViewStyle : NSObject
// topHistogramColor 上半部分颜色
@property (nonatomic, strong) UIColor *topHistogramColor;
// bottomHistogramColor (下半部分颜色)
@property (nonatomic, strong) UIColor *bottomHistogramColor;
// defalutHistogramWidth (默认宽度)
@property (nonatomic, assign) CGFloat  defalutHistogramWidth;
// singleItemViewValue(每个item视图代表值)
@property (nonatomic, assign) CGFloat  singleItemViewValue;
// singleItemViewHeight(每个item视图高度)
@property (nonatomic, assign) CGFloat  singleItemViewHeight;
// horizontalTextCount
@property (nonatomic, assign) NSInteger  horizontalTextCount;
// valueTextArray
@property (nonatomic, strong) NSArray <NSArray<NSString *> *> *valueTextArray;
// allowBeyondLimitHeight 是否允许 超过 限制 高度
@property (nonatomic, assign, getter=isAllowBeyondLimitHeight) BOOL  allowBeyondLimitHeight;
@end

• FJFHistogramBackgroundView的配置信息:

// 控件  属性
@interface FJFHistogramBackgroundControlsProperty : NSObject
// verticalFont
@property (nonatomic, strong) UIFont *verticalFont;
// horizontalFont
@property (nonatomic, strong) UIFont *horizontalFont;
// verticalTextColor
@property (nonatomic, strong) UIColor *verticalTextColor;
// horizontalTextColor
@property (nonatomic, strong) UIColor *horizontalTextColor;
// lineViewBackgroundColor
@property (nonatomic, strong) UIColor *lineViewBackgroundColor;
@end

@interface FJFHistogramBackgroundViewStyle : NSObject
// lineViewHeight
@property (nonatomic, assign) CGFloat  lineViewHeight;
// leftEdgeSpacing
@property (nonatomic, assign) CGFloat  leftEdgeSpacing;
// rightEdgeSpacing
@property (nonatomic, assign) CGFloat  rightEdgeSpacing;
// verticalLabelWidth
@property (nonatomic, assign) CGFloat  verticalLabelWidth;
// verticalViewSpacing 间距
@property (nonatomic, assign) CGFloat  verticalViewSpacing;
// labelToVerticalLineSpacing 垂直 分割线 和 label 间距
@property (nonatomic, assign) CGFloat  labelToVerticalLineSpacing;
// curveGraphViewTopEdgeSpacing 顶部 间距
@property (nonatomic, assign) CGFloat  histogramViewTopEdgeSpacing;
// curveGraphBackgroundViewWidth  宽度
@property (nonatomic, assign) CGFloat  histogramBackgroundViewWidth;
// verticalTextArray
@property (nonatomic, strong) NSArray <NSString *> *verticalTextArray;
// horizontalTextArray
@property (nonatomic, strong) NSArray <NSString *> *horizontalTextArray;
// horizontalLabelToHistogramViewSpacing 底部 label 间距
@property (nonatomic, assign) CGFloat  horizontalLabelToHistogramViewSpacing;
// hideVerticalFirstLabel 隐藏 垂直 第一个 属性
@property (nonatomic, assign, getter=isHideVerticalFirstLabel) BOOL  hideVerticalFirstLabel;
// controlsPropertyStyle 控件 基本 属性
@property (nonatomic, strong) FJFHistogramBackgroundControlsProperty *controlsPropertyStyle;
@end

五. 段圆环

效果如下:

段圆环.gif

段圆环配置信息相对比较简单:

@interface FJFSegmentCircleViewStyle : NSObject
// lineWidth
@property (nonatomic, assign) CGFloat  lineWidth;
// isClockwise (是否顺时针)
@property (nonatomic, assign) BOOL  isClockwise;
// strokeColorArray
@property (nonatomic, strong) NSArray <UIColor *>*strokeColorArray;
// startPositionType
@property (nonatomic, assign) FJFSegmentCircleViewStartPositionType startPositionType;
// strokePositionModelArray
@property (nonatomic, strong) NSArray <FJFSegmentCircleViewStrokeModel *> *strokePositionModelArray;
@end

六: 标题栏:

效果如下:

标题栏.gif

标题滚动栏的配置参数如下:

@interface FJFSegmentTitleCellStyle : NSObject
// cellTitle
@property (nonatomic, strong) NSString *cellTitle;
// textColor
@property (nonatomic, strong) UIColor *textColor;
// textFont
@property (nonatomic, strong) UIFont *textFont;
// textSelectedColor
@property (nonatomic, strong) UIColor *textSelectedColor;
// textSelectedFont
@property (nonatomic, strong) UIFont *textSelectedFont;
// backgroundColor
@property (nonatomic, strong) UIColor *backgroundColor;
// selected
@property (nonatomic, assign, getter=isSelected) BOOL  selected;
// cellWidth
@property (nonatomic, assign) CGFloat  cellWidth;
@end

@interface FJFSegmentTitleViewStyle : NSObject
// viewWidth
@property (nonatomic, assign) CGFloat  viewWidth;
// viewHeight
@property (nonatomic, assign) CGFloat  viewHeight;
// cellWidth (固定宽度)
@property (nonatomic, assign) CGFloat  cellWidth;
// viewBorderColor
@property (nonatomic, strong) UIColor *viewBorderColor;
// vewBorderWidth
@property (nonatomic, assign) CGFloat  viewBorderWidth;
// selectedIndex
@property (nonatomic, assign) NSInteger  selectedIndex;
// viewCornerRadius 圆角
@property (nonatomic, assign) CGFloat viewCornerRadius;
// sectionLeftEdgeSpacing
@property (nonatomic, assign) CGFloat  sectionLeftEdgeSpacing;
// sectionRightEdgeSpacing
@property (nonatomic, assign) CGFloat  sectionRightEdgeSpacing;
// innerCellSpacing
@property (nonatomic, assign) CGFloat innerCellSpacing;
// backgroundViewColor
@property (nonatomic, strong) UIColor *backgroundViewColor;
// indicatorViewBackgroundColor
@property (nonatomic, strong) UIColor  *indicatorViewBackgroundColor;
// indicatorViewBorderColor
@property (nonatomic, strong) UIColor *indicatorViewBorderColor;
// indicatorViewBorderWidth
@property (nonatomic, assign) CGFloat  indicatorViewBorderWidth;
// indicatorViewCornerRadius 圆角
@property (nonatomic, assign) CGFloat indicatorViewCornerRadius;
// indicatorViewHeight
@property (nonatomic, assign) CGFloat  indicatorViewHeight;
// indicatorViewHorizontalEdgeSpacing
@property (nonatomic, assign) CGFloat  indicatorViewHorizontalEdgeSpacing;
// cellStyleArray
@property (nonatomic, strong) NSArray <FJFSegmentTitleCellStyle *>*cellStyleArray;
// divideEquallyViewWidth 平分 长度
@property (nonatomic, assign, getter=isDivideEquallyViewWidth) BOOL  divideEquallyViewWidth;
@end

七.渐变圆环

渐变圆环.gif

配置信息:

@interface FJFGradualCircleShapeViewStyle : NSObject
// lineWidth
@property (nonatomic, assign) CGFloat  lineWidth;
// isClockwise (是否顺时针)
@property (nonatomic, assign) BOOL  isClockwise;
// gradientColorArray
@property (nonatomic, strong) NSArray <UIColor *>*gradientColorArray;
@end