整理了下最近用到的关于一些图形相关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
网友评论