EditText双向展开动画拉伸异常及平滑恢复问题求助

Hey there! Let's break down your animation issues and fix them one by one.

Why Your Current Scale Animation Causes Problems #

The scale animation you're using transforms the entire drawing matrix of the EditText, which leads to all the weird behaviors you're seeing:

• The rounded corner background gets stretched along with the view, making the radius look abnormally large.
• The text inside is scaled too, so it appears bigger than your set textSize.
• Since you're pivoting from the center (pivotX="50%"), the view expands outward from the middle, squeezing the initial content area and hiding the first few characters.
• clearAnimation() just resets the view's drawing state abruptly, leading to that jarring jump back to the original size.

Fix 1: Replace Scale Animation with Width Animation (No More Distortion) #

Instead of scaling the entire view, we'll use ValueAnimator to dynamically adjust the EditText's layout width. This way, the view re-measures and lays out normally—your background and text will stay intact, and the expansion will happen evenly from both sides as you want.

Step 1: Grab the Initial Width

First, we need to get the initial width of your EditText (we'll use this to animate back later):

private int mInitialSearchWidth;
private EditText mUrlSearch;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mUrlSearch = findViewById(R.id.mUrlSearch);

    // Get the initial width once the view finishes measuring
    mUrlSearch.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            mInitialSearchWidth = mUrlSearch.getWidth();
            mUrlSearch.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        }
    });
}

Step 2: Create a Reusable Width Animation Method

This method will handle smooth transitions between any two width values:

private void animateSearchWidth(int startWidth, int endWidth) {
    ValueAnimator widthAnimator = ValueAnimator.ofInt(startWidth, endWidth);
    widthAnimator.setDuration(400); // Match your original animation duration
    widthAnimator.setInterpolator(new AccelerateDecelerateInterpolator()); // Smooth acceleration/deceleration

    widthAnimator.addUpdateListener(animation -> {
        int currentWidth = (int) animation.getAnimatedValue();
        // Update the EditText's layout parameters
        ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) mUrlSearch.getLayoutParams();
        params.width = currentWidth;
        mUrlSearch.setLayoutParams(params);
    });

    widthAnimator.start();
}

Step 3: Update the Focus Listener

Replace your scale animation with the width animation, and use a reverse animation instead of clearAnimation():

mUrlSearch.setOnFocusChangeListener((v, hasFocus) -> {
    if (hasFocus) {
        // Calculate target width (e.g., fill most of the screen minus margins)
        int screenWidth = getResources().getDisplayMetrics().widthPixels;
        int targetWidth = screenWidth - 40; // Subtract 20dp from each side (adjust as needed)
        animateSearchWidth(mInitialSearchWidth, targetWidth);
    } else {
        // Animate back to the initial width smoothly
        animateSearchWidth(mUrlSearch.getWidth(), mInitialSearchWidth);
    }
});

Fix 2: Ensure Rounded Corners Behave Correctly #

Make sure your edittext_rounded.xml uses dp units for corners so they don't stretch with the view:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff"/>
    <corners android:radius="12dp"/> <!-- Use dp instead of fixed pixels -->
    <padding
        android:left="8dp"
        android:right="8dp"
        android:top="4dp"
        android:bottom="4dp"/>
</shape>

Why This Works #

• No distortion: We're modifying the actual layout width, not scaling the view's drawing. The background and text will render normally at all sizes.
• Smooth expansion/contraction: The animation adjusts the width gradually, so your EditText expands evenly from both sides without squeezing content.
• No abrupt resets: Replacing clearAnimation() with a reverse width animation gives you that smooth shrink effect you want.

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