利用自定义控件代替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(
PLEX_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="/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;
}
}
