今天总结了一下如何自定义圆角视图的方法，使用了一种比较简单的方式，直接在控件属性里面添加.9格式圆角的png图片背景，然后即可达到预期的效果，同时还挺方便，在项目中使用到这里方式来设置效果，还是很常见的。那我就不见解了，现在讲如何自定义ImageView、LinearLayout，实现在ImageView中可以显示文字，同时在LinearLayout中显示图文并茂的效果，如下图：
一、前面二个直接添加.9格式图片作为TextView、Button控件的背景，展示出圆角效果
二、后面三个自定义ImageView、LinearLayout，即继承ImageView、LinearLayout，然后重写构造方法和其中的onDraw方法。
三、自定义视图三部曲：第一声明属性、第二继承需要的自定义视图的父类，例如ImageView、LinearLayout或者View、第三在布局文件中引用
第一步：创建attrs.xml，并定义需要使用到的属性，我习惯的自定义方式，如下图：
<resources>
<declare-styleable name="MyImageView">
<attr name="android:text" />
<attr name="android:textColor" />
<attr name="android:textSize" />
<attr name="android:background"/>
</declare-styleable>
</resources>
说明：这里，我直接定义属性名字系统的一样，在布局文件中引用的时候，比较方便，你也可以定义成<attrs name=”myText” format=”string”/>表示属性名为：myText，格式是字符串类型，或者定义成颜色类型：<attrs name=”myColor” format=”color”/>，其中format的取值主要有：
1. reference：参考某一资源ID。
2. color：颜色值。
3. boolean：布尔值。
4. dimension：尺寸值。
5. float：浮点值。
6. integer：整型值。
7. string：字符串。
8. fraction：百分数。
9. enum：枚举值。
10. flag：位或运算。
这里我只列出取值的类型，具体怎么使用请前往飞腾空间查看我另一篇帖子。
第二步：继承ImageView，重写onDraw方法
package cn.teachcourse.utils.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.FontMetricsInt;
import android.util.AttributeSet;
import android.widget.ImageView;
import cn.teachcourse.round.R;
/**
* 重写onDraw方法，绘制独特的ImageView
*
* @author 飞腾：http://teachcourse.cn
* @version 创建：2015-9-30上午9:35:05
*/
public class MyRoundImageView extends ImageView {
private int textColor;
private float textSize;
private String textContent;
private Paint mPaint;
private FontMetricsInt mFontMetricsInt;
private int mWidth;
private int mHeight;
private float mStringWidth;
public MyRoundImageView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public MyRoundImageView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
TypedArray ta = context.obtainStyledAttributes(attrs,
R.styleable.MyImageView);
textColor = ta.getColor(R.styleable.MyImageView_android_textColor, 0);
textSize = ta.getDimension(R.styleable.MyImageView_android_textSize,
12f);
textContent = ta.getString(R.styleable.MyImageView_android_text);
initPaint();
ta.recycle();
}
public MyRoundImageView(Context context, AttributeSet attrs,
int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
int x, y;
if (mPaint.getTextAlign() == Paint.Align.LEFT) { // 左
x = mWidth / 2 - (int) (mStringWidth / 2);
} else if (mPaint.getTextAlign() == Paint.Align.CENTER) { // 中
x = mWidth / 2;
} else { // 右
x = mWidth / 2 + (int) (mStringWidth / 2);
}
y = (mHeight - mFontMetricsInt.ascent - mFontMetricsInt.descent) / 2;
canvas.drawText(textContent, x, y, mPaint);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
}
private float measureText() {
mStringWidth = mPaint.measureText(textContent);
return mStringWidth;
}
private void initPaint() {
mPaint = new Paint();
mPaint.setStrokeWidth(1);
mPaint.setTextSize(textSize);
mPaint.setTextAlign(Paint.Align.CENTER);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(textColor);
mFontMetricsInt = mPaint.getFontMetricsInt();
measureText();
}
}
第三步：布局文件中引用
查看效果：
现在算是完成了自定义ImageView显示文字、圆角效果，关键是重写onDraw方法，在里面绘制显示的文字，因为ImageView本身没提供显示文字的属性，如果对Paint、Canvas熟悉的，自然很容易理解，不是问题。接下来我们看看，这种重写的LinearLayout如何实现：
第一步：声明需要使用到的属性
<declare-styleable name="MyImageButtton">
<attr name="android:src" />
<attr name="android:background" />
<attr name="android:text" />
<attr name="android:textColor"/>
</declare-styleable>
第二步：继承LinearLayout父类
package cn.teachcourse.utils.view;
import cn.teachcourse.round.R;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
/**
*
* @author 飞腾：http://teachcourse.cn
* @version 创建：2015-9-29下午2:50:25
*/
@SuppressLint("NewApi")
public class MyRoundButtonView extends LinearLayout {
private RelativeLayout round_bg_ll;
private ImageView round_iv;
private TextView round_tv;
public MyRoundButtonView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
View view = LayoutInflater.from(context).inflate(
R.layout.my_round_btn_view, this, true);
round_bg_ll = (RelativeLayout) view.findViewById(R.id.my_round_rl);
round_iv = (ImageView) view.findViewById(R.id.my_icon_iv);
round_tv = (TextView) view.findViewById(R.id.my_info_tv);
TypedArray ta = context.obtainStyledAttributes(attrs,
R.styleable.MyImageButtton);
CharSequence text = ta.getText(R.styleable.MyImageButtton_android_text);
Drawable background = ta
.getDrawable(R.styleable.MyImageButtton_android_background);
Drawable src = ta.getDrawable(R.styleable.MyImageButtton_android_src);
int color=ta.getColor(R.styleable.MyImageButtton_android_textColor, 0);
if (text != null)
round_tv.setText(text);
if (background != null)
// round_bg_ll.setBackground(background);
round_bg_ll.setBackgroundResource(ta.getResourceId(
R.styleable.MyImageButtton_android_background, 0));
if (src != null)
round_iv.setImageDrawable(src);
if(color!=0)
round_tv.setTextColor(color);
}
public MyRoundButtonView(Context context, AttributeSet attrs,
int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
// TODO Auto-generated constructor stub
}
public MyRoundButtonView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
}
第三步：布局文件中引用
<cn.teachcourse.utils.view.MyRoundButtonView
android:id="@+id/round_btn_view_001"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/round_view_iv"
android:layout_marginTop="30dp"
android:background="@drawable/green_bg"
android:src="@drawable/ic_launcher"
android:text="自定义属性"
android:textColor="#FFFFFF" />
效果显示：
说明：这里解释一下这里，直接加载一个自定义的my_round_btn_view.xml文件，然后取得其View对象对应的控件
LayoutInflater.from(context).inflate(
R.layout.my_round_btn_view, this, true);
my_round_btn_view.xml文件内容
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/my_round_rl"
android:layout_gravity="center_vertical" >
<ImageView
android:id="@+id/my_icon_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
android:layout_toLeftOf="@+id/my_info_tv"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/my_info_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="显示文字"
android:layout_centerInParent="true"/>
</RelativeLayout>
点击资源下载