پروگرس بار سفارشی زیبا (آموزش) به مناسبت ولادت حضرت محمد(ص)

 کلاس مربوط به پروگرس بار:

 package fardin.saeedi.course.app.progress_bar_circle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.View;


public class CustomTimer extends View {

 // دایره های زیرین
 private Paint circlePaint1, circlePaint2;
 // نوشته داخل پروگرس بار
 private Paint TextPaint;
 // کمان در حال حرکت و کمان فاصله انداز
 private Paint arcPaint1, arcPaint2;
 // دایره های بالایی در حال حرکت
 private Paint circleFillPaint1, circleFillPaint2, circleStrokePaint1;
 // فونت اعمال به نوشته داخل پروگرس بار
 public Typeface font;
 // گرفتن عرض و ارتفاع لایه 
 float width = 0, heigth = 0;
 // ضخامت دایره ها
 float thickness1 = 0, thickness2 = 0, thickness3 = 0;
 // نقاط قرار گیری دایره های بالایی
 private float midPointX = 0, midPointY = 0;
 private float x = 0, y = 0;
 private float radius = 0, angle = 0;
 // متغییر های جهت محاسبه ی اندازه ی های دایره ها
 private float percent = 0;
 private float main = 0;
 private float spaceX = 0, spaceY = 0;
 private int percentText = 0;


 public CustomTimer(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 // ست کردن فونت
 font = Typeface.createFromAsset(context.getAssets(), "orange juice.ttf");
 initialize();
 }


 public CustomTimer(Context context, AttributeSet attrs) {
 super(context, attrs);
 // ست کردن فونت
 font = Typeface.createFromAsset(context.getAssets(), "orange juice.ttf");
 initialize();

 }


 public CustomTimer(Context context) {
 super(context);
 // ست کردن فونت
 font = Typeface.createFromAsset(context.getAssets(), "orange juice.ttf");
 initialize();

 }


 /*
 * گرفتن اندازه ی لایه
 */
 @Override
 protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
 super.onLayout(changed, left, top, right, bottom);
 width = getWidth();
 heigth = getHeight();
 }


 /*
 * گرفتن درصد برای نمایش آن در پروگرس بار و فرمول تبدیل درصد به زاویه
 */
 public void setPercent(float time) {
 percentText = (int) time;
 percent = (int) (time * 360 / 100);
 postInvalidate();
 }


 public void initialize() {

 /*
 * دایره های زیرین
 */
 circlePaint1 = new Paint();
 circlePaint1.setColor(Color.parseColor("#1e1e1e"));
 circlePaint1.setAntiAlias(true);
 circlePaint1.setStyle(Style.STROKE);

 circlePaint2 = new Paint();
 circlePaint2.setColor(Color.parseColor("#282828"));
 circlePaint2.setAntiAlias(true);
 circlePaint2.setStyle(Style.STROKE);

 /*
 * دایره های بالایی
 */
 circleFillPaint1 = new Paint();
 circleFillPaint1.setColor(Color.parseColor("#33b5e5"));
 circleFillPaint1.setAntiAlias(true);
 circleFillPaint1.setStyle(Style.FILL_AND_STROKE);

 circleFillPaint2 = new Paint();
 circleFillPaint2.setColor(Color.parseColor("#2b7995"));
 circleFillPaint2.setAntiAlias(true);
 circleFillPaint2.setStyle(Style.FILL_AND_STROKE);

 circleStrokePaint1 = new Paint();
 circleStrokePaint1.setColor(Color.parseColor("#32aad6"));
 circleStrokePaint1.setAntiAlias(true);
 circleStrokePaint1.setStyle(Style.STROKE);

 /*
 * کمان در حال حرکت و کمان فاصله انداز
 */
 arcPaint1 = new Paint();
 arcPaint1.setColor(Color.parseColor("#02c2db"));
 arcPaint1.setAntiAlias(true);
 arcPaint1.setStyle(Style.STROKE);

 arcPaint2 = new Paint();
 arcPaint2.setColor(Color.parseColor("#1e1e1e"));
 arcPaint2.setAntiAlias(true);
 arcPaint2.setStyle(Style.STROKE);

 /*
 * نوشته ی درون پروگرس بار
 */
 TextPaint = new Paint();
 TextPaint.setColor(Color.parseColor("#ffffff"));
 TextPaint.setAntiAlias(true);
 TextPaint.setStyle(Style.FILL_AND_STROKE);
 TextPaint.setTextAlign(Align.CENTER);
 TextPaint.setTypeface(font);

 }


 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);

 /*
 * محاسبه ی اینکه کدام یک از عرض و ارتفاع کوچک است که محاسبات را بر مبنای آن انجام دهیم
 * تعیین ضخامت دایره ها و کمان ها
 * محاسبه ی فاصله کناره ها دایره
 */
 if (width < heigth) {
 main = width;
 thickness1 = main / 15;
 spaceY = (heigth - main) / 2;
 spaceX = 0;
 } else {
 main = heigth;
 thickness1 = main / 15;
 spaceX = (width - main) / 2;
 spaceY = 0;
 }

 /*
 * تعیین ضخامت هر دایره و کمان
 */
 thickness2 = thickness1 * 0.25f;
 thickness3 = thickness1 * 0.3f;

 circlePaint1.setStrokeWidth(thickness1);
 circlePaint2.setStrokeWidth(thickness2);

 arcPaint1.setStrokeWidth(thickness3);
 arcPaint2.setStrokeWidth(thickness1);

 /*
 * تعیین مربع برای رسم کمان ها
 */
 RectF rectF = new RectF(thickness1 + spaceX, thickness1 + spaceY, main + spaceX - thickness1, main + spaceY - thickness1);

 /*
 * تعیین اندازه ی فونت به نسبت اندازه ی عرض و ارتفاع
 * نکته : به دلیل اینکه نمیتوان از لحاض ارتفاعی فونت را وسط چین کرد 
 * مجبور شدم یه مقدار به نسبت اندازه ی فونت به اون اضافه کنم تا تقریباً وسط چین بشه
 */
 float sizeText = main / 4;
 TextPaint.setTextSize(sizeText);
 canvas.drawText(percentText + " %", width / 2, heigth / 2 + sizeText / 3f, TextPaint);
 // رسم دو کمان زیرین
 canvas.drawArc(rectF, 0, 360, false, circlePaint1);
 canvas.drawArc(rectF, 0, 360, false, circlePaint2);
 // رسم کمان در حال حرکت
 canvas.drawArc(rectF, -90, percent, false, arcPaint1);

 // رسم خطوط فاصله انداز بین کمان در حال حرکت 
 int j = 0;
 for (int i = 0; i < percent / 10; i++) {
 canvas.drawArc(rectF, -90 + j, 2, false, arcPaint2);
 j += 10;
 }

 // رسم دایره های بالا یی در حال حرکت با کمان متحرک
 midPointX = width / 2;
 midPointY = heigth / 2;
 radius = (main - 2 * thickness1) / 2;
 angle = percent;
 circleStrokePaint1.setStrokeWidth(thickness2 / 5);

 //محاسبه ی فرمولی مکان قرار گیری دایره های بالایی
 /*
 * تجربه : سر این موضوع نزدیک سه چار ساعت الاف شدن
 * اونم اینکه فاصله هارو باید به رادیان تبدیل کنید !
 */
 x = (float) (midPointX + (radius * Math.sin(Math.toRadians(angle))));
 y = (float) (midPointY + (radius * -1 * Math.cos(Math.toRadians(angle))));
 canvas.drawCircle(x, y, thickness2 * 2f, circleFillPaint2);
 canvas.drawCircle(x, y, thickness2, circleFillPaint1);
 canvas.drawCircle(x, y, thickness1 / 1.1f, circleStrokePaint1);

 }
}

کلاس اصلی :

 import android.app.Activity;
import android.os.Bundle;


public class ProgressBarCircleActivity extends Activity {

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);

 final CustomTimer cusProgress = (CustomTimer) findViewById(R.id.cusProgress);
 Thread thread = new Thread(new Runnable() {

 public void run() {
 int second = 0;
 while (second <= 100) {
 try {
 cusProgress.setPercent(second);
 Thread.sleep(200);
 second++;
 }
 catch (InterruptedException e) {
 e.printStackTrace();
 }
 }
 }
 });
 thread.start();

 }
}

اینم لینک فونت مورد نظر، اضافش کنید به قسمت assets پروژه تون.

دانلود سورس

اینم نتیجه ی کار :

سلام به همه ی دوستان

ممنون از همه کسایی که با گذاشتن نظر و دادن لایک باعث دل گرمی من شدن.

من خودم انتظار نداشتم موضوعی که جهت آموزش گذاشتم اینقدر مورد لطف شما قراره بگیره،برای همین تویه آموزش بعدی میخواهم ساخت سیک بار سفارشی رو بهتون آموزش بدم.سعی میکنم برای این هفته و نهایتاً برای هفته ی بعد این آموزش رو قرار بدم.

اینم عکسش:

لینک آموزش سیک بار سفارشی

شما میتونید این قسمت رو تغییر بدید:

total : زمان کلی مدیا پلیر یا هر چیز دیگه ای هستش

time : زمان حال (اون جایی که مدیا پلیر داره پخشش میکننه)

 public void setPercent(float time,float total) {
 percentText = (int) time;
 percent = (int) (time * 360 / total);
 postInvalidate();
 }

فقط میمونه یه تغییر که اونم باید تویه کلاس اصلی بدید اونم اینکه به جای اینکه به setPercent یک متغییر ارسال کنید باید دوتا متغییر ارسال کنید.