Gausst松鼠会

这个屌丝很懒，什么也没留下！

热门标签

居中显示并旋转 android Button 里的属性drawableLeft_button drawableleft

作者：Gausst松鼠会 | 2024-03-18 07:40:39

踩

button drawableleft

如图，点击同步按钮，同步图片要旋转起来，直到同步完毕。有一个容易实现的方法，就叫“方法1”吧（下面会用的），一个LinearLayout里面包含一个ImageView和一个TextView并且居中显示，监听LinearLayout的点击事件，然后旋转ImageView。


<LinearLayout
        android:id="@+id/syn_now_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/address_clipboard_item_divider_padding"
        android:layout_marginLeft="@dimen/login_activity_padding"
        android:layout_marginRight="@dimen/login_activity_padding"
        android:layout_marginBottom="@dimen/address_clipboard_item_divider_padding"
        android:background="@color/download_apk_scanning"
        android:orientation="horizontal"
        android:gravity="center"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        >
        <ImageView
            android:id="@+id/sync_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/syn"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:duplicateParentState="true"
            android:textSize="15sp"
            android:textColor="@color/white"
            android:text="@string/sync_now"/>
 
    </LinearLayout>


    mSyncImage = (ImageView)findViewById(R.id.sync_image);
    findViewById(R.id.syn_now_layout).setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
                mSyncImage.clearAnimation();
                mSyncImage.startAnimation(getRotateAnimtion());
        }
    });
 
    /**
     * @return 旋转动画
     */
    private RotateAnimation getRotateAnimtion(){
        if(rAnimation==null)
        {
            rAnimation = new RotateAnimation(0, 359, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            rAnimation.setDuration(1000);
            rAnimation.setRepeatCount(-1);
            rAnimation.setInterpolator(new LinearInterpolator());
        }
        return rAnimation;
    }

但是，在我知道要实现这个功能的时候，第一反应是通过Button的drawableLeft属性实现（一个按钮上同时显示图片和文字），我想没有深入了解过drawableLeft属性的人(比如我)大部分都会是我这个想法的。真的去实现的时候才发现，我擦，居然有两大难点，一是从Button中取出图片的drawable，不知道怎么对drawable对象做动画，一是drawableLeft 图片不居中显示

1. drawableLeft 取出来后，怎么旋转呢

通过Google知道系统的圆形进度条的图片是spinner_white_16.png,用到sdk/platforms/android-22/data/res/drawable/progress_small_white.xml文件


<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/spinner_white_16"
    android:pivotX="50%"
    android:pivotY="50%"
    android:framesCount="12"
    android:frameDuration="100" />

模仿写试了试发现， android:framesCount与android:frameDuratiion 是内部属性，不能用。

根据animated-rotate我又找到AnimatedRotateDrawable类


/*
 * Copyright (C) 2009 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 
package android.graphics.drawable;
 
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.ColorFilter;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.util.Log;
import android.os.SystemClock;
import org.xmlpull.v1.XmlPullParser;
import org.xmlpull.v1.XmlPullParserException;
 
import java.io.IOException;
 
import com.android.internal.R;
 
/**
 * @hide
 */
public class AnimatedRotateDrawable extends Drawable implements Drawable.Callback, Runnable,
        Animatable {
 
    private AnimatedRotateState mState;
    private boolean mMutated;
    private float mCurrentDegrees;
    private float mIncrement;
    private boolean mRunning;
 
    public AnimatedRotateDrawable() {
        this(null, null);
    }
·······
}

看到了吧，又是隐藏类。但是我又看到了 AnimatedRotateDrawable实现了Animatable接口。

好像可以试一试，在工程的drawable文件下创建文件animated_rotate.xml


<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/syn"
    android:pivotX="50%"
    android:pivotY="50%" />

然后


  <Button
    android:id="@+id/sync_now" 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/animated_rotate"
    android:text="立即同步"/>

在Button的点击事件里处理旋转问题


	public void onClick(View v) {
 
		Button btnButton = (Button) v;
		// 获取android:drawableLeft
		Drawable drawable = btnButton.getCompoundDrawables()[0];
		if (!((Animatable) drawable).isRunning()) {
			((Animatable) drawable).start();
		} else {
			((Animatable) drawable).stop();
		}
	}

2.drawableLeft 图片不居中显示:

解决办法两种，一种是Button的android:layout_width和android:layout_height的属性设为wrap_content，然后外面在包一层LinearLayout ，设置属性 android:gravity="center"，然后监听LinearLayout点击事件，咦，这不和“方法1”一样了吗，换第二种方法，第二种方法就是自定义控件了。通过网络查到两种结局办法，

一种是文字图片都在左边，然后在 onDraw 函数里向右平移画布（canvas.translate），调用父级onDraw去画。

一种是自己写onDraw方法，在Canvas画布的某个位置去画图和文字，不在调用父级onDraw。这个种方式比上一个麻烦，但是实现了normal状态和press状态的图片切换。

两种方式都试过之后，图片和文字都居中显示了，但是当点击按钮后出了一个问题，图片不旋转了。去掉我在onDraw里写的代码，直接调用super.onDraw(canvas) 图片旋转就没问题。通过查看AnimatedRotateDrawable 和 TextView的源码才明白我应该重写public void invalidateDrawable(Drawable drawable) 方法。（Button的父类是TextView，drawableLeft的属性就是在TextView里实现的）

首先看TextView里的onDraw是怎么实现的，其中有段代码是画drawableLeft的


            // IMPORTANT: The coordinates computed are also used in invalidateDrawable()
            // Make sure to update invalidateDrawable() when changing this code.
            if (dr.mDrawableLeft != null) {
                canvas.save();
                canvas.translate(scrollX + mPaddingLeft + leftOffset,
                                 scrollY + compoundPaddingTop +
                                 (vspace - dr.mDrawableHeightLeft) / 2);
                dr.mDrawableLeft.draw(canvas);
                canvas.restore();
            }

没有啥区别呀，先保存画布的状态，然后平移画布，画上图片，再恢复画布平移前的保存的状态。注意看上面的两段英文注释，虽然看到了invalidateDrawable函数，但是因为不了解就给忽略了。没有办法了，只能从动画开始一步一步分析吧。

动画开始，调用start() 方法，AnimatedRotateDrawable文件


    @Override
    public void start() {
        if (!mRunning) {
            mRunning = true;
            nextFrame();
        }
    }
    private void nextFrame() {
        unscheduleSelf(this);
        scheduleSelf(this, SystemClock.uptimeMillis() + mState.mFrameDuration);
    }

unscheduleSelf scheduleSelf 这两个函数干嘛？去父类Drawable看看实现


    public void unscheduleSelf(Runnable what) {
        final Callback callback = getCallback();
        if (callback != null) {
            callback.unscheduleDrawable(this, what);
        }
    public void scheduleSelf(Runnable what, long when) {
        final Callback callback = getCallback();
        if (callback != null) {
            callback.scheduleDrawable(this, what, when);
        }
    }

getCallback,那就有setCallback,Drawable的setCallback是在是在什么时候调用的呢，TextView 设置drawableLeft的函数是 public void setCompoundDrawables(Drawable left, Drawable top, right, Drawable bottom),其中有段代码是


            if (left != null) {
                left.setState(state);
                left.copyBounds(compoundRect);
                left.setCallback(this);
                dr.mDrawableSizeLeft = compoundRect.width();
                dr.mDrawableHeightLeft = compoundRect.height();
            } else {
                dr.mDrawableSizeLeft = dr.mDrawableHeightLeft = 0;
            }

unscheduleDrawable scheduleDrawable 的实现函数应该就在TextView里，查找后在父类里发现了实现方法


  /**
     * Schedules an action on a drawable to occur at a specified time.
     *
     * @param who the recipient of the action
     * @param what the action to run on the drawable
     * @param when the time at which the action must occur. Uses the
     *        {@link SystemClock#uptimeMillis} timebase.
     */
    public void scheduleDrawable(Drawable who, Runnable what, long when) {
        if (verifyDrawable(who) && what != null) {
            final long delay = when - SystemClock.uptimeMillis();
            if (mAttachInfo != null) {
                mAttachInfo.mViewRootImpl.mChoreographer.postCallbackDelayed(
                        Choreographer.CALLBACK_ANIMATION, what, who,
                        Choreographer.subtractFrameDelay(delay));
            } else {
                ViewRootImpl.getRunQueue().postDelayed(what, delay);
            }
        }
    }
 
    /**
     * Cancels a scheduled action on a drawable.
     *
     * @param who the recipient of the action
     * @param what the action to cancel
     */
    public void unscheduleDrawable(Drawable who, Runnable what) {
        if (verifyDrawable(who) && what != null) {
            if (mAttachInfo != null) {
                mAttachInfo.mViewRootImpl.mChoreographer.removeCallbacks(
                        Choreographer.CALLBACK_ANIMATION, what, who);
            } else {
                ViewRootImpl.getRunQueue().removeCallbacks(what);
            }
        }
    }

有没有发现什么，scheduleDrawable 函数中有ViewRootImpl.getRunQueue().postDelayed(what, delay);根据名字就能判断这是多长时间之后执行Runnable，也就是执行AnimatedRotateDrawable文件里的run()函数（不理解的查一下Runnable是个啥）。

因为what参数是AnimatedRotateDrawable类里scheduleSelf函数的第一个参数this，run函数实现


    @Override
    public void run() {
        // TODO: This should be computed in draw(Canvas), based on the amount
        // of time since the last frame drawn
        mCurrentDegrees += mIncrement;
        if (mCurrentDegrees > (360.0f - mIncrement)) {
            mCurrentDegrees = 0.0f;
        }
        invalidateSelf();
        nextFrame();
    }

nextFrame函数，又是一个循环。剩下的关键函数就是invalidateSelf，刷新，实现函数还是TextView里，因为Drawable里的实现方式是


    public void invalidateSelf() {
        final Callback callback = getCallback();
        if (callback != null) {
            callback.invalidateDrawable(this);
        }
    }

在TextView类里查找invalidateDrawable函数，去掉了 mDrawableRight 等代码


@Override
    public void invalidateDrawable(Drawable drawable) {
        if (verifyDrawable(drawable)) {
            final Rect dirty = drawable.getBounds();
            int scrollX = mScrollX;
            int scrollY = mScrollY;
 
            // IMPORTANT: The coordinates below are based on the coordinates computed
            // for each compound drawable in onDraw(). Make sure to update each section
            // accordingly.
            final TextView.Drawables drawables = mDrawables;
            if (drawables != null) {
                if (drawable == drawables.mDrawableLeft) {
                    final int compoundPaddingTop = getCompoundPaddingTop();
                    final int compoundPaddingBottom = getCompoundPaddingBottom();
                    final int vspace = mBottom - mTop - compoundPaddingBottom - compoundPaddingTop;
 
                    scrollX += mPaddingLeft;
                    scrollY += compoundPaddingTop + (vspace - drawables.mDrawableHeightLeft) / 2;
                } 
                ········
                ········
            }
 
            invalidate(dirty.left + scrollX, dirty.top + scrollY,
                    dirty.right + scrollX, dirty.bottom + scrollY);
        }
    }

invalidate函数不陌生吧，一部分客户区域将被重新绘制。跟到这里，就明白问题出在哪里了，因为动画是要不断的重新绘制的，但是我自定义的类里没有重写invalidateDrawable函数，导致调用了父类TextView里的 invalidateDrawable。重新绘制的区域错了，所以点击按钮后，图片不旋转。

自定义类重写的函数是两个onDraw(Canvas canvas) 和 invalidateDrawable(Drawable drawable)

自定义类文件DrawableCenterButton.java


public class DrawableCenterButton extends TextView{
 
    public DrawableCenterButton(Context context) {
        super(context);
    }
 
    public DrawableCenterButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
 
    public DrawableCenterButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    int textWidth;
    int textHeight;
    Drawable mDrawableLeft = null;
    int startDrawableX = 0;
    int startDrawableY= 0;
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        initText();
    }
 
    private void initText() {
        String textStr = super.getText().toString();
        Rect rect = new Rect();
        getPaint().getTextBounds(textStr,0,textStr.length(),rect);
        getPaint().setColor(getTextColors().getDefaultColor());
        getPaint().setTextSize(getTextSize());
        textWidth = rect.width();
        textHeight = rect.height();
 
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        if (mDrawableLeft == null) mDrawableLeft = getCompoundDrawables()[0];
 
        if (mDrawableLeft == null) {
            super.onDraw(canvas);
            return;
        }
        int drawablePadding = getCompoundDrawablePadding();
        int drawableWidth = this.mDrawableLeft.getIntrinsicWidth();
        int drawableHeight = this.mDrawableLeft.getIntrinsicHeight();
        startDrawableX = (getWidth() >> 1) - ((drawablePadding + textWidth + drawableWidth) >> 1);
        startDrawableY = (getHeight() >> 1) - (drawableHeight >> 1);
        //画旋转图片
        canvas.save();
        canvas.translate(startDrawableX, startDrawableY);
        this.mDrawableLeft.draw(canvas);
        canvas.restore();
 
        //画文字
        int boxht = this.getMeasuredHeight() - this.getExtendedPaddingTop() - this.getExtendedPaddingBottom();
        int textht = getLayout().getHeight();
        int  voffsetText = boxht - textht >> 1;
        canvas.save();
        canvas.translate((float) (startDrawableX + drawableWidth + drawablePadding), (float) (getExtendedPaddingTop() + voffsetText));
        getLayout().draw(canvas);
        canvas.restore();
    }
    
    @Override
    public void invalidateDrawable(Drawable drawable) {
//        super.invalidateDrawable(drawable);
        final Rect dirty = drawable.getBounds();
        int scrollX = 0;
        int scrollY = 0;
        if(drawable == this.mDrawableLeft){
            scrollX = startDrawableX;
            scrollY = startDrawableY;
        }
        this.invalidate(dirty.left + scrollX-2, dirty.top + scrollY-2, dirty.right + scrollX+2, dirty.bottom + scrollY+2);
    }
 
    public Drawable getDrawableLeft() {
        return mDrawableLeft;
    }
}

成功！！！！

源码

参考：

关于TextView 宽度过大导致Drawable无法居中问题

http://blog.csdn.net/freesonhp/article/details/32695163

自定义控件让TextView的drawableLeft与文本一起居中显示

http://www.cnblogs.com/over140/p/3464348.html

View编程(3): invalidate()源码分析

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】