改变Android按钮背景颜色的高效方法

本文将介绍一种有效改变Android按钮颜色的方法。

按钮可以在状态改变时改变其颜色(例如按下,禁用,高亮显示)。但是,这需要一一说明每个状态。这篇文章将提供你一个根据状态变化轻松改变按钮颜色的方法。如果你正在写自定义视图,那么不妨也来读一读,因为中间我会涉及到如何用自定义属性实现自定义视图的相关内容。

如何实现

Android提供了灵活的绘制选择机制,可根据视图状态转变视图外观。每个状态通过一个单独的部分而存在。例如:在正常、禁用、按下、高亮状态下的按钮有着不同的背景颜色。请看下面的代码示例:

button_1_background.xml

?
1
2
3
4
5
6
7
8
<selector xmlns:android= "http://schemas.android.com/apk/res/android" >
<!&mdash; pressed state -->
<item android:drawable= "@drawable/button_1_selected" android:state_pressed= "true" />
<!-- focused state -->
<item android:drawable= "@drawable/button_1_focused" android:state_focused= "true" />
<!--  default state -->
<item android:drawable= "@drawable/button_1_normal" />
</selector>

每个状态drawables的属性(button_1_selected, button_1_focused,button_1_normal)必须定义在相应的在drawables目录下:

button_1_normal.xml

?
1
2
3
4
<shape xmlns:android= "http://schemas.android.com/apk/res/android" >
     <solid android:color= "@color/button_1_normal_background" />
     <corners android:radius= "10dip" />
</shape>

button_1_focused.xml

?
1
2
3
4
<shape xmlns:android= "http://schemas.android.com/apk/res/android" >
     <solid android:color= "@color/button_1_focused_background" />
     <corners android:radius= "10dip" />
</shape>

button_1_selected.xml

?
1
2
3
4
<shape xmlns:android= "http://schemas.android.com/apk/res/android" >
     <solid android:color= "@color/button_1_selected_background" />
     <corners android:radius= "10dip" />
</shape>

然后设置按钮背景:

?
1
android:background= "@drawable/button_1_background"

这种方法非常灵活。但是,当你的app有许多按钮,而每个按钮的颜色又各不相同时,维护每个按钮的上述所有XML文件就会变得异常困难起来。如果你改变正常状态的按钮颜色,那么你必须改变其他状态的颜色。在上面的例子中,每个按钮需要4个XML文件。那么如果你的应用程序有10个或更多个按钮呢?

为了清楚说明我的意思,请看下面的截图:

 main screen.

 send screen.

这些截图来自于一款免费产品BMEX。

这两张图片分别是app的主屏幕和发送屏幕。两个屏幕都采用了Metro风格。每个屏幕都有6个不同颜色的按钮。并且按钮的颜色会根据状态的改变而改变。共计12个按钮,所以我们需要12个drawable selector XML文件和24个drawable state XML文件。并且随着app的发展,软件还得允许新的屏幕和新的按钮的添加。维护这些内容可不是一项简单的任务。

为了使过程更加简单和高效,我们另寻了一种更有效的解决方案——并且已经实现在自定义按钮视图中。这是一个容易初始化的按钮。我们称之为RoundButton,因为它支持圆角。

在另一个产品中,我们需要高亮功能,但是,又不想因此单独创建自定义视图。所以,我们把它添加到RoundButton中。请看下面的截图:

 highlighed.

正如你所见,我们可以选择也可以不选屏幕上的按钮(顶部的列表图表和每个元素后面的添加图标)。当按钮被选中后,它的highlighted状态就被设置为true,反之,则为false。并且按钮的外观会作适当改变。在上面的例子中,高亮模式使用了“image”。在这种模式下,图像的可见象素会被绘制为高亮颜色。

首先,我们为RoundButton定义属性集。这是一组可以通过布局XML设置的属性。

attrs_round_button.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<resources>
 
     <declare-styleable name= "RoundButton" >
         <attr name= "image" format= "reference" />
         <attr name= "bgcolor" format= "color" />
         <attr name= "text" format= "string" />
 
         <attr name= "radius" format= "float" />
 
         <attr name= "highlightColor" format= "color" />
         <attr name= "highlightMode" format= "enum" >
             < enum name= "none" value= "0" />
             < enum name= "image" value= "1" />
             < enum name= "background" value= "2" />
         </attr>
     </declare-styleable>
 
</resources>

我们增加了 image,bgcolor,text,边框圆角半径,highlightColor和highlightMode属性。按下状态的颜色会从bgcolor导出(后面会描述的)。

实现按钮

首先,我们需要实现构造函数和解析参数。我们创建了3个不同的构造函数:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public RoundButton(Context context, AttributeSet attrs,  int defStyle) {
     super (context, attrs, defStyle);
 
     init(attrs, defStyle);
}
 
public RoundButton(Context context, AttributeSet attrs) {
     super (context, attrs);
 
     init(attrs,  0 );
}
 
public RoundButton(Context context) {
     super (context);
 
     init( null 0 );
}

所有这些构造函数调用init方法。

现在,我们需要实现init方法。它将属性集和默认样式作为输入参数。在init方法中,我们获取属性值,并初始化内部变量。如果属性集为null,那就使用默认值。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
private void init(AttributeSet attrs,  int defStyle) {
     Drawable image;
     int bgcolor;
     String text;
 
     if (attrs !=  null ) {
         final TypedArray a = getContext().obtainStyledAttributes(attrs,
                 R.styleable.RoundButton, defStyle,  0 );
 
         image = a.getDrawable(R.styleable.RoundButton_image);
 
         bgcolor = a.getColor(R.styleable.RoundButton_bgcolor,  0xffffffff );
 
         text = a.getString(R.styleable.RoundButton_text);
 
         radius = a.getFloat(R.styleable.RoundButton_radius,  12 .0f);
 
         highlightMode = HighlightMode.getValue(a.getInt
         (R.styleable.RoundButton_highlightMode, HighlightMode.None.ordinal()));
 
         highlightColor = a.getColor(R.styleable.RoundButton_highlightColor,  0xff00b5ff );
 
         a.recycle();
     }
     else {
         image =  null ;
 
         text =  "" ;
 
         bgcolor =  0xff808080 ;
 
         radius =  12 .0f;
 
         highlightMode = HighlightMode.None;
 
         highlightColor =  0xff00b5ff ;
     }
 
     init(image, bgcolor, text);
}

然后,我们创建另一个init方法。这个方法用于创建对象,并需要渲染按钮的内容。 此处的init方法声明为public,因为创建RoundButton时需要调用它。它创建了背景和按下时的“喷漆(paint)”——绘制正常和按下状态时的背景的对象。按下的颜色选取比bgcolor更亮的颜色。使颜色变亮的的方法,稍后会进行说明。这里初始化了高亮模式。如果背景设置为高亮,那就创建高亮喷漆,用于绘制高亮时的按钮背景。如果图像模式设置为高亮,那就创建高亮图像。在createHighlightImage方法中创建图像的代码,之后会一一给出。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public void init(Drawable image,  int bgcolor, String text) {
     this .image = image;
 
     bgpaint =  new Paint(Paint.ANTI_ALIAS_FLAG);
     bgpaint.setColor(bgcolor);
 
     pressedBgpaint =  new Paint(Paint.ANTI_ALIAS_FLAG);
     pressedBgpaint.setColor(brighter(bgcolor));
 
     if (text ==  null )
         text =  "" ;
 
     this .text = text;
 
     textPaint =  new Paint(Paint.ANTI_ALIAS_FLAG);
     textPaint.setColor( 0xffffffff );
     textPaint.setTextAlign(Paint.Align.CENTER);
     textPaint.setTextSize(pixelsToSp(getContext(), textSize));
 
     if (highlightMode == HighlightMode.Background) {
         highlightPaint =  new Paint(Paint.ANTI_ALIAS_FLAG);
         highlightPaint.setColor(highlightColor);
     }
     else if (highlightMode == HighlightMode.Image) {
         highlightImage = createHighlightImage();
     }
 
     setClickable( true );
}

要获得按下状态的色值,我们创建了brighter方法。它将颜色作为参数,并返回比该颜色更亮的颜色。这个方法也很简单:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public void init(Drawable image,  int bgcolor, String text) {
     this .image = image;
 
     bgpaint =  new Paint(Paint.ANTI_ALIAS_FLAG);
     bgpaint.setColor(bgcolor);
 
     pressedBgpaint =  new Paint(Paint.ANTI_ALIAS_FLAG);
     pressedBgpaint.setColor(brighter(bgcolor));
 
     if (text ==  null )
         text =  "" ;
 
     this .text = text;
 
     textPaint =  new Paint(Paint.ANTI_ALIAS_FLAG);
     textPaint.setColor( 0xffffffff );
     textPaint.setTextAlign(Paint.Align.CENTER);
     textPaint.setTextSize(pixelsToSp(getContext(), textSize));
 
     if (highlightMode == HighlightMode.Background) {
         highlightPaint =  new Paint(Paint.ANTI_ALIAS_FLAG);
         highlightPaint.setColor(highlightColor);
     }
     else if (highlightMode == HighlightMode.Image) {
         highlightImage = createHighlightImage();
     }
 
     setClickable( true );
}

接下来的方法是createHighlightImage。当图像设置为高亮模式时,它会调用上面所示的方法。但是开头有一些比较棘手的代码。它需要得到图像的像素。然后处理像素 ——如果像素是不透明的(alpha != 0),就用高亮色值取代它,但是如果像素是透明的,那就不用改动。通过这种操作,我们创建了更高亮的图像。然后,我们将修改后的像素放回位图。并且在方法的最后,创建并返回BitmapDrawable。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
private Drawable createHighlightImage() {
     int width = image.getIntrinsicWidth();
     int height = image.getIntrinsicHeight();
 
     Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
 
     Canvas canvas =  new Canvas(bitmap);
     image.setBounds( 0 0 , width, height);
     image.draw(canvas);
 
     int count = bitmap.getWidth() * bitmap.getHeight();
     int pixels[] =  new int [count];
 
     bitmap.getPixels(pixels,  0 , bitmap.getWidth(),  0 0 , bitmap.getWidth(), bitmap.getHeight());
     for ( int n =  0 ; n < count; n++) {
         boolean v = (Color.alpha(pixels[n])) !=  0 ;
 
         if (v) {
             int pixel = pixels[n];
 
             int alpha = Color.alpha(pixel);
             int red = Color.red(highlightColor);
             int green = Color.green(highlightColor);
             int blue = Color.blue(highlightColor);
 
             int color = Color.argb(alpha, red, green, blue);
 
             pixels[n] = color;
         }
     }
 
     bitmap.setPixels(pixels,  0 , bitmap.getWidth(),  0 0 , bitmap.getWidth(), bitmap.getHeight());
 
     return new BitmapDrawable(getResources(), bitmap);
}

为了处理状态变化,我们需要处理触摸事件。所以需要实现触摸处理。当我们触摸按钮时,它的状态就会变为pressed(按下),并重绘按钮中的内容。当按钮没有被触摸,那它的pressed标志就设置为false,并重绘按钮中的内容。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Override
public boolean onTouchEvent(MotionEvent event) {
     int action = event.getActionMasked();
 
     switch (action) {
     case MotionEvent.ACTION_DOWN:
         pressed =  true ;
         invalidate();
         break ;         
     case MotionEvent.ACTION_UP:
         pressed =  false ;
         invalidate();
         break ;
     case MotionEvent.ACTION_CANCEL:
     case MotionEvent.ACTION_OUTSIDE:
     case MotionEvent.ACTION_HOVER_EXIT:
         pressed =  false ;
         invalidate();
         break ;
     }
 
     return super .onTouchEvent(event);
}

然后,我们实现onDraw按钮方法。此方法绘制了按钮的内容。自定义视图首次展示以及每次重绘时就调用这个onDraw方法。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
protected void onDraw(Canvas canvas) {
     RectF bounds =  new RectF( 0 0 , getWidth(), getHeight());
 
     Drawable image =  null ;
     Paint bgPaint =  null ;
 
     switch (highlightMode) {
     case None:
         image =  this .image;
         bgPaint = pressed ? pressedBgpaint :  this .bgpaint;
         break ;
     case Background:
         image =  this .image;
         if (pressed)
             bgPaint = pressedBgpaint;
         else
             bgPaint = highlighted ? highlightPaint :  this .bgpaint;
         break ;
     case Image:
         image = highlighted ? highlightImage :  this .image;
         bgPaint = pressed ? pressedBgpaint :  this .bgpaint;
         break ;
     }
 
     if (radius !=  0 .0f)
         canvas.drawRoundRect(bounds, radius, radius, bgPaint);
     else
         canvas.drawRect(bounds, bgPaint);
 
     Rect textBounds =  new Rect();
     if (text.length() >  0 )
         textPaint.getTextBounds(text,  0 , text.length(), textBounds);
 
     float h_dst = ((image !=  null ) ? image.getMinimumHeight() +
     ((text.length() >  0 ) ? spacing :  0 ) :  0 ) + textBounds.height();
 
     float xd = (bounds.width() - ((image !=  null ) ? image.getMinimumWidth() :  0 )) /  2 ;
     float yd = (bounds.height() - h_dst) /  2 ;
 
     if (image !=  null ) {
         image.setBounds(( int ) xd, ( int ) yd, ( int )
         (xd + image.getMinimumWidth()), ( int ) (yd + image.getMinimumHeight()));
         image.draw(canvas);
     }
 
     float xt = (bounds.width() -  0 * textBounds.width()) /  2 ;
     float yt = yd + ((image !=  null ) ? image.getMinimumHeight() +
     ((text.length() >  0 ) ? spacing :  0 ) : textBounds.height()); // + textBounds.height();
 
     canvas.drawText(text, xt, yt, textPaint);
 
     if (checked && checkable && checkedImage !=  null ) {
         checkedImage.setBounds(( int ) (bounds.width() -
         checkedImage.getMinimumWidth()), ( int ) (bounds.height() - checkedImage.getMinimumHeight()),
                 ( int ) bounds.width(), ( int ) bounds.height());
         checkedImage.draw(canvas);
     }
}

用法

为了整合RoundButton到代码,你需要下载源代码文件。在源代码文件中,有Eclipse项目,源代码和XML资源文件。你可以将它们复制到你的app项目中。或者编译RoundButton项目并将其作为库添加到你的项目。

如果你使用的是可视化编辑器,那就直接从控件列表中选择RoundButton,在添加它之后,设置其属性。

除了可视化编辑器,RoundButton既可以从布局XML,也可以从代码中插入。从布局XML添加的话,你可以这么使用。示例如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android"
     android:layout_width= "match_parent"
     android:layout_height= "wrap_content"
     android:focusable= "false"
     android:focusableInTouchMode= "false"
     android:descendantFocusability= "blocksDescendants"
     android:orientation= "horizontal"
     xmlns:app= "http://schemas.android.com/apk/res/com.bitgriff.bamp" >
 
     <com.bitgriff.bamp.helpers.RoundButton
         android:id= "@+id/button"
         app:radius= "0"
         app:image= "@drawable/ic_addtomedialibrary"
         app:bgcolor= "@color/transparent"
         app:highlightMode= "image"
         android:layout_width= "40dip"
         android:layout_height= "80dip"
         android:layout_centerVertical= "true"
         android:layout_alignParentRight= "true" />
 
</RelativeLayout>

从代码添加RoundButton,可以创造新的RoundButton实例。调用它的init方法传递图像(可为null),bgcolo和text。并添加RoundButton到你的ViewGroup:

?
1
2
roundButton =  new RoundButton(context);
roundButton.init(image, bgcolor, text);

进一步设想

此外,我们还可以改变RoundButton的形状。例如,制作圆形按钮,正如现在很多Android app中所见的那样。也可能配置图像位置(left、right、top、bottom)。等等。

总结

这篇文章主要描述了如何实现根据状态改变背景的自定义按钮。这个简单的组件能为我们节省很多时间。希望能对你有用。

许可证

这篇文章,以及相关源代码和文件,都是经过The BSD License许可的。

译文链接: http://www.codeceo.com/article/android-button-color.html
翻译作者: 码农网  – 小峰
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页