Skip to content

fix:(animated-circle) improve native setting for android #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Oct 29, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 47 additions & 44 deletions packages/animated-circle/index.android.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@ declare const at;

export class AnimatedCircle extends AnimatedCircleCommon {
private _android: any;
private _progress: number;
private _animateFrom: number;
private _progress = 0;
private _animateFrom = 0;
private _animationDuration = 1000;
private _animated: boolean;
private _maxValue = 100;
private _barColor = new Color('#3D8FF4');
private _barWidth: number;
private _barWidth;
private _rimColor = new Color('#FF5722');
private _rimWidth = 5;
private _rimWidth;
private _spinBarColor = new Color('green');
private _startAngle: number;
private _startAngle: number = 0;
private _text = '';
private _textColor = new Color('orange');
private _textSize = 8;
private _fillColor: Color;
clockwise = true;
private _fillColor = new Color('transparent');
private _clockwise = true;

constructor() {
super();
Expand All @@ -31,15 +31,22 @@ export class AnimatedCircle extends AnimatedCircleCommon {
}

initNativeView() {
this.android.setAutoTextSize(false);
this.android.setAutoTextSize(true);
this.android.setBarStrokeCap(android.graphics.Paint.Cap.ROUND);
this.android.setTextMode(at.grabner.circleprogress.TextMode.TEXT);
this.android.setShowTextWhileSpinning(true);
this.android.setTextScale(1.1);
this.android.setTextSize(300);
this.android.setUnitVisible(false);
this.android.setOuterContourSize(0);
this.android.setInnerContourSize(0);
this.android.setText(this.text);
this.android.setValueAnimated(this.progress);
this.android.setDirection(this.clockwise ? at.grabner.circleprogress.Direction.CW : at.grabner.circleprogress.Direction.CCW);
this.android.setRimWidth(this.rimWidth);
this.android.setBarWidth(this.barWidth);
if (this.rimWidth) {
// set rim width to bar width if no bar width provided
this.android.setBarWidth(this.rimWidth);
}
this.updateAnimatedCircle();
}

Expand All @@ -61,8 +68,8 @@ export class AnimatedCircle extends AnimatedCircleCommon {
}

set progress(value: number) {
this._progress = Number(value);
this.updateAnimatedCircle();
this._progress = value;
this.android?.setValueAnimated(this._progress);
}

get progress(): number {
Expand Down Expand Up @@ -97,8 +104,8 @@ export class AnimatedCircle extends AnimatedCircleCommon {
}

set maxValue(value: number) {
this._maxValue = Number(value);
this.updateAnimatedCircle();
this._maxValue = value;
this.android?.setMaxValue(this.maxValue);
}

get maxValue(): number {
Expand All @@ -108,9 +115,9 @@ export class AnimatedCircle extends AnimatedCircleCommon {
set rimColor(value: any) {
this._rimColor = value;
if (value instanceof Color) {
this.android.setRimColor(value.argb);
this.android?.setRimColor(value.argb);
} else {
this.android.setRimColor(new Color(value).argb);
this.android?.setRimColor(new Color(value).argb);
}
}

Expand All @@ -124,15 +131,15 @@ export class AnimatedCircle extends AnimatedCircleCommon {
set barColor(value: Color) {
this._barColor = value;
if (value instanceof Color) {
this.android.setBarColor([value.argb]);
this.android?.setBarColor([value.argb]);
} else {
this.android.setBarColor([new Color(value).argb]);
this.android?.setBarColor([new Color(value).argb]);
}
}

set rimWidth(value: number) {
this._rimWidth = Number(value);
this.updateAnimatedCircle();
this.android?.setRimWidth(this._rimWidth);
}

get rimWidth() {
Expand Down Expand Up @@ -166,17 +173,24 @@ export class AnimatedCircle extends AnimatedCircleCommon {
}

set startAngle(value: number) {
this._startAngle = Number(value);
this.updateAnimatedCircle();
this._startAngle = value;
this.android?.setStartAngle(this._startAngle);
}

get startAngle() {
return this._startAngle;
}

set barWidth(value: number) {
this._barWidth = Number(value);
this.updateAnimatedCircle();
this._barWidth = value;
if (this._barWidth) {
this.android?.setBarWidth(this._barWidth);
} else {
if (this._rimWidth) {
// set rim width to bar width if no bar width provided
this.android?.setBarWidth(this._rimWidth);
}
}
}

get barWidth() {
Expand All @@ -185,11 +199,11 @@ export class AnimatedCircle extends AnimatedCircleCommon {

set text(value: string) {
this._text = value;
this.updateAnimatedCircle();
this.android?.setText(this._text);
}

get text() {
return this.android.getText();
return this._text;
}

set textColor(value: string) {
Expand All @@ -206,6 +220,14 @@ export class AnimatedCircle extends AnimatedCircleCommon {
return this.android.getTextSize();
}

set clockwise(value: boolean) {
this._clockwise = value;
this.android?.setDirection(value === true ? at.grabner.circleprogress.Direction.CW : at.grabner.circleprogress.Direction.CCW);
}

get clockwise() {
return this._clockwise;
}
// CSS Properties

[rimColorProperty.setNative](value: any) {
Expand Down Expand Up @@ -249,7 +271,6 @@ export class AnimatedCircle extends AnimatedCircleCommon {

private updateAnimatedCircle(): void {
if (this.android) {
this.android.setText(this._text);
if (this.animated) {
if (this.animateFrom) {
this.android.setValueAnimated(this.animateFrom, this.progress, this.animationDuration);
Expand All @@ -263,24 +284,6 @@ export class AnimatedCircle extends AnimatedCircleCommon {
} else {
this.android.setValue(this.progress);
}
this.android.setMaxValue(this.maxValue);

if (this.startAngle) {
this.android.setStartAngle(this.startAngle);
}
if (this.barWidth) {
this.android.setBarWidth(this.barWidth);
} else {
if (this.rimWidth) {
// set rim width to bar width if no bar width provided
this.android.setBarWidth(this.rimWidth);
}
}
if (this.rimWidth) {
this.android.setRimWidth(this.rimWidth);
}

this.android.setDirection(this.clockwise ? at.grabner.circleprogress.Direction.CW : at.grabner.circleprogress.Direction.CCW);
}
}
}
1 change: 1 addition & 0 deletions packages/animated-circle/index.ios.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export class AnimatedCircle extends AnimatedCircleCommon {
this._ios.backgroundColor = new Color('#348F74').ios;
this._ios.thickness = 5;
this._label = UILabel.alloc().initWithFrame(CGRectMake(0, 0, 0, 0));
this._label.adjustsFontSizeToFitWidth = true;
this._label.textAlignment = NSTextAlignment.Center;
this._label.textColor = new Color('#3D8FF4').ios;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/animated-circle/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@nativescript/animated-circle",
"version": "1.1.3",
"version": "1.1.4",
"description": "Animated circle progress in your NativeScript applications.",
"main": "index",
"typings": "index.d.ts",
Expand Down