web-dev-qa-db-ja.com

android）の不確定な水平プログレスバーのスタイリング

確定プログレスバーのスタイリングは簡単です。それを実現するためのチュートリアルはたくさんあります。これは私が使用しているものです：

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="match_parent"
    Android:layout_height="8dp"
    Android:background="@drawable/progress_background"
    Android:progressDrawable="@drawable/progress"
    Android:id="@+id/progressBar" />

ドローアブルprogress_background.xml：

    <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@Android:id/progress">
        <clip>
            <shape>
                <solid Android:color="@color/colorAccent" />
                <corners Android:radius="4dp" />
            </shape>
        </clip>
    </item>
</layer-list>

次のようになります。

enter image description here

しかし、まだ進捗がない場合は、不確定なものを使いたいと思います。だから私は試しました：

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        Android:layout_width="match_parent"
        Android:layout_height="8dp"
        Android:background="@drawable/progress_background"
        Android:progressDrawable="@drawable/progress"
        Android:indeterminateTint="@color/colorAccent"
        Android:indeterminateTintMode="src_in"
        Android:indeterminate="true"
        Android:id="@+id/progressBar" />

しかし、不確定な進行はバーの高さにまでは及びません。

enter image description here

ドローアブルファイルを使用してスタイルを設定しようとしましたが、確定したプログレスバーが壊れているように見えました（0から100まで繰り返し入力）。

必要な不確定なプログレスバーは通常のバーのように見えますが、高さは8dpで、角は丸みを帯びています。

androidandroid-stylesandroid-progressbar
8
Peter O.

デフォルトの不確定なプログレスバーアニメーションは、9パッチ以外のpngを使用します。そのため、8dpの高さのプログレスバーに伸ばすことはできません。カスタムアニメーションでAndroid:indeterminateDrawableを追加する必要があります。

<animation-list
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:oneshot="false">
    <item Android:drawable="@drawable/progressbar_indeterminate1" Android:duration="50" />
    <item Android:drawable="@drawable/progressbar_indeterminate2" Android:duration="50" />
    <item Android:drawable="@drawable/progressbar_indeterminate3" Android:duration="50" />
    ...
    <item Android:drawable="@drawable/progressbar_indeterminateX" Android:duration="50" />
</animation-list>

次に、ドローアブルを作成して、次のようにアニメーション化します（xml、image、または9パッチの場合があります）。

アニメーションフレーム1

アニメーションフレーム2

Android（api21 +）のバージョンでは、不確定なプログレスバーにAnimatedVectorDrawableを使用することはありません。

4
Alexandr Shutko

多くの人がこの投稿を見ているのを見たので、編集して例を共有する必要があると思いました。

注（この例は完全ではありません。まだ進行中ですが、出発点だと思います）

GitHub： Githubの例

この例の重要な部分は次のとおりです。ドローアブルでxmlファイルcustom_progress_bar_horizo​​ntal.xmlを作成し、以下のコンテンツを追加します。

<?xml version="1.0" encoding="UTF-8"?>

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:id="@Android:id/background">
        <shape>
            <padding
                Android:bottom="3dip"
                Android:top="3dip"
                Android:left="3dip"
                Android:right="3dip"/>
            <corners
                Android:radius="5dip" />
            <gradient
                Android:startColor="#2a2b2f"
                Android:centerColor="#2a2b2f"
                Android:centerY="0.50"
                Android:endColor="#2a2b2f"
                Android:angle="270" />
        </shape>
    </item>
    <item
        Android:id="@Android:id/progress">
        <clip>
            <shape>
                <corners
                    Android:radius="5dip" />
                <gradient
                    Android:startColor="#ff0e75af"
                    Android:endColor="#ff1997e1"
                    Android:angle="90" />
            </shape>
        </clip>
    </item>
</layer-list>

次のコードをstyles.xmlに追加します

<style name="CustomProgressBar" parent="Android:Widget.ProgressBar.Horizontal">
    <item name="Android:indeterminateOnly">false</item>
    <item name="Android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
    <item name="Android:minHeight">10dip</item>
    <item name="Android:maxHeight">20dip</item>
</style>

アクティビティレイアウトにスタイルを追加したら、次を追加します。

 <ProgressBar
        Android:id="@+id/customProgress"
        style="@style/CustomProgressBar"
        Android:layout_width="match_parent"/>

ProgressBarクラスを拡張し、そこで変更を加える必要があるため、フレーム内の進行状況は少し注意が必要です。

ここにいくつかの例を残し、それらをgithubプロジェクトに追加するときに通知します。

進行状況を自分のやり方で無効にしたい場合の良い例： NumberProgressBar

その他のプログレスバーの例：

カスタムプログレスバー1

カスタムプログレスバー2

詳細については、こちらをご覧ください。 Androidの水平プログレスバー？

2
Harshad