ProgressBar / ProgressDialog에 대한 사용자 정의 드로어 블


128

Google이 제공 한 제한된 문서를 읽으면 ProgressBar / ProgressDialog의 모양을 DrawBar의 style 속성에 할당하여 새 스타일을 만들면 간단하게 변경할 수 있습니다. 그러나 이것이 제대로 작동하도록 할 수는 없습니다. 여기까지 내가 한 일이 있습니다.

이런 모양을 만들었습니다 (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>

그러나 여전히 이전과 동일한 드로어 블을 보여줍니다. 내가 뭘 잘못하고 있죠?


방금 샘플을 탐색하는 중이었고 이것을 읽은 후 당신을 발견 했습니다 . 잘하면 그것은 당신의 문제를 해결합니다.
reuscam

도형 / 그라데이션 / 애니메이션을 만드는 방법을 알고있었습니다. 위에서 만든 것은 귀하가 참조하는 게시물을 기반으로합니다 (매우 고르고 느리게 보이는 경우 약간 변경해야했습니다). 나는 "스타일"을 사용하여 이것을 달성 할 수 있기를 바랐습니다. 어쨌든 응답에 감사드립니다
Sam

진행률 표시 줄을 완전히 사용자 정의하고 정말로 화려하게 만들고 싶다면 이 블로그 게시물을 살펴보십시오 . 그것이 도움이되기를 바랍니다!
jagsaund

답변:


142

사용자 정의 진행률 표시 줄을 만드는 데 다음을 사용했습니다.

파일 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>

즐겨!


@YuliaRogovaya는 드로어 블이 클립 요소에 없기 때문에입니까? 나는 그것을 작동시킬 수 없었다. 클립 요소가 열쇠라고 생각합니다.
앤드류 와일드

2
이 작업을 수행하는 방법은 ProgressDialog무엇입니까?
Nezam

@ Nezam 나는 당신에게 정확한 코드 나 샘플을 줄 수는 없지만 이것이 당신이해야 할 일입니다. ProgressDialog에 사용자 정의 테마를 제공하십시오. 사용자 정의 테마는 진행률 표시 줄 스타일을 정의합니다.
Jona

QED

@ Jona 나는 잠시 동안 알고 있지만 어떻게이 드로어 블을 높이 작게 만들 수 있습니까 ??
leofontes

55

몇 가지 작업과 시행 착오 후에 해결책이있는 불확정 진행 대화 상자를 사용하는 데 문제가있었습니다.

먼저 진행률 대화 상자에 사용할 애니메이션을 만듭니다. 제 경우에는 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를 확장하여 드로어 블을 내부적으로 재정의 할 수는 있었지만, 내가 필요한 것에 비해 너무 복잡하여 수행하지 않았습니다.


1
"dialog.setIndeterminateDrawable ()"을 알려 주셔서 감사합니다
scottyab

대화 상자에 이미지 만 표시하여 메시지가 없지만 전체 대화 상자에서 드로어 블을 그리는 방법이 있습니까?
Diego

@Diego 나는 그것을 시도하지 않았지만 그 이유를 알지 못한다. 원하는 공간을 차지하고 가로 세로 비율이 긴 드로어 블을 사용하여 텍스트를 대화 상자에 설정하지 않았습니까?
blindstuff

40

설정을 시도하십시오.

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> 

3
드로어 블을 사용 android:drawable=하려면 회전 태그에서 도형을 제거하십시오. 마지막으로 진행률 표시 줄 질문에 답하는 사람.
MinceMan

2
색상을 설정하지만 진행률 표시 줄이 회전하지 않습니다
Crawler

회전 속도를 빠르게 조정하려면 android:toDegrees더 높은 값으로 설정할 수 있습니다. 로 설정하면 android:toDegrees="1080"회전이 3 배 증가합니다.
Levor

10

스타일은 다음과 같아야합니다.

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

6

규모에 따른 맞춤형 진행!

<?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>

5

나는 당신의 코드를 수행합니다. 나는 실행할 수 있지만 두 곳을 수정해야합니다.

  1. name="android:indeterminateDrawable" 대신에 android:progressDrawable

  2. attrs.xml 이름 수정 ---> styles.xml


# FF00FF00에 때문에 StartColor = "#의 300000ff"는 다른 색상을 수정 : 당신은 당신의 안드로이드를 수정
pengwang

0

확실하지는 않지만이 경우 경고 대화 상자에서 별도의 레이아웃 파일을 설정하고 위 코드의 일부를 사용하여 이미지 뷰의 애니메이션을 설정하여 완전한 사용자 정의 AlertDialog를 계속 사용할 수 있습니다!


0
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();
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.