Skip to content
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.

Sign up for GitHub

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

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

Merged
merged 12 commits into from
Oct 29, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
777caba
fix color setters and improve the update process
bradmartin Oct 28, 2020
3895c8b
roll back color prop changes
bradmartin Oct 28, 2020
bcbc03a
bump verison
bradmartin Oct 28, 2020
23d8cb7
remove comments
bradmartin Oct 28, 2020
4c04415
fix typo
bradmartin Oct 28, 2020
0f112af
clean up the css props work
bradmartin Oct 28, 2020
df7cbdc
bump
bradmartin Oct 28, 2020
54bdc85
improve android circle
bradmartin Oct 29, 2020
51f299d
Merge branch 'master' into master
bradmartin Oct 29, 2020
159e925
remove logs
bradmartin Oct 29, 2020
442593c
Merge branch 'master' of https://github.com/bradmartin/plugins
bradmartin Oct 29, 2020
c3f7d1b
bump
bradmartin Oct 29, 2020
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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