安卓中自定义view控件代替radiogroup实现颜色渐变效果的写法

利用自定义控件代替radiogroup，同时实现在使用viewpager进行翻页的时候，实现颜色渐变的效果。

一：

首先创建一个自定义view类继承自View类，所有的控件均用canvas绘制出来（包括图片及文字），这里以MyTabIcon这个类为例，相关代码如下：

package com.example.catmessage.view;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Paint.Style;

import android.graphics.PorterDuff.Mode;

import android.graphics.PorterDuffXfermode;

import android.graphics.Rect;

import android.graphics.drawable.BitmapDrawable;

import android.graphics.drawable.Drawable;

import android.util.AttributeSet;

import android.util.TypedValue;

import android.view.View;

import com.example.catmessage.R;

public class MyTabIcon extends View{

Drawable drawable;//自定义view所使用的图案
int color;//自定义view所使用的颜色
String text;//自定义view所使用的文本
int textsize;//自定义view所使用的文本的大小

Paint drawPaint;//用来画图标的
Paint textPaint;//用来写图标文字的

Bitmap bitmap;//drawable--转换-->bitmap

int alpha;//取值范围0~255，它决定了画笔颜色的浓度(透明度)

public MyTabIcon(Context context, AttributeSet attrs) {
super(context, attrs);
init(context,attrs);
initPaint();
}

private void initPaint() {
textPaint = new Paint();
textPaint.setTextSize(textsize);
textPaint.setStyle(Style.FILL);

drawPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
}
/**
* 读取用户在布局文件中设定的属性
* @param context
* @param attrs
*/
private void init(Context context, AttributeSet attrs) {
TypedArray t = context.obtainStyledAttributes(attrs, R.styleable.MyTabIcon);
drawable = t.getDrawable(R.styleable.MyTabIcon_icon_drawable);
//从drawable到bitmap的转化
bitmap = ((BitmapDrawable)drawable).getBitmap();
//把bitmap放大
bitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth()*2, bitmap.getHeight()*2, true);

text = t.getString(R.styleable.MyTabIcon_icon_text);
textsize = t.getDimensionPixelSize(R.styleable.MyTabIcon_icon_text_size, 
(int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 
11, getResources().getDisplayMetrics()));
color = t.getColor(R.styleable.MyTabIcon_icon_color, Color.GREEN);
t.recycle();
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制图标（用灰色绘制）
float left = getWidth()/2 - bitmap.getWidth()/2;
float top = getHeight()/2 - bitmap.getHeight()/2 - 12;
canvas.drawBitmap(bitmap, left, top, null);

//绘制文字（用灰色绘制）

Rect bounds = new Rect();
textPaint.getTextBounds(text, 0, text.length(), bounds);
float x = getWidth()/2 - bounds.width()/2;
float y = getHeight()/2 + bitmap.getHeight()/2+bounds.height() - 12;
textPaint.setColor(Color.GRAY);
canvas.drawText(text, x, y, textPaint);

//利用alpha值，进行彩(绿)色文字的绘制
drawColorText(canvas,x,y,alpha);
//利用alpha值，进行彩(绿)色图标的绘制
drawColorBitmap(canvas,left,top,alpha);
}

private void drawColorBitmap(Canvas canvas, float left, float top,
int alpha2) {
//画一幅带颜色的图
Bitmap bm = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas myCanvas = new Canvas(bm);
myCanvas.drawBitmap(bitmap, 0, 0, null);

drawPaint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
drawPaint.setColor(color);
drawPaint.setAlpha(alpha2);

Rect rect = new Rect(0,0,bm.getWidth(),bm.getHeight());
myCanvas.drawRect(rect, drawPaint);

//重置已经设置了xfermode以及颜色和alpha的drawpaint

//此处注意画笔的使用（最好加上下面这句话，否则可能会出现意想不到的效果）
//drawPaint.reset();

canvas.drawBitmap(bm, left, top, null);

}
private void drawColorText(Canvas canvas, float x, float y, int alpha2) {
textPaint.setColor(color);
textPaint.setAlpha(alpha2);
canvas.drawText(text, x, y, textPaint);
}
public void setTabIconAlpha(int alpha){
this.alpha = alpha;
//重画(重复调用一次onDraw方法)
invalidate();
}

}

二：在res/values/attrs.xml文件中为自定义的view控件添加相关属性

 <declare-styleable name="MyTabIcon">

        <attr name="icon_drawable" format="reference"></attr>

        <attr name="icon_text" format="string"></attr>

        <attr name="icon_color" format="color"></attr>

        <attr name="icon_text_size" format="dimension"></attr>

    </declare-styleable>

三：到mainactivity的布局文件中进行相关控件的定义，同时注意需要声明命名空间

 <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="60dp"

        android:background="#ffeeeeee"

        android:orientation="horizontal" >

        <com.tarena.catmessage.view.MyTabIcon

            android:id="@+id/mti_main_message"

            android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            myapp:icon_drawable="@drawable/tab_icon_message"

            myapp:icon_text="喵信" >

        </com.tarena.catmessage.view.MyTabIcon>

        <com.tarena.catmessage.view.MyTabIcon

            android:id="@+id/mti_main_friend"

            android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            myapp:icon_drawable="@drawable/tab_icon_contact"

            myapp:icon_text="喵友" >

        </com.tarena.catmessage.view.MyTabIcon>

        <com.tarena.catmessage.view.MyTabIcon

            android:id="@+id/mti_main_find"

            android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            myapp:icon_drawable="@drawable/tab_icon_find"

            myapp:icon_text="喵圈" >

        </com.tarena.catmessage.view.MyTabIcon>

        <com.tarena.catmessage.view.MyTabIcon

            android:id="@+id/mti_main_setting"

            android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            myapp:icon_drawable="@drawable/tab_icon_setting"

            myapp:icon_text="设置" >

        </com.tarena.catmessage.view.MyTabIcon>

    </LinearLayout>

在根布局文件中申明命名空间：

xmlns:myapp="http://schemas.android.com/apk/res/com.example.catmessage"

四：到mainactivity.Java中进行相关属性的初始化，并利用黄油刀对自定义View控件添加点击监听以及和viewpager的绑定

@Bind(R.id.vp_main_viewpager)
ViewPager viewPager;
MyPagerAdapter adapter;

@Bind(R.id.mti_main_message)
MyTabIcon mtiMessage;
@Bind(R.id.mti_main_friend)
MyTabIcon mtiFriend;
@Bind(R.id.mti_main_find)
MyTabIcon mtiFind;
@Bind(R.id.mti_main_setting)
MyTabIcon mtiSetting;

MyTabIcon[] myTabIcons;

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

ButterKnife.bind(this);
initView();
initViewPager();
}

private void initView() {
myTabIcons = new MyTabIcon[4];
myTabIcons[0] = mtiMessage;
myTabIcons[1] = mtiFriend;
myTabIcons[2] = mtiFind;
myTabIcons[3] = mtiSetting;
myTabIcons[0].setTabIconAlpha(255);
}

private void initViewPager() {
adapter = new MyPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
viewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override
public void onPageSelected(int arg0) {
for(MyTabIcon mti:myTabIcons){
mti.setTabIconAlpha(0);
}
myTabIcons[arg0].setTabIconAlpha(255);

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
//Log.d("TAG","onPageScrolled: arg0:"+arg0+" , arg1:"+arg1+" , arg2:"+arg2);

//此处注意如果myTabIcons.length不减一，当滑到最后一个界面时，程序会崩溃，因为数组下标越界
if(arg0<myTabIcons.length-1){
myTabIcons[arg0].setTabIconAlpha((int) ((1-arg1)*255));
myTabIcons[arg0+1].setTabIconAlpha((int) (arg1*255));
}
}

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
}

@OnClick({R.id.mti_main_message,R.id.mti_main_friend,R.id.mti_main_find,R.id.mti_main_setting})
public void setFragment(View v){
int id = v.getId();
switch (id) {
case R.id.mti_main_message:
viewPager.setCurrentItem(0,false);
break;
case R.id.mti_main_friend:
viewPager.setCurrentItem(1,false);
break;
case R.id.mti_main_find:
viewPager.setCurrentItem(2,false);
break;
case R.id.mti_main_setting:
viewPager.setCurrentItem(3,false);
break;
}
}