Android自定义Stepper：设置背景色时实现步骤填充动画

Hey there! Let's tackle adding that fill animation to your custom Stepper component. Since you already have the basic styling (icons, text colors, line backgrounds) working smoothly, here's how to integrate the fill animation step by step:

1. Choose Your Animation Target #

First, clarify what exactly you want to animate:

• Progressive line fill: The connecting line fills from left to right as you move through steps
• Icon fill animation: The step icon transitions from empty to filled (e.g., hollow circle to solid circle)

We'll cover both options below, starting with the line fill since it's a common stepper animation.

2. Implement Line Fill Animation #

Step 2.1: Create Animatable Line Background #

Add a layered drawable (drawable/stepper_line_anim.xml) to handle filled/unfilled states:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Unfilled background line -->
    <item android:id="@+id/unfilled_line">
        <shape android:shape="rectangle">
            <solid android:color="@color/gray" />
            <size android:height="2dp" />
        </shape>
    </item>
    <!-- Fillable foreground line (starts at 0 width) -->
    <item android:id="@+id/filled_line">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="@color/colorPrimary" />
                <size android:height="2dp" />
            </shape>
        </clip>
    </item>
</layer-list>

Step 2.2: Update Your Layout #

Set this drawable as the background for your line View:

<View
    android:id="@+id/line"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="@drawable/stepper_line_anim" />

Step 2.3: Add Animation Logic to Your Code #

Modify your existing DrawStepper method to trigger the animation when switching steps:

// Add member variables to your class
private ValueAnimator lineFillAnimator;
private View line;

// Initialize in onCreate/onViewCreated
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.your_layout);
    line = findViewById(R.id.line);
    // Other initializations...
}

private void DrawStepper(int position) {
    // Cancel any running animation to avoid conflicts
    if (lineFillAnimator != null && lineFillAnimator.isRunning()) {
        lineFillAnimator.cancel();
    }

    switch (position) {
        case 0:
            imgStepShipper.setImageResource(R.drawable.ic_current_step);
            txtStepShipper.setTextColor(getResources().getColor(R.color.colorPrimary));
            // Animate line from 0% to 100% fill
            startLineFillAnimation(0f, 1f);
            break;
        case 1:
            imgStepShipper.setImageResource(R.drawable.ic_completed_step);
            txtStepShipper.setTextColor(getResources().getColor(R.color.colorGray));
            // Animate line from 50% to 100% (adjust based on your step count)
            startLineFillAnimation(0.5f, 1f);
            break;
        // Add other step cases here...
    }
}

private void startLineFillAnimation(float startProgress, float endProgress) {
    lineFillAnimator = ValueAnimator.ofFloat(startProgress, endProgress);
    lineFillAnimator.setDuration(600); // Adjust animation speed (ms)
    lineFillAnimator.addUpdateListener(animation -> {
        float progress = (float) animation.getAnimatedValue();
        LayerDrawable layerDrawable = (LayerDrawable) line.getBackground();
        Drawable filledLine = layerDrawable.findDrawableByLayerId(R.id.filled_line);
        // Android drawable levels range from 0-10000
        filledLine.setLevel((int) (progress * 10000));
    });
    lineFillAnimator.start();
}

// Clean up animation to prevent memory leaks
@Override
protected void onDestroy() {
    super.onDestroy();
    if (lineFillAnimator != null) {
        lineFillAnimator.cancel();
        lineFillAnimator = null;
    }
}

3. Add Icon Fill Animation (Optional) #

If you want the step icon to animate from empty to filled, use an AnimatedVectorDrawable:

Step 3.1: Create Animated Vector Drawable #

Add drawable/ic_step_fill_anim.xml:

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_step_selector">
    <target
        android:name="fill_path"
        android:animation="@anim/step_fill_anim" />
</animated-vector>

Create the selector (ic_step_selector.xml) and fill animation (anim/step_fill_anim.xml) to define the path transition from hollow to solid.

Step 3.2: Trigger Icon Animation in DrawStepper #

Update the case for your current step:

case 0:
    AnimatedVectorDrawable stepFillAvd = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.ic_step_fill_anim);
    imgStepShipper.setImageDrawable(stepFillAvd);
    stepFillAvd.start();
    txtStepShipper.setTextColor(getResources().getColor(R.color.colorPrimary));
    startLineFillAnimation(0f, 1f);
    break;

Adjust the animation duration and progress values to match the exact look you're aiming for!

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