Có thể vẽ tùy chỉnh cho ProgressBar / ProgressDialog


128

Đọc tài liệu giới hạn mà Google đã cung cấp, tôi có cảm giác rằng có thể thay đổi giao diện (có thể vẽ) của ProgressBar / ProgressDialog bằng cách tạo một kiểu mới, gán nó cho thuộc tính kiểu của ProgressBar. Nhưng tôi không thể làm cho nó hoạt động đúng. Đây là những gì tôi đã làm cho đến nay:

Tôi đã tạo một hình dạng như thế này (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>

sau đó tạo một hình ảnh động (mp3.xml) như thế này:

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

sau đó tạo một kiểu (attrs.xml) như thế này:

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

và trong tệp chính của tôi, tôi đã đặt kiểu như thế này:

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

Nhưng nó vẫn hiển thị giống như trước đây. Tôi đang làm gì sai?


Tình cờ được duyệt mẫu và tình cờ thấy bạn sau khi đọc . Hy vọng nó giải quyết vấn đề của bạn.
reuscam

Tôi biết làm thế nào để tạo hình dạng / gradiant / hình ảnh động. Bài viết mà tôi đã tạo ở trên dựa trên bài đăng mà bạn đang đề cập đến (tôi đã phải thay đổi một chút vì nó trông rất nhảm nhí và chậm chạp). Tôi chỉ hy vọng có thể đạt được điều này bằng cách sử dụng "phong cách". Dù sao cũng cảm ơn vì đã đăng lại
Sam

Nếu bạn muốn tùy chỉnh hoàn toàn thanh tiến trình của mình và thực sự ưa thích, hãy xem bài đăng trên blog này Có thể hơi xa những gì bạn muốn hoặc có thể chỉ là những gì bạn đang tìm kiếm. Hy vọng nó giúp!
jagsaund

Câu trả lời:


142

Tôi đã sử dụng như sau để tạo một thanh tiến trình tùy chỉnh.

Tệp res/drawable/progress_bar_states.xmlkhai báo màu của các trạng thái khác nhau:

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

Và mã bên trong bố cục của bạn 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>

Thưởng thức!


@YuliaRogovaya có phải vì các drawable không có trong các phần tử clip không? Tôi cũng không thể làm cho nó hoạt động được; nghi ngờ yếu tố clip là chìa khóa.
Andrew Wyld

2
Làm thế nào để làm điều này cho một ProgressDialog?
Nezam

@Nezam Tôi không thể cung cấp cho bạn mã hoặc mẫu chính xác nhưng đây là những gì bạn cần làm. Cung cấp một chủ đề tùy chỉnh cho ProgressDialog. Chủ đề tùy chỉnh sẽ xác định kiểu thanh tiến trình.
Jona

Sẽ thật tuyệt khi nhìn thấy ảnh chụp màn hình của sự việc này
QED

@Jona Tôi biết nó đã được một lúc, nhưng làm thế nào tôi có thể làm cho cái này nhỏ hơn về chiều cao ??
leofontes

55

Tôi đã gặp một số rắc rối khi sử dụng Hộp thoại Tiến trình Không xác định với giải pháp ở đây, sau một số công việc và thử nghiệm và tôi đã làm cho nó hoạt động.

Đầu tiên, tạo hình động bạn muốn sử dụng cho Hộp thoại Tiến trình. Trong trường hợp của tôi, tôi đã sử dụng 5 hình ảnh.

../res/anim/proTHER_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>

Nơi bạn muốn hiển thị một 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();

Giải pháp này thực sự đơn giản và hiệu quả với tôi, bạn có thể mở rộng ProgressDialog và làm cho nó ghi đè lên nội dung có thể rút được, tuy nhiên, điều này thực sự quá phức tạp đối với những gì tôi cần vì vậy tôi đã không làm điều đó.


1
Cảm ơn bạn đã lưu ý "hộp thoại.setIneterminateDrawable ()"
scottyab

Có cách nào để chỉ có một hình ảnh trong hộp thoại, vì vậy không có tin nhắn, nhưng có thể vẽ trong toàn bộ hộp thoại?
Diego

@Diego Tôi chưa thử, nhưng tôi không hiểu tại sao không. Bạn đã thử sử dụng một drawable sẽ chiếm không gian bạn muốn (tức là có tỷ lệ khung hình dài) và không đặt bất kỳ văn bản nào vào Hộp thoại?
đồ mù

40

Thử cài đặt:

android:indeterminateDrawable="@drawable/progress" 

Nó làm việc cho tôi. Đây cũng là mã cho 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
Nếu bạn muốn sử dụng drawable thì chỉ cần android:drawable=trong thẻ xoay và sau đó loại bỏ hình dạng. Cuối cùng ai đó trả lời câu hỏi thanh tiến trình quay.
MinceMan

2
Nó đặt màu nhưng thanh tiến trình không quay
thập thông tin

Để nhanh chóng điều chỉnh tốc độ quay android:toDegreescó thể được đặt thành giá trị cao hơn. Đặt nó android:toDegrees="1080"sẽ tăng vòng quay trong 3 lần.
Levor

10

Phong cách của bạn sẽ trông như thế này:

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

6

Tiến độ tùy chỉnh với quy mô!

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

Tôi làm mã của bạn. Tôi có thể chạy nhưng tôi cần sửa đổi hai nơi:

  1. name="android:indeterminateDrawable" thay vì android:progressDrawable

  2. sửa đổi tên attrs.xml ---> Styles.xml


bạn sửa đổi Android của mình: startColor = "# 300000ff Phiên bản thành # FF00ff00, sửa đổi một màu khác
pengwang

0

Tôi không chắc chắn nhưng trong trường hợp này bạn vẫn có thể sử dụng AlertDialog tùy chỉnh hoàn chỉnh bằng cách đặt tệp bố cục riêng biệt trong hộp thoại cảnh báo và đặt hoạt hình cho chế độ xem hình ảnh của bạn bằng cách sử dụng một phần mã ở trên cũng nên làm điều đó!


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);
        }
    }
}

Và sau đó gọi

customProgressBar = new CustomProgressBar (Activity, true);
customProgressBar .show();
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.