कैसे सूचक की तरह परिपत्र प्रगति बार (पाई चार्ट) बनाने के लिए - एंड्रॉयड

Question

अब मैं एक क्षैतिज प्रगति बार जो ProgressBarsetProgress विधि के माध्यम से प्रोग्राम के रूप में अद्यतन किया जाता है है:

<ProgressBar 
      style="@android:style/Widget.ProgressBar.Horizontal" 
      android:layout_width="0dip" 
      android:layout_weight="1" 
      android:layout_height="20dip" 
      android:id="@+id/progressbar" 
      > 
    </ProgressBar> 

वहाँ एक रास्ता को यह प्रगति बार कन्वर्ट करने के लिए है एक सर्कल (पाई चार्ट) और प्रोग्रामेटिक रूप से प्रगति को अद्यतन करने में सक्षम होने के लिए भी?

जो मैं चाहता का उदाहरण:

Answer 1

एक परिपत्र प्रगति बार, उपयोग के लिए:

style="?android:attr/progressBarStyle" 

अधिक जानकारी यहां पाया जा सकता है: What's the meaning of android:progressBarStyle attribute in ProgressBar?

स्थापित करने के लिए के रूप में अपनी प्रगति: परिपत्र प्रगति पट्टी कताई रखेंगे। इसकी आवश्यकता होने के बाद बस इसे छुपाएं।

या आप कुछ कस्टम लागू कर सकते हैं: इसके आगे एक टेक्स्ट व्यू दिखाएं और प्रोग्रेसबार.सेट प्रोग्रेस का उपयोग करने के बजाय इसे अपडेट करें।

Step 0: setText("0%"); 
Step 1 (2 seconds later): setText("3%"); 
Step 2 (4 seconds later): setText("9%"); etc. 

Answer 2

आप एक कस्टम दृश्य (जैसे PieProgressView) या एक कस्टम Drawable (जैसे PieProgressDrawable) कर सकते हैं या तो। मैंने कस्टम व्यू दृष्टिकोण लिया लेकिन या तो पूरी तरह व्यवहार्य है।

एंड्रॉइड के ProgressView के स्रोत पर एक त्वरित रूप से एक जटिल जटिल कार्यान्वयन पैदा करता है। जाहिर है, वे अपने सभी अड्डों को ढंक रहे हैं, लेकिन आपको जटिल कुछ लिखना नहीं है। हमें वास्तव में केवल दो चीजों की आवश्यकता है:

1. वर्तमान प्रगति का ट्रैक रखने के लिए एक सदस्य।
2. वर्तमान प्रगति के आधार पर पाई खींचने का एक तरीका।

नंबर एक आसान है, बस एक सदस्य फ़ील्ड रखें जो आकर्षित करने के लिए पाई के वर्तमान प्रतिशत को ट्रैक करता है। संख्या 2 थोड़ा अधिक जटिल है, लेकिन सौभाग्य से, हम इसे मानक कैनवास ड्रा विधियों के साथ कर सकते हैं।

सुविधाजनक रूप से, एंड्रॉइड की Canvas कक्षा drawArc() विधि प्रदान करती है। आप इसका उपयोग पाई प्रभाव प्राप्त करने के लिए कर सकते हैं। हम mPercent 0 और 1 के बीच एक नाव के रूप में बुलाया एक सदस्य क्षेत्र में हमारी प्रतिशत संग्रहीत मान लिया जाये कि, एक onDraw() विधि इस प्रकार दिखाई देंगे:

@Override 
protected void onDraw(Canvas canvas) { 

    final float startAngle = 0f; 
    final float drawTo = startAngle + (mPercent * 360); 

    // Rotate the canvas around the center of the pie by 90 degrees 
    // counter clockwise so the pie stars at 12 o'clock. 
    canvas.rotate(-90f, mArea.centerX(), mArea.centerY()); 
    canvas.drawArc(mArea, startAngle, drawTo, true, mPaint); 

    // Draw inner oval and text on top of the pie (or add any other 
    // decorations such as a stroke) here.. 
    // Don't forget to rotate the canvas back if you plan to add text! 
    ... 
} 

यहाँ पूरा दृश्य एक नमूना अनुप्रयोग में कैसा दिखता है:

संपादित

पोस्टिंग के बाद से, मैं तय कर लिया है वहाँ वास्तव में कोई फिर से है जैसा कि आपको कस्टम व्यू को लागू करने की आवश्यकता है। आप वास्तव में क्या आवश्यक है करने के लिए एक खींचने योग्य और इसकी स्तर की संपत्ति का उपयोग कर सकते हैं।मैंने gist with the full drawable बनाया।

Answer 3

अपने आप को कुछ समय बचाएं और पहिया (या प्रगति संकेतक) को फिर से आविष्कार करने से पहले, जांचें कि http://github.com/Sage42/AndroidViewUtils पर आपके लिए कोई काम करता है या नहीं। बस इसे अपनी परियोजना में जोड़ें और मज़े करें। यह अनुकूलन योग्य है और गिनती या गणना करने के लिए विकल्प भी प्रदान करता है।

मैं यह जोड़ना भूल गया कि दृश्य लगभग आपके प्रश्न से नमूना छवि की तरह दिखते हैं।

Answer 4

परिपत्र प्रगति पट्टी (पाई चार्ट) बनाने के लिए कोड के इस टुकड़े को आजमाएं। क्षेत्र भरने के कितने प्रतिशत को आकर्षित करने के लिए इसे पूर्णांक मान पास करें। :)

private void circularImageBar(ImageView iv2, int i) { 

    Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888); 
    Canvas canvas = new Canvas(b); 
    Paint paint = new Paint(); 

     paint.setColor(Color.parseColor("#c4c4c4")); 
     paint.setStrokeWidth(10); 
     paint.setStyle(Paint.Style.STROKE); 
     canvas.drawCircle(150, 150, 140, paint); 
     paint.setColor(Color.parseColor("#FFDB4C")); 
     paint.setStrokeWidth(10); 
     paint.setStyle(Paint.Style.FILL); 
     final RectF oval = new RectF(); 
     paint.setStyle(Paint.Style.STROKE); 
     oval.set(10,10,290,290); 
     canvas.drawArc(oval, 270, ((i*360)/100), false, paint); 
     paint.setStrokeWidth(0);  
     paint.setTextAlign(Align.CENTER); 
     paint.setColor(Color.parseColor("#8E8E93")); 
     paint.setTextSize(140); 
     canvas.drawText(""+i, 150, 150+(paint.getTextSize()/3), paint); 
     iv2.setImageBitmap(b); 
} 

Answer 5

हालांकि यह एक पुराना सवाल है, मुझे आशा है कि यह उत्तर भविष्य के दर्शकों की सहायता कर सकता है।

बाहर इस पुस्तकालय की जाँच करें - https://github.com/lzyzsd/CircleProgress

एक सरल परिपत्र प्रगति के लिए, गतिशील या स्थिर, इस lib बिल्कुल स्पष्ट है और (स्ट्रोक की चौड़ाई की तरह आसान customizability के लिए कई गुण होते हैं, कोण, अंदर पृष्ठभूमि, पाठ रंग शुरू करते हैं, आदि)। यूआई के लिए जो ओपी हासिल करना चाहता था, यह पुस्तकालय सही होगा।