Android自定义Button组件


如何开发出一个漂亮的Buttton按钮，想必大家都迫不及待了。现在我来通过一个简单的过程说说这一过程。

首先查看一下Button类源码：

  1. @RemoteView  
  2. public class Button extends TextView {   
  3.     public Button(Context context) {   
  4.         this(context, null);   
  5.     }   
  6.     public Button(Context context, AttributeSet attrs) {   
  7.         this(context, attrs, com.Android.internal.R.attr.buttonStyle);   
  8.     }   
  9.     public Button(Context context, AttributeSet attrs, int defStyle) {   
  10.         super(context, attrs, defStyle);   
  11.     }   
  12. }  

大家发现没有，它继承了TextView类。只不过多了两个构造函数而已

我现在定义一个attrs.xml文件。这个文件的代码，如下所示：

  1. <declare-styleable name="SmoothButton">   
  2.        <attr name="transitionDrawable" format="reference" />   
  3.        <attr name="transitionDrawableLength" format="integer" />   
  4.        <attr name="transitionTextColorUp" format="color" />   
  5.        <attr name="transitionTextColorDown" format="color" />   
  6.    </declare-styleable>  

然后实现这个SmoothButton类，如下所示：

  1. public class SmoothButton extends Button {   
  2.        
  3.     private static final long DELAY = 25;   
  4.     private LevelListDrawable transitionDrawable;   
  5.     private int transitionDrawableLength;   
  6.     private int level;   
  7.     private int[] colors;   
  8.     public SmoothButton(Context context, AttributeSet attrs) {   
  9.         super(context, attrs);   
  10.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SmoothButton);   
  11.         transitionDrawable = (LevelListDrawable) a.getDrawable(R.styleable.SmoothButton_transitionDrawable);   
  12.         transitionDrawableLength = a.getInt(R.styleable.SmoothButton_transitionDrawableLength, 0);   
  13.         int useTextColors = 0;   
  14.         int c0 = 0;   
  15.         if (a.hasValue(R.styleable.SmoothButton_transitionTextColorUp)) {   
  16.             c0 = a.getColor(R.styleable.SmoothButton_transitionTextColorUp, 0);   
  17.             useTextColors++;   
  18.         }   
  19.         int c1 = 0;   
  20.         if (useTextColors == 1 && a.hasValue(R.styleable.SmoothButton_transitionTextColorDown)) {   
  21.             c1 = a.getColor(R.styleable.SmoothButton_transitionTextColorDown, 0);   
  22.             useTextColors++;   
  23.         }   
  24.         a.recycle();   
  25.         if (transitionDrawable == null) {   
  26.             throw new RuntimeException("transitionDrawable must be defined in XML (with valid xmlns)");   
  27.         }   
  28.         if (transitionDrawableLength == 0) {   
  29.             throw new RuntimeException("transitionDrawableLength must be defined in XML (with valid xmlns)");   
  30.         }   
  31.         if (useTextColors == 2) {   
  32.             setTextColor(c0);   
  33.             int a0 = Color.alpha(c0);   
  34.             int r0 = Color.red(c0);   
  35.             int g0 = Color.green(c0);   
  36.             int b0 = Color.blue(c0);   
  37.             int a1 = Color.alpha(c1);   
  38.             int r1 = Color.red(c1);   
  39.             int g1 = Color.green(c1);   
  40.             int b1 = Color.blue(c1);   
  41.             colors = new int[transitionDrawableLength];   
  42.             for (int i=0; i<transitionDrawableLength; i++) {   
  43.                 int ai = a0 + i * (a1 - a0) / transitionDrawableLength;   
  44.                 int ri = r0 + i * (r1 - r0) / transitionDrawableLength;   
  45.                 int gi = g0 + i * (g1 - g0) / transitionDrawableLength;   
  46.                 int bi = b0 + i * (b1 - b0) / transitionDrawableLength;   
  47.                 colors[i] = Color.argb(ai, ri, gi, bi);   
  48.             }   
  49.         }   
  50.         level = 0;   
  51.         transitionDrawable.setLevel(level);   
  52.         int paddingLeft = getPaddingLeft();   
  53.         int paddingTop = getPaddingTop();   
  54.         int paddingRight = getPaddingRight();   
  55.         int paddingBottom = getPaddingBottom();   
  56.         setBackgroundDrawable(transitionDrawable);   
  57.         setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom);   
  58.     }   
  59.     @Override  
  60.     protected void drawableStateChanged() {   
  61.         super.drawableStateChanged();   
  62.         int delta = isPressed()? 1 : -1;   
  63.         handler.removeMessages(-delta);   
  64.         handler.sendEmptyMessage(delta);   
  65.     }   
  66.        
  67.     private Handler handler = new Handler() {   
  68.         @Override  
  69.         public void handleMessage(Message msg) {   
  70.             int what = msg.what;   
  71.             level += what;   
  72.             if (level >= 0 && level < transitionDrawableLength) {   
  73.                 transitionDrawable.setLevel(level);   
  74.                 if (colors != null) {   
  75.                     setTextColor(colors[level]);   
  76.                 }   
  77.                 handler.sendEmptyMessageDelayed(what, DELAY);   
  78.             } else {   
  79.                 level = Math.max(0, level);   
  80.                 level = Math.min(transitionDrawableLength-1, level);   
  81.             }   
  82.         }   
  83.     };   
  84.        
  85.     public void setTransitionDrawable(Drawable drawable, int length) {   
  86.         transitionDrawable = (LevelListDrawable) drawable;   
  87.         transitionDrawableLength = length;   
  88.         level = 0;   
  89.         invalidate();   
  90.     }   
  91. }  

里面有一个TypeArray类。这个类负责调用上面的attrs.xml中的配置属性。

并将这些属性添加到Button中。比如一些默认的属性。

然后在main.xml文件中定义这个自定义Button组件，代码如下所示：

  1. <org.panel.SmoothButton  
  2.         android:layout_width="wrap_content"    
  3.         android:layout_height="wrap_content"    
  4.         android:layout_gravity="center"  
  5.         android:id="@+id/smoothButton2"    
  6.         android:text="click me and see top panel..."  
  7.         android:textStyle="bold"  
  8.         panel:transitionDrawable="@drawable/transition_list"  
  9.         panel:transitionDrawableLength="8"  
  10.         panel:transitionTextColorUp="#eee"  
  11.         panel:transitionTextColorDown="#aaa"  
  12.     />  

这样就可以配置好了该Button组件，

接下来要在Activity子类中调用。如下所示：

  1.   findViewById(R.id.smoothButton1).setOnClickListener(new OnClickListener() {   
  2. lic void onClick(View v) {   
  3. Log.d("hellow","heelow");   
  4.   
  5.   });  

实现效果如下所示：

相关内容