【Android】進捗率を表現するための円形ゲージなViewを公開しました

2018/2/28、スタディプラス株式会社を退社しました。
2019/11/5、リポジトリが消えていたので、近々書き直します。

---

こんにちは、りんごのマークをこよなく愛すmayahiroです。
りんごのマークをこよなく愛していますが、なぜかポジションはAndroidアプリエンジニアです。

~~さて、この度、[Studyplus](https://studyplus.jp)の[Androidアプリ](https://play.google.com/store/apps/details?id=jp.studyplus.android.app&hl=ja)で使っている円形ゲージViewを[公開](https://github.com/studyplus/GaugeSampleApplication)することにいたしました。~~

~~https://github.com/studyplus/GaugeSampleApplication~~

## 特徴

1.円形のゲージをお手軽に表示できます。（~~[GaugeView.java](https://github.com/studyplus/GaugeSampleApplication/blob/master/app/src/main/java/com/mayahiro/gaugesampleapplication/GaugeView.java)~~）

|単色表示|グラデーション表示|リミットブレイク表示|
|---|---|---|
|![単色.png](https://qiita-image-store.s3.amazonaws.com/0/69858/ddc5918c-e4a3-c984-dee8-62391b849c7f.png)|![グラデーション.png](https://qiita-image-store.s3.amazonaws.com/0/69858/933bda18-17ba-a12e-06cd-3c01d920763e.png)|![リミットブレイク.png](https://qiita-image-store.s3.amazonaws.com/0/69858/34fd8227-f4d5-7b86-9f9d-b5f4c9e957a5.png)|

※リミットブレイク：　個人的に100%を超えた状態をそう呼んでいます

2.リスト表示で使う用にシンプルなデザインも用意しました。（~~[SimpleGaugeView.java](https://github.com/studyplus/GaugeSampleApplication/blob/master/app/src/main/java/com/mayahiro/gaugesampleapplication/SimpleGaugeView.java)~~）

|単色表示|グラデーション表示|リミットブレイク表示|
|---|---|---|
|![単色シンプル.png](https://qiita-image-store.s3.amazonaws.com/0/69858/c34f972f-7604-b3ba-eab3-e39147fe835f.png)|![グラデーションシンプル.png](https://qiita-image-store.s3.amazonaws.com/0/69858/66126f5a-b804-821e-c6c5-f03fb6e1c23c.png)|![リミットブレイクシンプル.png](https://qiita-image-store.s3.amazonaws.com/0/69858/b4c5c36d-0f9c-9e97-6e24-d712be061257.png)|

3.もちろんアニメーションします。

|単色アニメーション|複数色アニメーション|リミットブレイクアニメーション|
|---|---|---|
|![単色アニメーション.gif](https://qiita-image-store.s3.amazonaws.com/0/69858/ebfacb06-6a4d-1488-c0b8-b1d2344a8c11.gif)|![グラデーションアニメーション.gif](https://qiita-image-store.s3.amazonaws.com/0/69858/e4d8aa99-c4b5-39c4-14bf-c5db694631ef.gif)|![リミットブレイクアニメーション.gif](https://qiita-image-store.s3.amazonaws.com/0/69858/146be1e0-26ab-6b1b-ff5b-6f4f84d92514.gif)|

※　シンプルデザインな方はしません。
※　タップで何度もアニメーションを堪能できます。

## 使い方

1. 適当にlayoutに配置

	``` xml
	<com.mayahiro.gaugesampleapplication.GaugeView
	                android:id="@+id/gauge1"
	                android:layout_width="match_parent"
	                android:layout_height="300dp"
	                android:layout_margin="16dp" />
	```
	``` xml
	<com.mayahiro.gaugesampleapplication.SimpleGaugeView
	                android:id="@+id/simple_gauge1"
	                android:layout_width="match_parent"
	                android:layout_height="300dp"
	                android:layout_margin="16dp" />
	```

2. 適当にデータをセット

	``` java
	GaugeView gauge1View = (GaugeView) findViewById(R.id.gauge1);
	gauge1View.setData(90, "%", ContextCompat.getColor(this, R.color.color_90), 90, true);
	
	SimpleGaugeView simpleGauge1View = (SimpleGaugeView) findViewById(R.id.simple_gauge1);
	simpleGauge1View.setData(90, "%", ContextCompat.getColor(this, R.color.color_90));
	```

3. ~~詳細については[サンプルプロジェクト](https://github.com/studyplus/GaugeSampleApplication)をご覧ください。~~

~~https://github.com/studyplus/GaugeSampleApplication~~

## 最後に

ファイル1つでお手軽に使えるようになっているので、進捗率を表示したくなった際には、ぜひお使いください。
ご意見、ご感想、Issue、Pull request等々、お待ちしております。