くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

SmoothProgressBarを使って処理中を表現する

ActionBarの下に細いProgressBarを表示して、読み込み中や処理中を表現しているアプリがある。

Material Design前のGmailとか、PullToRefreshとかであるような感じ

実はいい感じのプログレスバーを表示するライブラリ「SmoothProgressBar」を使っているらしい!

https://raw.githubusercontent.com/castorflex/SmoothProgressBar/master/screenshots/SPB_sample.gif

それではそれを使いたいと思ったので、SmoothProgressBarを導入した時の備忘録

自前でやる方法もあるけど、結構めんどくさい感じなので却下しました。。。

build.gradleにDependencyを追加

以下の感じで、dependenciesに追加して、

apply plugin: 'com.android.application'
・・・
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.github.castorflex.smoothprogressbar:library:1.0.0'
}
  • GitHubのReadMe.mdには、SNAPSHOTで例が書かれているけどうまく取得できなかった。。。

Layout XMLはこんな感じ

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <fr.castorflex.android.smoothprogressbar.SmoothProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:minHeight="3dp"
        android:visibility="gone"
        />
    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start Progress Bar"/>
    <Button
        android:id="@+id/btn_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Stop Progress Bar"/>

</RelativeLayout>

Activity

public class MainActivity extends Activity {
    @InjectView(R.id.progress_bar)
    SmoothProgressBar mProgressBar;
    
    @OnClick(R.id.btn_start)
    void onClickStartProgress() {
        mProgressBar.setVisibility(View.VISIBLE);
        mProgressBar.progressiveStart();
    }

    @OnClick(R.id.btn_stop)
    void onClickStopProgress() {
        mProgressBar.progressiveStop();
        mProgressBar.setVisibility(View.GONE);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
    }
}

btn_startを押すとProgressBarを開始して、btn_stopを押すと止まる

XMLでVisibilityをGONEに設定したので、ボタンを押すとProgressBarを合わせて、Visibilityを変更してます

@InjectView@OnClickはButterKnifeの書き方。詳しくは前の記事で。

以上!!

[PR] めもらばではこんなあぷりを作っています!

参考にしたサイト様