web-dev-qa-db-ja.com

ProgressBar / ProgressDialogのカスタム描画可能

Googleが提供する限られたドキュメントを読んで、新しいスタイルを作成してProgressBarのスタイルプロパティに割り当てるだけで、ProgressBar/ProgressDialogの外観（描画可能）を変更できると感じています。しかし、これを正しく動作させることはできません。これが私がこれまでにしたことです。

このような形状を作成しました（mp2.xml）

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
  Android:shape="ring"
  Android:innerRadiusRatio="4"
  Android:thicknessRatio="4"
  Android:useLevel="false">
 <size Android:width="50dip" Android:height="50dip" />
 <gradient Android:type="sweep" Android:useLevel="false" Android:startColor="#300000ff" Android:centerColor="#500000ff" Android:endColor="#ff0000ff" />
</shape>

次に、次のようなアニメーション（mp3.xml）を作成しました。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:oneshot="false">
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="0" Android:toDegrees="30" Android:repeatCount="1" />
 </item>
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="30" Android:toDegrees="60" Android:repeatCount="1" />
 </item>
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="60" Android:toDegrees="90" Android:repeatCount="1" />
 </item>
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="90" Android:toDegrees="120" Android:repeatCount="1" />
 </item>
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="120" Android:toDegrees="150" Android:repeatCount="1" />
 </item>
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="150" Android:toDegrees="180" Android:repeatCount="1" />
 </item>
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="180" Android:toDegrees="210" Android:repeatCount="1" />
 </item>
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="210" Android:toDegrees="240" Android:repeatCount="1" />
 </item>
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="240" Android:toDegrees="270" Android:repeatCount="1" />
 </item>
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="270" Android:toDegrees="300" Android:repeatCount="1" />
 </item>
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="300" Android:toDegrees="330" Android:repeatCount="1" />
 </item>
 <item Android:duration="70">
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:drawable="@drawable/mp2" Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="330" Android:toDegrees="360" Android:repeatCount="1" />
 </item>
</animation-list>

次に、次のようなスタイル（attrs.xml）を作成しました。

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <style parent="@Android:style/Widget.ProgressBar" name="customProgressBar">
  <item name="Android:progressDrawable">@anim/mp3</item>
 </style>
</resources>

そして、私のmain.xmlで次のようにスタイルを設定しました：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
       Android:orientation="vertical"
       Android:layout_width="fill_parent"
       Android:layout_height="fill_parent" Android:drawingCacheQuality="high">
 <ProgressBar Android:id="@+id/ProgressBar01"
     Android:layout_width="wrap_content"
     Android:layout_height="wrap_content" style="@style/customProgressBar"/>
</LinearLayout>

ただし、以前と同じドローアブルが表示されます。私は何を間違えていますか？

androidprogress-barprogressdialog
122
Sam

カスタムプログレスバーの作成には次を使用しました。

ファイルres/drawable/progress_bar_states.xmlは、さまざまな状態の色を宣言します。

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item Android:id="@Android:id/background">
        <shape>
            <gradient
                    Android:startColor="#000001"
                    Android:centerColor="#0b131e"
                    Android:centerY="0.75"
                    Android:endColor="#0d1522"
                    Android:angle="270"
            />
        </shape>
    </item>

    <item Android:id="@Android:id/secondaryProgress">
        <clip>
            <shape>
                <gradient
                        Android:startColor="#234"
                        Android:centerColor="#234"
                        Android:centerY="0.75"
                        Android:endColor="#a24"
                        Android:angle="270"
                />
            </shape>
        </clip>
    </item>

    <item Android:id="@Android:id/progress">
        <clip>
            <shape>
                <gradient
                    Android:startColor="#144281"
                    Android:centerColor="#0b1f3c"
                    Android:centerY="0.75"
                    Android:endColor="#06101d"
                    Android:angle="270"
                />
            </shape>
        </clip>
    </item>

</layer-list>

そして、レイアウトxml内のコード：

<ProgressBar Android:id="@+id/progressBar"
    Android:progressDrawable="@drawable/progress_bar_states"
    Android:layout_width="fill_parent" Android:layout_height="8dip" 
    style="?android:attr/progressBarStyleHorizontal" 
    Android:indeterminateOnly="false" 
    Android:max="100">
</ProgressBar>

楽しい！

137
Jona

いくつかの作業と試行錯誤の後、ここでのソリューションで不確定進行ダイアログを使用するのに苦労していましたが、うまくいきました。

最初に、進捗ダイアログに使用するアニメーションを作成します。私の場合、5つの画像を使用しました。

../ res/anim/progress_dialog_icon_drawable_animation.xml：

<animation-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/icon_progress_dialog_drawable_1" Android:duration="150" />
    <item Android:drawable="@drawable/icon_progress_dialog_drawable_2" Android:duration="150" />
    <item Android:drawable="@drawable/icon_progress_dialog_drawable_3" Android:duration="150" />
    <item Android:drawable="@drawable/icon_progress_dialog_drawable_4" Android:duration="150" />
    <item Android:drawable="@drawable/icon_progress_dialog_drawable_5" Android:duration="150" />
</animation-list>

ProgressDialogを表示する場所：

dialog = new ProgressDialog(Context.this);
dialog.setIndeterminate(true);
dialog.setIndeterminateDrawable(getResources().getDrawable(R.anim.progress_dialog_icon_drawable_animation));
dialog.setMessage("Some Text");
dialog.show();

このソリューションは本当にシンプルで私にとってはうまくいきました。ProgressDialogを拡張し、内部でドロウアブルをオーバーライドすることもできますが、これは私が必要とするものに対して本当に複雑すぎたので、それをしませんでした。

54
blindstuff

設定してみてください：

Android:indeterminateDrawable="@drawable/progress"

それは私のために働いた。また、progress.xmlのコードも示します。

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:pivotX="50%" Android:pivotY="50%" Android:fromDegrees="0"
    Android:toDegrees="360">

    <shape Android:shape="ring" Android:innerRadiusRatio="3"
        Android:thicknessRatio="8" Android:useLevel="false">

        <size Android:width="48dip" Android:height="48dip" />

        <gradient Android:type="sweep" Android:useLevel="false"
            Android:startColor="#4c737373" Android:centerColor="#4c737373"
            Android:centerY="0.50" Android:endColor="#ffffd300" />

    </shape>

</rotate>
34
mudit

スタイルは次のようになります。

<style parent="@Android:style/Widget.ProgressBar" name="customProgressBar">
    <item name="Android:indeterminateDrawable">@anim/mp3</item>
</style>
10
Victor

スケールのカスタム進捗！

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item Android:duration="150">
        <scale
            Android:drawable="@drawable/face_no_smile_eyes_off"
            Android:scaleGravity="center" />
    </item>
    <item Android:duration="150">
        <scale
            Android:drawable="@drawable/face_no_smile_eyes_on"
            Android:scaleGravity="center" />
    </item>
    <item Android:duration="150">
        <scale
            Android:drawable="@drawable/face_smile_eyes_off"
            Android:scaleGravity="center" />
    </item>
    <item Android:duration="150">
        <scale
            Android:drawable="@drawable/face_smile_eyes_on"
            Android:scaleGravity="center" />
    </item>

</animation-list>
6
Dmitry

私はあなたのコードを実行します.iは実行できますが、2つの場所を変更する必要があります：

  1. name="Android:indeterminateDrawable"の代わりにAndroid:progressDrawable

  2. 名前attrs.xmlの変更---> styles.xml

5
pengwang

よくわかりませんが、この場合、アラートダイアログで個別のレイアウトファイルを設定し、上記のコードの一部を使用してイメージビューのアニメーションを設定することにより、完全にカスタマイズされたアラートダイアログを使用できます！

0
Jayshil Dave
public class CustomProgressBar {
    private RelativeLayout rl;
    private ProgressBar mProgressBar;
    private Context mContext;
    private String color__ = "#FF4081";
    private ViewGroup layout;
    public CustomProgressBar (Context context, boolean isMiddle, ViewGroup layout) {
        initProgressBar(context, isMiddle, layout);
    }

    public CustomProgressBar (Context context, boolean isMiddle) {
        try {
            layout = (ViewGroup) ((Activity) context).findViewById(Android.R.id.content).getRootView();
        } catch (Exception e) {
            e.printStackTrace();
        }
        initProgressBar(context, isMiddle, layout);
    }

    void initProgressBar(Context context, boolean isMiddle, ViewGroup layout) {
        mContext = context;
        if (layout != null) {
            int padding;
            if (isMiddle) {
                mProgressBar = new ProgressBar(context, null, Android.R.attr.progressBarStyleSmall);
                // mProgressBar.setBackgroundResource(R.drawable.pb_custom_progress);//Color.parseColor("#55000000")
                padding = context.getResources().getDimensionPixelOffset(R.dimen.padding);
            } else {
                padding = context.getResources().getDimensionPixelOffset(R.dimen.padding);
                mProgressBar = new ProgressBar(context, null, Android.R.attr.progressBarStyleSmall);
            }
            mProgressBar.setPadding(padding, padding, padding, padding);
            mProgressBar.setBackgroundResource(R.drawable.pg_back);
            mProgressBar.setIndeterminate(true);
                try {
                    color__ = AppData.getTopColor(context);//UservaluesModel.getAppSettings().getSelectedColor();
                } catch (Exception e) {
                    color__ = "#FF4081";
                }
                int color = Color.parseColor(color__);
//                color=getContrastColor(color);
//                color__ = color__.replaceAll("#", "");//R.color.colorAccent
                mProgressBar.getIndeterminateDrawable().setColorFilter(color, Android.graphics.PorterDuff.Mode.SRC_ATOP);
            } 
            }

            RelativeLayout.LayoutParams params = new
                    RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            rl = new RelativeLayout(context);
            if (!isMiddle) {
                int valueInPixels = (int) context.getResources().getDimension(R.dimen.padding);
                lp.setMargins(0, 0, 0, (int) (valueInPixels / 1.5));//(int) Utils.convertDpToPixel(valueInPixels, context));
                rl.setClickable(false);
                lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
            } else {
                rl.setGravity(Gravity.CENTER);
                rl.setClickable(true);
            }
            lp.addRule(RelativeLayout.CENTER_IN_PARENT);
            mProgressBar.setScaleY(1.55f);
            mProgressBar.setScaleX(1.55f);
            mProgressBar.setLayoutParams(lp);

            rl.addView(mProgressBar);
            layout.addView(rl, params);
        }
    }

    public void show() {
        if (mProgressBar != null)
            mProgressBar.setVisibility(View.VISIBLE);
    }

    public void hide() {
        if (mProgressBar != null) {
            rl.setClickable(false);
            mProgressBar.setVisibility(View.INVISIBLE);
        }
    }
}

そして、呼び出します

customProgressBar = new CustomProgressBar (Activity, true);
customProgressBar .show();
0
VV W