自定义视图-圆角TextView、ImageView、Button

今天总结了一下如何自定义圆角视图的方法，使用了一种比较简单的方式，直接在控件属性里面添加.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>

 

 

 

 点击资源下载