画像を読み込んでいる時、相手や自分のHPを示す時、など進捗の度合いや読み込みを示す時に、Progressbarを使うのが便利です。
今回、横長のProgressbarを使いたかったので、簡単に実装方法をまとめます。
最後に私のgithubでProgressbarのプロジェクトを公開しておきます。ご活用ください。
(2020/02/15追記)
沢山読んでいただきありがとうございます。
Kotlin版のソースコードも追記しておきました。
レイアウトを作る
<ProgressBar
android:id="@+id/ProgressBarHorizontal"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/progress_bg"
android:max="100"
android:progress="86"
android:progressDrawable="@drawable/progressbar"
/>
こんな感じでProgressbarを作成します。
横長のPrigressbarはstyle="?android:attr/progressBarStyleHorizontal"という部分で指定できます。
ですが、このままだと表示されない部分は透過されるので全体がどれくらいなのかがわかりません。
そこで、android:backgroundで背景をグレーなどにすることによって見ることができます。
背景を作りましょう。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="5dp"
android:useLevel="false">
<solid android:color="@color/blue_grey_400" />
</shape>
</layer-list>
他にもボタンを設置して、押したらバーの進捗が変わるようにしてみるといいですね。
今回は適当にandroid:onClick = "hogeButton"という形で書いてみます。
押すとバーを50%にするようにしてみます。特に深い意味はありません笑
アクティビティに処理を書く
java
public class MainActivity extends AppCompatActivity {
private ProgressBar progressBar;
private int percent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
percent = 81; //初期状態を81%にします。
progressBar = (ProgressBar)findViewById(R.id.ProgressBarHorizontal);
progressBar.setMax(100);
progressBar.setProgress(percent);
progressBar.setMin(0);
}
public void hogeButton(View v){
percent = 50;
progressBar.setProgress(percent);
}
Kotlin
class KotlinMainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
var percent = 81
ProgressBarHorizontal.max = 100
ProgressBarHorizontal.progress = percent
ProgressBarHorizontal.min = 0
hogebutton.setOnClickListener {
percent = 0
onHogeProgressChanged(percent)
}
.
.
.
これで完成です。うまく行きましたか？
アニメーションを実装する
やはりアニメーションを入れて動いた方がアプリとしてのクオリティも上がりますよね。
というわけで実装しようと思います。
アニメーション入れるだけは至って簡単
そんなに難しいことではありません。
progressBar.setProgress(percent,true);
ProgressBarHorizontal.setProgress(percent,true)
これだけなんです。()内に値を入れて、trueかflaseを入れるだけなんです。
true = アニメーションあり
flase = アニメーションなし
ObjectAnimatorを使ってもっとスムーズなアニメーションにする
setProgressのアニメーションって、結構早いんですよね。めっちゃスピーディ。
自分で指定したいなって思ったので、ObjectAnimaterクラスを作って綺麗なアニメーションにします。
public void hogeButton(View v){
percent = 50;
onHogeProgressChanged(pacent);
}
private void onHogeProgressChanged(int percentage){
Animator animation = ObjectAnimator.ofInt(progressBar,"progress",percentage);
animation.setDuration(500); // 0.5秒間でアニメーションする
animation.setInterpolator(new DecelerateInterpolator());
animation.start();
}
hogeButton.setOnClickListener {
percent = 0
onHogeProgressChanged(percent)
}
private fun onHogeProgressChanged(percentage: Int) {
val animation = ObjectAnimator.ofInt(ProgressBarHorizontal, "progress", percentage)
animation.duration = 500
animation.interpolator = DecelerateInterpolator()
animation.start()
}
こんな感じです。
setInterpolatorメソッドでDecelerateInterpolatorを指定してあげることで、変化の速さが最初は素早く動いて、どんどん減速するアニメーションができました！
いかがでしょうか？
お役に立てたなら嬉しいです。
それでは楽しいAndroidライフを！
