如何实现如图所示的三色异形Android自定义Seekbar/ProgressBar？

Hey there! Let's walk through how to build that custom-shaped, tri-color SeekBar/ProgressBar you're looking for. I’ve got a practical, step-by-step approach that works well for Android projects:

1. Build a Custom ProgressDrawable (The Drawing Heart) #

The default SeekBar/ProgressBar uses a Drawable to render its progress, so we’ll create a custom one by extending Drawable (or LayerDrawable for layered effects) and overriding the onDraw() method to handle the unique shape and tri-color styling.

• First, calculate the progress percentage in onDraw(Canvas canvas): use float progressPercent = getLevel() / 10000f (since Drawables use a level range of 0-10000 to represent progress).
• Define your tri-color segments—for example, green for completed progress, yellow for a middle range, and gray for uncompleted. Adjust the percentage splits to match your design.
• For the special shape, use Path to outline custom contours (like rounded corners, waves, or irregular edges) or stick to modified shapes like rounded rectangles. Use Paint objects to fill each color segment.

Here’s a quick code snippet to illustrate a rounded, tri-color progress drawable:

public class CustomProgressDrawable extends Drawable {

    @Override
    public void onDraw(Canvas canvas) {
        Rect bounds = getBounds();
        float progressRatio = getLevel() / 10000f;
        float totalWidth = bounds.width();
        float progressWidth = totalWidth * progressRatio;

        // Define your color segment ratios (adjust these to match your design)
        final float FIRST_COLOR_RATIO = 0.3f;
        final float SECOND_COLOR_RATIO = 0.7f;
        float firstSegmentEnd = totalWidth * FIRST_COLOR_RATIO;
        float secondSegmentEnd = totalWidth * SECOND_COLOR_RATIO;

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        float cornerRadius = 20f; // Adjust for your shape's roundedness

        // Draw uncompleted (gray) background
        paint.setColor(Color.GRAY);
        canvas.drawRoundRect(bounds.left, bounds.top, bounds.right, bounds.bottom, cornerRadius, cornerRadius, paint);

        // Draw middle (yellow) segment if progress covers it
        if (progressWidth > firstSegmentEnd) {
            paint.setColor(Color.YELLOW);
            float drawWidth = Math.min(progressWidth, secondSegmentEnd);
            canvas.drawRoundRect(bounds.left, bounds.top, drawWidth, bounds.bottom, cornerRadius, cornerRadius, paint);
        }

        // Draw completed (green) segment
        if (progressWidth > 0) {
            paint.setColor(Color.GREEN);
            float drawWidth = Math.min(progressWidth, firstSegmentEnd);
            canvas.drawRoundRect(bounds.left, bounds.top, drawWidth, bounds.bottom, cornerRadius, cornerRadius, paint);
        }
    }

    @Override
    protected boolean onLevelChange(int level) {
        invalidateSelf(); // Trigger redraw when progress changes
        return true;
    }

    @Override
    public void setAlpha(int alpha) {}

    @Override
    public void setColorFilter(ColorFilter colorFilter) {}

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

2. Customize the SeekBar Thumb (Slider) #

If your design calls for a custom-shaped slider, create a custom Drawable (either via XML shape/vector or code) and assign it to the SeekBar:

• In XML: Add android:thumb="@drawable/custom_thumb_shape" to your SeekBar tag.
• In code: Use seekBar.setThumb(new CustomThumbDrawable()) (replace with your custom drawable class).

3. Hook Everything Up to Your SeekBar/ProgressBar #

• XML Layout Approach:

<SeekBar
    android:id="@+id/custom_seekbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/custom_progress_drawable"
    android:thumb="@drawable/custom_thumb"
    android:max="100" />

• Programmatic Approach:

SeekBar customSeekBar = findViewById(R.id.custom_seekbar);
CustomProgressDrawable progressDrawable = new CustomProgressDrawable();
customSeekBar.setProgressDrawable(progressDrawable);

4. Tweak Touch Handling (For SeekBar) #

If your special shape causes the SeekBar’s touch targets to misbehave, override onTouchEvent(MotionEvent event) in a custom SeekBar subclass. Adjust the coordinate calculations to ensure the slider responds correctly to taps/drags on your custom progress shape.

Pro Tips #

• Make colors and segment ratios configurable by adding setter methods to your custom Drawable (e.g., setFirstColor(int color) or setFirstSegmentRatio(float ratio)).
• For complex shapes (like waves or curved edges), use Path to define the exact contour and draw it with canvas.drawPath(path, paint).
• Test across different screen densities—use dp units or dynamic size calculations to avoid distortion on large/small screens.

内容的提问来源于stack exchange，提问作者Kalpesh Lakhani