Android Widget Arc Progress

android android-widget android-progressbar android-bitmap

1445 просмотра

2 ответа

1272 Репутация автора

В моем приложении для Android у меня есть несколько виджетов, и я хочу, чтобы они выглядели как эти индикаторы выполнения.

введите описание изображения здесь

Теперь я знаю, что не могу использовать для этого никаких внешних библиотек, так как виджеты не поддерживают большинство пользовательских представлений. Я видел, как большинство разработчиков используют растровые изображения для рисования подобных вещей. Я могу нарисовать полный круг. Но как я могу нарисовать этот индикатор в форме дуги, используя растровое изображение, или есть какой-то другой способ?

Ценю твою помощь. Спасибо!

Автор: Vajira Lasantha Источник Размещён: 17.07.2016 11:10

Ответы (2)


2 плюса

25285 Репутация автора

Решение

Да, вам нужно растровое изображение, но достаточно просто нарисовать дугу на растровом изображении так же, как вы нарисовали бы дугу в пользовательском представлении:

    Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    canvas.drawArc(arcRect, startAngle, sweepAngle, false, paint);

    RemoteViews views = new RemoteViews(updateService.getPackageName(), R.layout.widget);
    views.setImageViewBitmap(R.id.image_view, bitmap);
Автор: kris larson Размещён: 18.07.2016 01:22

4 плюса

1272 Репутация автора

ОТВЕТЬ НА МОЙ СОБСТВЕННЫЙ ВОПРОС:

Если кто-то ищет такой виджет, мне удалось заставить его работать следующим кодом. Надеюсь, это кому-нибудь поможет.

private Bitmap getWidgetBitmap(Context context, int percentage) {

        int width = 400;
        int height = 400;
        int stroke = 30;
        int padding = 5;
        float density = context.getResources().getDisplayMetrics().density;

        //Paint for arc stroke.
        Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG | Paint.DITHER_FLAG | Paint.ANTI_ALIAS_FLAG);
        paint.setStrokeWidth(stroke);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeCap(Paint.Cap.ROUND);
        //paint.setStrokeJoin(Paint.Join.ROUND);
        //paint.setPathEffect(new CornerPathEffect(10) );

        //Paint for text values.
        Paint mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setTextSize((int) (context.getResources().getDimension(R.dimen.widget_text_large_value) / density));
        mTextPaint.setColor(Color.WHITE);
        mTextPaint.setTextAlign(Paint.Align.CENTER);

        final RectF arc = new RectF();
        arc.set((stroke/2) + padding, (stroke/2) + padding, width-padding-(stroke/2), height-padding-(stroke/2));

        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        //First draw full arc as background.
        paint.setColor(Color.argb(75, 255, 255, 255));
        canvas.drawArc(arc, 135, 275, false, paint);
        //Then draw arc progress with actual value.
        paint.setColor(Color.WHITE);
        canvas.drawArc(arc, 135, 200, false, paint);
        //Draw text value.
        canvas.drawText(percentage + "%", bitmap.getWidth() / 2, (bitmap.getHeight() - mTextPaint.ascent()) / 2, mTextPaint);
        //Draw widget title.
        mTextPaint.setTextSize((int) (context.getResources().getDimension(R.dimen.widget_text_large_title) / density));
        canvas.drawText(context.getString(R.string.widget_text_arc_battery), bitmap.getWidth() / 2, bitmap.getHeight()-(stroke+padding), mTextPaint);

        return  bitmap;
    }

Это произвело следующее.

введите описание изображения здесь

Спасибо!

Автор: Vajira Lasantha Размещён: 21.07.2016 01:39
Вопросы из категории :
32x32