วิธีการปรับแต่งแถบความคืบหน้าใน Android

160

ฉันกำลังทำงานบนแอปที่ฉันต้องการที่จะแสดงหนึ่งProgressBarแต่ฉันต้องการที่จะเปลี่ยนค่าเริ่มต้นของ ProgressBarAndroid

ดังนั้นฉันจะกำหนดเองได้ProgressBarอย่างไร

ฉันต้องการกราฟิกและแอนิเมชันสำหรับสิ่งนั้นหรือไม่?

ฉันอ่านโพสต์ต่อไปนี้ แต่ไม่สามารถใช้งานได้:

Custom Progress bar Android

android  android-progressbar 
— Shubham Suryawanshi
แหล่งที่มา
1
ลองแถบความคืบหน้าที่กำหนดเองนี้คือProgressWheel
— neeraj kirola

คำตอบ:

300

การปรับแต่ง a ProgressBarต้องกำหนดคุณสมบัติหรือคุณสมบัติสำหรับพื้นหลังและความคืบหน้าของแถบความคืบหน้าของคุณ

สร้างไฟล์ XML ชื่อcustomprogressbar.xmlในres->drawableโฟลเดอร์ของคุณ:

custom_progressbar.xml

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

    <!-- Define the background properties like color etc -->
    <item android:id="@android:id/background">
    <shape>
        <gradient
                android:startColor="#000001"
                android:centerColor="#0b131e"
                android:centerY="1.0"
                android:endColor="#0d1522"
                android:angle="270"
        />
    </shape>
   </item>

  <!-- Define the progress properties like start color, end color etc -->
  <item android:id="@android:id/progress">
    <clip>
        <shape>
            <gradient
                android:startColor="#007A00"
                android:centerColor="#007A00"
                android:centerY="1.0"
                android:endColor="#06101d"
                android:angle="270"
            />
        </shape>
    </clip>
    </item>
</layer-list>

ตอนนี้คุณต้องตั้งค่าprogressDrawableคุณสมบัติเป็นcustomprogressbar.xml(drawable)

คุณสามารถทำได้ในไฟล์ XML หรือในกิจกรรม (ในเวลาทำงาน)

ทำสิ่งต่อไปนี้ใน XML ของคุณ:

<ProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    android:progressDrawable="@drawable/custom_progressbar"         
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

ณ รันไทม์ทำสิ่งต่อไปนี้

// Get the Drawable custom_progressbar                     
    Drawable draw=res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawable
    progressBar.setProgressDrawable(draw);

แก้ไข: เค้าโครง xml ที่ถูกต้อง

— Martijn Pieters
แหล่งที่มา
5
res คืออะไร? res.getDrawable ไม่พบ
— hiren gamit
1
@hirengamit res คือ "ทรัพยากร" ข้อผิดพลาดของคุณอาจบ่งบอกว่าไม่พบไฟล์ "C: /whereYourProjectFolderIs/res/drawable/customprogressbar.xml" <- ไม่พบ หากมีให้ลอง "ล้าง" โครงการของคุณมันจะสร้างไฟล์ทรัพยากรใหม่
— K - ความเป็นพิษใน SO กำลังเพิ่มขึ้น
5
@Johnson res หมายถึง Resource หากคุณแทนที่บรรทัดเป็น Drawable draw = getResources (). getDrawable (R.drawable.custom_progressbar); มันควรจะทำงาน
— Erwin Lengkeek
7
เหตุใดจึงจำเป็นต้องตั้งค่าความคืบหน้า drawable ที่รันไทม์เมื่อสามารถทำได้ในไฟล์ xml
— Nicolás Arias
1
@ NicolásAriasบางทีคุณต้องการที่จะเปลี่ยนรูปลักษณ์ของมันด้วยเหตุผลใด ๆ ที่เป็นไปได้ (เช่นเปลี่ยนจากสีเขียวในขณะที่ "รอการตอบสนอง" เป็นสีแดงเช่น "รอการจัดการข้อผิดพลาด")
— ocramot
35

ในกรณีที่ซับซ้อนProgressBarเช่นนี้

ป้อนคำอธิบายรูปภาพที่นี่

ClipDrawableใช้

หมายเหตุ: ฉันไม่ได้ใช้ProgressBarที่นี่ในตัวอย่างนี้ ผมเคยประสบความสำเร็จนี้ใช้ClipDrawableAnimationโดยการตัดภาพด้วย

A Drawableที่คลิปอื่นDrawableตามDrawableค่าระดับปัจจุบันของนี้ คุณสามารถควบคุมจำนวนเด็กที่Drawableได้รับการตัดในความกว้างและความสูงตามระดับรวมถึงแรงโน้มถ่วงในการควบคุมตำแหน่งที่วางไว้ในภาชนะโดยรวม Most often used to implement things like progress barsโดยการเพิ่มระดับ drawable setLevel()ด้วย

หมายเหตุ: drawable จะถูกตัดอย่างสมบูรณ์และมองไม่เห็นเมื่อระดับเป็น 0 และเปิดเผยอย่างเต็มที่เมื่อระดับคือ 10,000

CustomProgressBarผมเคยใช้นี้สองภาพที่จะทำให้เรื่องนี้

scall.png

scall.png

ballon_progress.png

ballon_progress.png

MainActivity.java

public class MainActivity extends ActionBarActivity {

private EditText etPercent;
private ClipDrawable mImageDrawable;

// a field in your class
private int mLevel = 0;
private int fromLevel = 0;
private int toLevel = 0;

public static final int MAX_LEVEL = 10000;
public static final int LEVEL_DIFF = 100;
public static final int DELAY = 30;

private Handler mUpHandler = new Handler();
private Runnable animateUpImage = new Runnable() {

    @Override
    public void run() {
        doTheUpAnimation(fromLevel, toLevel);
    }
};

private Handler mDownHandler = new Handler();
private Runnable animateDownImage = new Runnable() {

    @Override
    public void run() {
        doTheDownAnimation(fromLevel, toLevel);
    }
};

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

    etPercent = (EditText) findViewById(R.id.etPercent);

    ImageView img = (ImageView) findViewById(R.id.imageView1);
    mImageDrawable = (ClipDrawable) img.getDrawable();
    mImageDrawable.setLevel(0);
}

private void doTheUpAnimation(int fromLevel, int toLevel) {
    mLevel += LEVEL_DIFF;
    mImageDrawable.setLevel(mLevel);
    if (mLevel <= toLevel) {
        mUpHandler.postDelayed(animateUpImage, DELAY);
    } else {
        mUpHandler.removeCallbacks(animateUpImage);
        MainActivity.this.fromLevel = toLevel;
    }
}

private void doTheDownAnimation(int fromLevel, int toLevel) {
    mLevel -= LEVEL_DIFF;
    mImageDrawable.setLevel(mLevel);
    if (mLevel >= toLevel) {
        mDownHandler.postDelayed(animateDownImage, DELAY);
    } else {
        mDownHandler.removeCallbacks(animateDownImage);
        MainActivity.this.fromLevel = toLevel;
    }
}

public void onClickOk(View v) {
    int temp_level = ((Integer.parseInt(etPercent.getText().toString())) * MAX_LEVEL) / 100;

    if (toLevel == temp_level || temp_level > MAX_LEVEL) {
        return;
    }
    toLevel = (temp_level <= MAX_LEVEL) ? temp_level : toLevel;
    if (toLevel > fromLevel) {
        // cancel previous process first
        mDownHandler.removeCallbacks(animateDownImage);
        MainActivity.this.fromLevel = toLevel;

        mUpHandler.post(animateUpImage);
    } else {
        // cancel previous process first
        mUpHandler.removeCallbacks(animateUpImage);
        MainActivity.this.fromLevel = toLevel;

        mDownHandler.post(animateDownImage);
    }
}
}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/etPercent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:inputType="number"
        android:maxLength="3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ok"
        android:onClick="onClickOk" />

</LinearLayout>

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/scall" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/clip_source" />

</FrameLayout>

clip_source.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="vertical"
    android:drawable="@drawable/ballon_progress"
    android:gravity="bottom" />

ในกรณีที่ซับซ้อนHorizontalProgressBarเพียงแค่เปลี่ยนcliporientationในclip_source.xmlเช่นนี้

android:clipOrientation="horizontal"

คุณสามารถดาวน์โหลดสาธิตสมบูรณ์จากที่นี่

— Jaydipsinh Zala
แหล่งที่มา
รหัสน่าสนใจจริง ๆ แต่ให้ข้อยกเว้น nullpointer กับวัตถุ img:
— Parth Anjaria
ค้นหา Id ของวิดเจ็ตข้อยกเว้นของคุณจะถูกแก้ไข
— Vikash Sharma
34

ใน xml ของคุณ

<ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="@style/CustomProgressBar" 
        android:layout_margin="5dip" />

และในres/values/styles.xml:

<resources> 
        <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>       
    <style name="AppTheme" parent="android:Theme.Light" />
</resources>

และcustom_progress_bar_horizontalเป็น xml ที่เก็บไว้ในโฟลเดอร์ drawable ซึ่งกำหนดแถบความคืบหน้าของคุณเอง สำหรับรายละเอียดเพิ่มเติมดูบล็อกนี้

ฉันหวังว่านี่จะช่วยคุณได้

— Gunaseelan
แหล่งที่มา
10

การปรับแต่งสีของ ProgressBar คือในกรณีของประเภทสปินเนอร์ต้องการไฟล์ xml และรหัสเริ่มต้นในไฟล์ Java ที่เกี่ยวข้อง

สร้างไฟล์ xml และตั้งชื่อเป็น progressbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    tools:context=".Radio_Activity" >

    <LinearLayout
        android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ProgressBar
            android:id="@+id/spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </ProgressBar>
    </LinearLayout>

</LinearLayout>

ใช้รหัสต่อไปนี้เพื่อรับสปินเนอร์ในสีที่คาดหวังที่หลากหลายที่นี่เราใช้ hexcode เพื่อแสดงสปินเนอร์ในสีฟ้า

Progressbar spinner = (ProgressBar) progrees.findViewById(R.id.spinner);
spinner.getIndeterminateDrawable().setColorFilter(Color.parseColor("#80DAEB"),
                android.graphics.PorterDuff.Mode.MULTIPLY);
— user4125837
แหล่งที่มา
มีวิธีใดบ้างในการตั้งค่าตัวกรองสีนี้สำหรับแอปทั้งหมดฉันหมายถึงในแถบความคืบหน้าทุกครั้งเช่นตั้งค่าในรูปแบบหรือ sth หรือไม่ ขอบคุณ
— Hugo
8

แถบความคืบหน้ามีสองประเภทที่เรียกว่าบาร์ความคืบหน้าแน่นอน (ช่วงเวลาคงที่) และแถบความคืบหน้าไม่แน่นอน (ช่วงเวลาที่ไม่รู้จัก)

Drawables สำหรับแถบความคืบหน้าทั้งสองประเภทสามารถปรับแต่งได้โดยการกำหนด drawable เป็นทรัพยากร xml คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบแถบความคืบหน้าและการปรับแต่งที่http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples

การปรับแต่งแถบความคืบหน้าคงที่หรือแนวนอน:

ด้านล่าง 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"
        android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle"
            android:tint="?attr/colorControlNormal">
            <corners android:radius="8dp"/>
            <size android:height="20dp" />
            <solid android:color="#90caf9" />
        </shape>
    </item>
    <item android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle"
                android:tint="?attr/colorControlActivated">
                <corners android:radius="8dp"/>
                <size android:height="20dp" />
                <solid android:color="#b9f6ca" />
            </shape>
        </scale>
    </item>
</layer-list>

การกำหนดแถบความคืบหน้าโดยไม่กำหนดเอง

ด้านล่าง xml เป็นทรัพยากรที่ใช้วาดได้สำหรับการปรับแต่งแถบความคืบหน้าแบบวงกลม 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/progress"
        android:top="16dp"
        android:bottom="16dp">
                <rotate
                    android:fromDegrees="45"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="315">
                    <shape android:shape="rectangle">
                        <size
                            android:width="80dp"
                            android:height="80dp" />
                        <stroke
                            android:width="6dp"
                            android:color="#b71c1c" />
                    </shape>
                </rotate>           
    </item>
</layer-list>
— Arnav Rao
แหล่งที่มา
5

การสร้าง ProgressBar แบบกำหนดเองเช่น hotstar

  1. เพิ่มแถบความคืบหน้าในไฟล์เลย์เอาต์แล้วตั้งค่า indeterminateDrawable ด้วยไฟล์ drawable

activity_main.xml

<ProgressBar
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/player_progressbar"
    android:indeterminateDrawable="@drawable/custom_progress_bar"
    />
  1. สร้างไฟล์ xml ใหม่ใน res \ drawable

custom_progress_bar.xml

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

    <shape
        android:innerRadius="35dp"
        android:shape="ring"
        android:thickness="3dp"
        android:useLevel="false" >
       <size
           android:height="80dp"
           android:width="80dp" />

       <gradient
            android:centerColor="#80b7b4b2"
            android:centerY="0.5"
            android:endColor="#f4eef0"
            android:startColor="#00938c87"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>
— Rajesh Shetty
แหล่งที่มา
4

วิธีที่ง่ายที่สุดในการสร้างปรับแต่งแถบความคืบหน้าใน Android:

  1. เริ่มต้นและแสดงข้อความโต้ตอบ:

    MyProgressDialog progressdialog = new MyProgressDialog(getActivity());
progressdialog.show();

  2. สร้างวิธีการ:

    public class MyProgressDialog extends AlertDialog {
      public MyProgressDialog(Context context) {
          super(context);
          getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
      }

      @Override
      public void show() {
          super.show();
          setContentView(R.layout.dialog_progress);
      }
}

  3. สร้าง XML เลย์เอาต์:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@android:color/transparent"
  android:clickable="true">

    <RelativeLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerInParent="true">

      <ProgressBar
         android:id="@+id/progressbarr"
         android:layout_width="@dimen/eightfive"
         android:layout_height="@dimen/eightfive"
         android:layout_centerInParent="true"
        android:indeterminateDrawable="@drawable/progresscustombg" />

      <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerHorizontal="true"
         android:layout_below="@+id/progressbarr"
         android:layout_marginTop="@dimen/_3sdp"
         android:textColor="@color/white"
         android:text="Please wait"/>
    </RelativeLayout>
</RelativeLayout>

  4. สร้างรูปร่าง progresscustombg.xml และวาง res / drawable: 

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

    <shape
       android:innerRadiusRatio="3"
       android:shape="ring"
       android:thicknessRatio="20"
       android:useLevel="false" >
        <size
            android:height="@dimen/eightfive"
            android:width="@dimen/eightfive" />

        <gradient
            android:centerY="0.50"
            android:endColor="@color/color_green_icash"
            android:startColor="#FFFFFF"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>
— Jaydeep Dobariya
แหล่งที่มา
3

สำหรับการใช้ drawable ที่กำหนดเอง:

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

(เพิ่มภายใต้ res / drawable progress.xml) my_drawableอาจเป็น xml, png

จากนั้นในการใช้เลย์เอาต์ของคุณ

<ProgressBar
        android:id="@+id/progressBar"
        android:indeterminateDrawable="@drawable/progress_circle"
...
/>
— Evgenii Vorobei
แหล่งที่มา
1
นี่คือคำตอบที่ดีที่สุดที่ฉันเคยเห็น ทำงานเหมือนจับใจ ขอบคุณ
— Rajeshwar
1

หากคุณต้องการทำสิ่งนี้ในโค้ดนี่คือตัวอย่าง:

pd = new ProgressDialog(MainActivity.this);
pd.setProgressStyle(ProgressDialog.STYLE_SPINNER);
pd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
pd.getWindow().setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
TextView tv = new TextView(this);
tv.setTextColor(Color.WHITE);
tv.setTextSize(20);
tv.setText("Waiting...");
pd.setCustomTitle(tv);
pd.setIndeterminate(true);
pd.show();

การใช้ TextView ให้ตัวเลือกในการเปลี่ยนสีขนาดและแบบอักษรของข้อความของคุณ มิฉะนั้นคุณสามารถเรียกใช้ setMessage () ได้ตามปกติ

— Flot2011
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.