Custom Button

本章我将和大家一起分享的是Custom Button（自定义组件）,实现的效果是组件颜色要有渐变，看起来有种立体的感觉，当组件没有被点击时，其字体颜色是黑色，但组件被点击时，其背景色变为白色，且字体颜色变为黑色，效果图如下:

图1：

ithouge_custom_button

图2：

ithouge_custom_button2

图中左侧颜色各异的按钮就是本章要实现的Custom button,下面是实现的部分核心代码:

  1 public class SampleView extends 1.5.0/docs/api/javax/swing/text/View.html">View implements OnLongClickListener,OnTouchListener{
  2  
  3     private Drawable mDrawable,mDrawable2;
  4     private 1.5.0/docs/api/java/awt/Paint.html">Paint mPaint;
  5 //    private Paint mPaint2;
  6     private float mPaintTextOffset;
  7     private PorterDuff.Mode[] mModes;
  8     private int mModeIndex,intColor;
  9     private 1.5.0/docs/api/java/lang/String.html">String title;
 10     OnDialKeyListener onDialKeyListener;
 11     OnDialTouchListener onDialTouchListener;
 12     Bitmap bit;
 13     private int height,width,textSize,alpha;
 14  
 15     public SampleView(Activity activity,1.5.0/docs/api/java/lang/String.html">String t,int c) {
 16         super(activity);
 17         5+0%2Fdocs%2Fapi+Context">Context context = activity;
 18  
 19         setFocusable(true);
 20         setLongClickable(true);
 21         setPressed(true);
 22         setClickable(true);
 23  
 24         setOnLongClickListener(this);
 25         setOnTouchListener(this);
 26  
 27         title=t;//按钮 标题
 28         intColor=c;//按钮 颜色
 29  
 30         Resources res = SampleView.this.getResources();
 31         height = res.getDimensionPixelSize(R.dimen.normal_height);
 32         width = res.getDimensionPixelSize(R.dimen.normal_width);
 33         textSize = res.getDimensionPixelSize(R.dimen.normal_text_size);
 34         alpha = res.getDimensionPixelSize(R.dimen.normal_alpha);
 35  
 36         mDrawable = context.getResources().getDrawable(R.drawable.hhhhhh);
 37         mDrawable.setBounds(0,0,width,height);//相当于设置其宽和高
 38         mDrawable.setDither(true);//抖动   
 39  
 40         mDrawable2 = context.getResources().getDrawable(R.drawable.w);
 41         mDrawable2.setBounds(0,0,width,height);//相当于设置其宽和高
 42         mDrawable2.setDither(true);//抖动   
 43  
 44         /*bit = ((BitmapDrawable)mDrawable).getBitmap();
 45         bit= BitmapFactory.decodeResource(context.getResources(),
 46                 R.drawable.w);*/
 47  
 48         mPaint = new 1.5.0/docs/api/java/awt/Paint.html">Paint();
 49         mPaint.setAntiAlias(true);// 消除锯齿
 50         mPaint.setTextSize(textSize);
 51         mPaint.setTextAlign(1.5.0/docs/api/java/awt/Paint.html">Paint.Align.CENTER);//设置文本居中
 52  
 53         /*mPaint2 = new Paint(mPaint);
 54         mPaint2.setAlpha(alpha);//设置透明度
 55 */
 56         1.5.0/docs/api/java/awt/Paint.html">Paint.1.5.0/docs/api/java/awt/FontMetrics.html">FontMetrics fm = mPaint.getFontMetrics();
 57         mPaintTextOffset = (fm.descent + fm.ascent) * 0.5f;//中间位置
 58  
 59         mModes = new PorterDuff.Mode[] {
 60 //            PorterDuff.Mode.SRC_ATOP,
 61             PorterDuff.Mode.DST_ATOP,// 隐藏
 62 //            PorterDuff.Mode.MULTIPLY,
 63             PorterDuff.Mode.MULTIPLY,//显示凸起
 64         };//字体显示效果，外凸、下陷等
 65         mModeIndex = 1;
 66     }
 67     public SampleView(5+0%2Fdocs%2Fapi+Context">Context context, 5+0%2Fdocs%2Fapi+AttributeSet">AttributeSet attrs) {
 68         super(context, attrs);
 69     }
 70     /**
 71      * Interface definition for a callback to be invoked when a tab is triggered
 72      * by moving it beyond a target zone.
 73      */
 74     public interface OnDialKeyListener {
 75  
 76         /**
 77          * Called when the user make an action
 78          * 只是定义了一个方法,具体的实现还要在调用这个方法的地方实现
 79          * @param keyCode keyCode pressed
 80          * @param dialTone corresponding dialtone
 81          */
 82         void onTrigger(1.5.0/docs/api/java/lang/String.html">String title,1.5.0/docs/api/javax/swing/text/View.html">View v);
 83     }
 84  
 85     public interface OnDialTouchListener {
 86  
 87         /**
 88          * Called when the user make an action
 89          * 只是定义了一个方法,具体的实现还要在调用这个方法的地方实现
 90          * @param keyCode keyCode pressed
 91          * @param dialTone corresponding dialtone
 92          */
 93         void onTouchTrigger(1.5.0/docs/api/javax/swing/text/View.html">View v);
 94     }
 95  
 96     public void setIndex(int index){
 97         mModeIndex=index;
 98     }
 99     public void setColor(int c){
100         intColor=c;
101     }
102     public void setName(1.5.0/docs/api/java/lang/String.html">String t){
103         title=t;
104         invalidate();
105     }
106     /*public void setPiantColor(int paintC){
107         paintColor=paintC;
108         Log.i("SampleView","setPiantColor=="+ Integer.toHexString(paintColor));
109 //        mPaint2.setColor(paintColor);
110     }*/
111  
112     @1.5.0/docs/api/java/lang/Override.html">Override
113     protected void onDraw(1.5.0/docs/api/java/awt/Canvas.html">Canvas canvas) {
114  
115         canvas.drawColor(0x00000000);  
116  
117         ColorFilter filter;
118         filter = new PorterDuffColorFilter(intColor,mModes[mModeIndex]);
119 //        drawSample(canvas,filter);
120  
121         Rect r = mDrawable.getBounds();//取得图片的(left, top, right bottom)信息.
122         float x = (r.left + r.right) * 0.5f;//横向中点
123         float y = (r.top + r.bottom) * 0.5f - mPaintTextOffset;    
124  
125         mDrawable2.draw(canvas);
126  
127         mDrawable.setColorFilter(filter);
128         mDrawable.draw(canvas);
129  
130 //      canvas.drawText(title, x+1, y+1, mPaint2);
131         if(mModeIndex==0){
132             mPaint.setColor(0xFF000000);
133         }else{
134             mPaint.setColor(0xFFFFFFFF);
135         }
136         canvas.drawText(title, x, y, mPaint);
137     }
138     /**
139      * Registers a callback to be invoked when the user triggers an event.
140      *
141      * @param listener
142      *            the OnTriggerListener to attach to this view
143      */
144     public void setOnDialKeyListener(OnDialKeyListener listener) {
145         onDialKeyListener = listener;
146     }
147  
148     public void setOnDialTouchListener(OnDialTouchListener touchListener) {
149         onDialTouchListener = touchListener;
150     }
151  
152     private void dispatchDialKeyEvent(1.5.0/docs/api/javax/swing/text/View.html">View v) {
153         if (onDialKeyListener != null) {
154  
155             onDialKeyListener.onTrigger(title,v);
156  
157         }
158     }
159  
160     private void dispatchDialTouchEvent(1.5.0/docs/api/javax/swing/text/View.html">View v) {
161         if (onDialTouchListener != null) {
162             onDialTouchListener.onTouchTrigger(v);
163         }
164     }
165  
166     @1.5.0/docs/api/java/lang/Override.html">Override
167     public boolean onLongClick(1.5.0/docs/api/javax/swing/text/View.html">View v) {
168         // TODO Auto-generated method stub
169         dispatchDialKeyEvent(v);
170         return true;
171     }
172  
173     @1.5.0/docs/api/java/lang/Override.html">Override
174     public boolean onTouch(1.5.0/docs/api/javax/swing/text/View.html">View v, MotionEvent event) {
175         // TODO Auto-generated method stub
176  
177          switch (event.getAction()) {
178          case MotionEvent.ACTION_DOWN:
179              break;
180          case MotionEvent.ACTION_MOVE:
181              break;
182          case MotionEvent.ACTION_UP:
183              // update mode every other time we change paint colors
184              mModeIndex=1;
185              dispatchDialTouchEvent(v);
186              break;
187      }
188  
189         return false;
190     }
191 }

这里创建了一个类继承View，算是完全自定义组件，然后再onDraw方法中将所需要的内容画在Canvas上。有了这个类，只要去实现这个类，并传入相应的参数便可以得到如上效果的Custom Button.

那么我们该如何去使用这个类，并且点击显示相应的效果呢？

 1 private SampleView myView;
 2     private Map<Integer, SampleView> mView=new HashMap<Integer,SampleView>();
 3     private Map<Integer, Integer> mColor=new HashMap<Integer,Integer>();
 4  
 5 //取得所有的分类信息
 6 catCursor=appState.db.getAlltags();
 7  
 8 linearLayoutForDetail.removeAllViews();
 9 mView.clear();
10 mColor.clear();
11 preTag=1;
12  
13         for (catCursor.moveToFirst(); !catCursor.isAfterLast(); catCursor.moveToNext()) { //根据数据库中分类的个数信息
14  
15             name=catCursor.getString(catCursor.getColumnIndex(tagsInfo.TAG_NAME));
16             tag_id=catCursor.getInt(catCursor.getColumnIndex(tagsInfo.TAG_ID));
17             colorGiga=catCursor.getInt(catCursor.getColumnIndex(tagsInfo.TAG_COLOUR));
18  
19             myView=new SampleView(this,name,colorGiga);
20             myView.setTag(tag_id);
21  
22             mView.put(tag_id,myView);
23             mColor.put(tag_id,colorGiga);
24  
25             myView.setOnDialKeyListener(this);
26             myView.setOnDialTouchListener(this);
27  
28             linearLayoutForDetail.addView(myView,lp);
29         }

实现以上代码便得到图1所示的效果，那么我们该如何实现单击变化背景色以及字体颜色呢？

 1 /**
 2      * 触摸事件
 3      */
 4     @1.5.0/docs/api/java/lang/Override.html">Override
 5     public void onTouchTrigger(1.5.0/docs/api/javax/swing/text/View.html">View v) {
 6         // TODO Auto-generated method stub
 7  
 8         nowView=(SampleView) v;
 9         nowView.setColor(0x00000000);
10         nowView.setIndex(0);
11         nowView.postInvalidate();
12  
13         if(!v.getTag().equals(preTag)){ //如果当前SampleView和之前点击的不一样,则将之前的SampleView颜色还原
14             preView=mView.get(preTag);
15             preView.setColor(mColor.get(preTag));
16             preView.setIndex(1);
17             preView.postInvalidate();
18         }
19  
20         preTag=new 1.5.0/docs/api/java/lang/Integer.html">Integer(v.getTag().toString());
21  
22         updateList(preTag);
23     }

原文链接:http://bg135.com/custom-button.html

posted @ 2011-09-05 15:03 Ithouge 阅读(215) 评论(0) 收藏举报

刷新页面返回顶部

Ithouge

Custom Button

公告