Android圆角Tag控件的另类实现

一般的圆角标签控件都是用xml设置shape做实现。可是假设我们想要做一个更加强大通用的的圆角控件,不须要使用者去关心圆角,仅仅设置背景就能够了。

应该怎么实现呢?这个就须要把背景先设置成图片,然后再把这个图片处理成圆角的,最后再设置成背景。基本思路例如以下代码:

Bitmap bitmap = ((BitmapDrawable)getBackground()).getBitmap();
BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Matrix matrix = new Matrix();
bitmapShader.setLocalMatrix(matrix);
// 设置缩放
float scale = Math.max(getWidth() * 1.0f / bmp.getWidth(), getHeight() * 1.0f / bmp.getHeight());  
mBitmapPaint.setShader(bitmapShader);
Canvas canvas = new Canvas(bitmap);

if (mRadius > 0) {
    canvas.drawRoundRect(mDrawableRect, mRadius, mRadius, mBitmapPaint);
} else {
    canvas.drawRect(mDrawableRect, mBitmapPaint);
}
setBackground(new BitmapDrawable(bitmap));

上面的代码把背景图取出来后,用着色器画圆角(假设背景色是color,须要做一次ColorDrawable转Bitmap的转换)。这样就行强制实现一个圆角背景的TextView了。你也可以使用Xfermode来做,网上文章非常多。不做赘述了。

如今问题来了,假设我背景是ShapDrawable(xml:shape)或者设置的StateListDrawable(selector)呢?这就没办法了,ShapeDrawable还可以做自己定义,可是StateListDrawable开放的可以自己定义的接口非常少,全然没办法。

此外,假设我们须要设置drawableLeft或者drawableRight。也会掩盖住背景。圆角也就没了。

假设也对这些compound drawable也设置圆角。并且圆角的半径还不能和主空间的半径一样。否则会因为宽高不同。画出来的圆角也会不一样。

这个方法太复杂。

放弃!

有没有什么简单的办法呢?我们能够用Xfermode来对画板的底图做文章。

这里就要说到Android(预计其它OS也是差点儿相同)控件的实现方式了。

我们在显示屏看到的全部东西。事实上都是一块内存,放在一块叫做framebuffer的内存缓冲区里面。这块Buffer以像素点为单位,用一定的色彩规则,给我们排列出了各种看到的屏幕上的东西。Android通过一个叫Surface的系统来管理这一块FrameBuffer,所谓的控件,事实上就是依照一定的规则,告诉Surface系统怎么画我这一块区域。这样就行给我们具体的画出我们想要看到的画面了。关于细节,东西太多,以后再慢慢说。

继续说到实现圆角控件的问题来。

Android里面全部的控件,都给我们提供了一个叫onDraw()的方法,參数为Canvas。Canvas就是画布的意思,我们在这块布上面画的东西。就是空间的长相了。

这种方法会在View.draw()里面调用下来,告诉系统怎么画这个控件。比方TextView里面的onDraw就基本是一些写字。设置颜色,字体的操作,ImageView就是用Drawable来画canvas的操作。

Android提供了各种各样的方法,方便我们对这块Canvas进行操作。我们想要实现圆角,是不是能够对这块Canvas做点手脚呢?我们能够Xfermode来画一个椭圆形 的Bitmap在原图上面,然后仅仅保留他们相交的这一部分。去掉不相交的部分,圆角控件不就大功告成了?关于Xfermode,有一经典的图深动形象的说明了使用方法:

我们想要做的就例如以下图:

生成掩盖图的代码例如以下:

private Bitmap generateMaskBitmap() {
    Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
    Canvas bitmapCanvas = new Canvas(bitmap);
    RectF r = new RectF(0, 0, getWidth(), getHeight());
    Rect rect = new Rect(0, 0, getWidth(), getHeight());
    Paint bitmapPaint = new Paint();
    bitmapPaint.setAlpha(0);
    bitmapPaint.setColor(Color.TRANSPARENT);
    bitmapCanvas.drawRect(rect, bitmapPaint);
    bitmapPaint.reset();
    bitmapPaint.setStyle(Paint.Style.FILL);
    bitmapPaint.setAntiAlias(true);
    bitmapPaint.setColor(Color.WHITE);
    bitmapCanvas.drawRoundRect(r, mRadius, mRadius, bitmapPaint);
    return bitmap;
}

onDraw代码例如以下:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (mRadius > 0) {
        Bitmap bitmap = generateMaskBitmap();
        Paint bitmapPaint = new Paint();
        bitmapPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        canvas.drawBitmap(bitmap, 0f, 0f, bitmapPaint);
        bitmap.recycle();
    }
}

可是这样并不OK啊。用这个控件却是这样:

<com.example.widget.TagTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff0000"
    android:text="哎哟不错"
    app:border_radius="5dp"
    />

为什么会这样呢?圆角是有了,可是为嘛周围是是黑色啊。感觉代码是没问题的呀,后来去网上搜了下。XferMode在开启了硬件加速的情况下有一些局限性(http://developer.android.com/guide/topics/graphics/hardware-accel.html#unsupported),预计这个问题也是局限性之中的一个。于是在本widget关闭了硬件加速,又一次build后,发现还是没有变化。我就有点晕了,为嘛不是其它颜色。偏偏是黑色啊,并且我的maskBitmap也是设置的白色呀。

解释仅仅能为一个了:我的Background没有设置alpha值,没有不论什么的透明度,导致删除的颜色变为了无颜色状态。我来设置一个带有透明度的背景色试试:

<com.example.widget.TagTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#feff0000"
    android:text="哎哟不错"
    app:border_radius="5dp"
    />

能够了耶。这样,以后不管这个控件做了什么,画出来周围肯定是圆角的。

总结

这个尽管实现了强制性的圆角,可是非常有局限性。假设View的Canvas本身没有透明通道,被清除的圆角处就会变成黑色。

我有尝试事先画一个透明的Color在控件上,可是仍然无论用。详细原因还不知道。还没来得及深入的去看。假设有哥们知道。最好还是分享一下原因。

建议:对于这样的需求的建议是建立一个Factory,用来生成一些定义好的Tag控件。这样更加的符合Android规范。也可以非常好的管理各种Tag控件。

代码链接:http://download.csdn.net/detail/yutao52shi/8972539

时间: 2024-10-10 08:43:31

Android圆角Tag控件的另类实现的相关文章

Android 中常见控件的介绍和使用

1 TextView文本框 1.1 TextView类的结构 TextView 是用于显示字符串的组件,对于用户来说就是屏幕中一块用于显示文本的区域.TextView类的层次关系如下: java.lang.Object   ? android.view.View   ? android.widget.TextView 直接子类: Button, CheckedTextView, Chronometer, DigitalClock, EditText 间接子类: AutoCompleteTextV

android中倒计时控件CountDownTimer分析

android中倒计时控件CountDownTimer分析 1 示例代码 new CountDownTimer(10000, 1000) { public void onTick(long millisUntilFinished) { LogUtil.i(TAG, "seconds remaining: " + millisUntilFinished / 1000); } public void onFinish() { LogUtil.i(TAG, "done!"

Android中用seekbar控件控制歌曲的进度

本人菜鸟一枚,在编写android中用seekbar控件控制歌曲的进度和seekbar随着歌曲的播放自动运动的程序有一些自己的见解,希望各位大牛们多多指点······ 废话先不多说了,先贴一张程序的图吧: 界面不怎么好看,没经过美化,大家将就这看一下吧. 主要思路是运用线程每隔一秒显示一下seekbar控件所在的位置,(这个是使进度条随着歌曲的进度而不断的变化,如果大家想使进度条增加的更连续,可以改变程序循环运行的时间,使其更快) 我只把关于seekbar的程度拿出来了: private int

android学习五(android中基本控件的使用)

前面已经学了activity的一些使用,那么下面我们进行android中基本的控件的学习和使用. 1.android中的TextView控件 新建一个项目,项目名为UITest,才有默认的设置,修改布局文件的内容,如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" a

【ANDROID 初学】控件--IMAGEVIEW的使用方法

Start Android 1.图片视图(ImageView)的基本概念 2.<InameView/>与ImageView 3.神奇的ScaleType属性 当图片大小与ImageView大小不匹配的时候,可以通过该属性来调整图片与ImageView控件的位置关系. android:scaleType:  android:scaleType是控制图片如何resized/moved来匹对ImageView的size. ImageView.ScaleType / android:scaleType

Android 遍历界面控件

//遍历界面上的控件 fubin.pan LinearLayout sLinerLayout = (LinearLayout)findViewById(R.id.layout_scr); for (int i = 0; i < sLinerLayout.getChildCount(); i++) { View v=sLinerLayout.getChildAt(i); if ( v instanceof RadioGroup){ RadioGroup mRadioGroup = (RadioGr

Android两个控件叠在一起,如何让被挡住的控件显示出来

Android两个控件叠在一起,如何让被挡住的控件显示出来 问题 : 两个控件叠在一起,如何让被挡住的控件显示出来? 比如A,B两个控件,A被B挡住,目前A要显示出来,B不能被隐藏,A的高度只有那么一点,显示出来的时候,B不能隐藏. 其实很简单 A.bringToFront即可.

xamarin android——数据绑定到控件(四)

本文为通过自定义列表适配器定义ListView,以上文为基础,基于ListActivity. 定义列表项布局,包含一个图片显示,标题和描述 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="80dip"> <ImageV

xamarin android——数据绑定到控件(三)

如果当前活动中,只存在一个listview视图,可以借助ListActivity快速的实现一个列表,即当前Activity继承ListActivity.在OnCreate方法中简单的两行代码,就可以创建一个用户列表. string[] items = new string[]{ "列表 1","列表 2","列表 3","列表 4","列表 5","列表 6","列表 7&qu