android自定义控件系列教程----真正的圆角button来了

42 篇文章 0 订阅

前沿:

现在网上随便输入一句圆角button就会出现很多博客和文章提示做这样的一个效果,但是那多半都是xml文件来做的,这样做有个很大的弊端,因为每一次都需要重写xml文件(就连简简单单的修改个按钮的颜色也需要修改)。~~为什么呢?因为不修改臣妾做不到啊!!!今天就带大家做一个真正的圆角button,我们还是来看效果吧。

正文干货开始:

很明显我们的按钮的背景就是我们要实现的圆角部分,那么我们情不自禁的想到了setBackground这个方法,看看里面的参数,需要的是一个Drawable,而我们的按钮还需要点击不可用的圆角效果,所以我们很自然的想到了StateListDrawable这个类 ,而且还要是圆角效果,那么就还需要RoundRectShape这个类和ShapeDrawable这个类,如果这些类不熟悉的,那么我就简单的介绍一下这些类的作用。

StateListDrawable

主要用来添加和管理背景每个状态应该使用那个Drawable的类,需要注意的是的它里面的每个状态的管理。其实可以可以理解为一个hashmap每个状态对应一个值而已。

RoundRectShape

还记得我们需要一个圆角矩形吗?对这个类就是我们主要的画圆角矩形的类。但是要注意它的构造方法,到时候代码里面再讲。

ShapeDrawable

状态管理和形状都有了,那么我们的猪脚就要登场了,对就是ShapeDrawble它就是我们setBackground里面需要的Drawble啊。
好了,每个类的作用都介绍了那么我们就直接上代码吧。
import android.content.Context;
import android.content.res.ColorStateList;
import android.graphics.Color;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.StateListDrawable;
import android.graphics.drawable.shapes.RoundRectShape;
import android.view.Gravity;
import android.widget.Button;

/*
 * @FileName:StyleButton.java
 * @Version:V1.0
 * @Date: 2014-5-7 Create
 * @author: edsheng 
 */
public class StyleButton extends Button
{
	public static int[]	mNormalState		= new int[] {};
	public static int[]	mPressState			= new int[] { android.R.attr.state_pressed, android.R.attr.state_enabled };
	public static int[]	mDisableState		= new int[] { -android.R.attr.state_enabled };
	public static int[]	mSelectedState		= new int[] { android.R.attr.state_selected, android.R.attr.state_enabled };
	private int			mRadius				= 0;																			//默认的圆角半径

	//默认文字和背景颜色
	private int			mBgNormalColor		= Color.RED;
	private int			mBgPressedColor		= Color.GREEN;
	private int			mTextNormalColor	= Color.WHITE;
	private int			mTextPressedColor	= Color.GRAY;

	public StyleButton(Context context)
	{
		super(context);
		initUI();
	}

	private void initUI()
	{
		setGravity(Gravity.CENTER);
		buildDraweableState();
		buildColorDrawableState();
	}

	/**
	 * 构建图片drawble
	 */
	private void buildColorDrawableState()
	{
		ColorStateList colorStateList = new ColorStateList(new int[][] { mPressState, mNormalState },
				new int[] { mTextPressedColor, mTextNormalColor });
		setTextColor(colorStateList);
	}

	/**
	 * 构建背景Drawble
	 */
	private void buildDraweableState()
	{

		float outRectr[] = new float[] { mRadius, mRadius, mRadius, mRadius, mRadius, mRadius, mRadius, mRadius };
		//创建状态管理器
		StateListDrawable drawable = new StateListDrawable();
		/**
		 * 注意StateListDrawable的构造方法我们这里使用的
		 * 是第一参数它是一个float的数组保存的是圆角的半径,它是按照top-left顺时针保存的八个值
		 */
		//创建圆弧形状
		RoundRectShape rectShape = new RoundRectShape(outRectr, null, null);
		//创建drawable
		ShapeDrawable pressedDrawable = new ShapeDrawable(rectShape);
		//设置我们按钮背景的颜色
		pressedDrawable.getPaint().setColor(mBgPressedColor);
		//添加到状态管理里面
		drawable.addState(mPressState, pressedDrawable);

		//		ShapeDrawable disableDrawable = new ShapeDrawable(rectShape);
		//		disableDrawable.getPaint().setColor(prssedClor);
		//		disableDrawable.getPaint().setAlpha(125);
		//		drawable.addState(mDisableState, disableDrawable);

		ShapeDrawable normalDrawable = new ShapeDrawable(rectShape);
		normalDrawable.getPaint().setColor(mBgNormalColor);
		drawable.addState(mNormalState, normalDrawable);
		//设置我们的背景,就是xml里面的selector
		setBackgroundDrawable(drawable);
	}

	/**
	 * 设置圆角矩形
	 * 
	 * @param radius
	 */
	public void setRadius(int radius)
	{
		this.mRadius = radius;
		buildDraweableState();
	}

	/**
	 * 设置按钮背景颜色
	 * 
	 * @param normalColor
	 * @param prssedClor
	 */
	public void setBgNormalPressedcolor(int normalColor, int prssedClor)
	{

		mBgNormalColor = normalColor;
		mBgPressedColor = prssedClor;
		buildDraweableState();

	}

	/**
	 * 设置按钮文字颜色
	 * 
	 * @param normalColor
	 * @param pressedColor
	 */
	public void setTextNormalPressedcolor(int normalColor, int pressedColor)
	{
		mTextPressedColor = pressedColor;
		mTextNormalColor = normalColor;
		buildColorDrawableState();

	}
}

这样我们的圆角按钮就创建起来了。
看看我们怎么使用它吧。直接贴出oncrate函数。
requestWindowFeature(Window.FEATURE_NO_TITLE);
		LinearLayout linearLayout = new LinearLayout(this);
		linearLayout.setOrientation(LinearLayout.VERTICAL);

		LinearLayout.LayoutParams layoutParams = new LayoutParams(200, 200);
		layoutParams.bottomMargin = 20;

		LayoutParams commomlayoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
		commomlayoutParams.bottomMargin = 20;

		StyleButton button = new StyleButton(this);
		button.setText("按钮");
		linearLayout.addView(button, layoutParams);


		StyleButton button2 = new StyleButton(this);
		button2.setText("按钮");
		button2.setRadius(16);
		linearLayout.addView(button2, commomlayoutParams);

		StyleButton button3 = new StyleButton(this);
		button3.setText("按钮");
		button3.setRadius(32);
		button3.setTextNormalPressedcolor(Color.CYAN, Color.WHITE);
		button3.setBgNormalPressedcolor(Color.BLUE, Color.CYAN);
		linearLayout.addView(button3, commomlayoutParams);

		StyleButton button4 = new StyleButton(this);
		button4.setText("按钮");
		button4.setRadius(80);
		button4.setBgNormalPressedcolor(Color.GRAY, Color.CYAN);
		button4.setTextNormalPressedcolor(Color.RED, Color.WHITE);
		linearLayout.addView(button4, commomlayoutParams);

		StyleButton button5 = new StyleButton(this);
		button5 = new StyleButton(this);
		button5.setText("按钮");
		button5.setRadius(50);
		button5.setTextNormalPressedcolor(Color.BLACK, Color.BLUE);
		button5.setBgNormalPressedcolor(Color.WHITE, Color.CYAN);
		linearLayout.addView(button5, commomlayoutParams);

		StyleButton button6 = new StyleButton(this);
		button6.setText("按钮");
		button6.setRadius(50);
		button6.setTextNormalPressedcolor(Color.BLACK, Color.CYAN);
		button6.setBgNormalPressedcolor(Color.CYAN, Color.BLUE);
		LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
		params.leftMargin = 80;
		params.rightMargin = 80;
		linearLayout.addView(button6, params);

		StyleButton button7 = new StyleButton(this);
		button7.setText("按钮");
		button7.setRadius(80);
		linearLayout.addView(button7, layoutParams);
		
		setContentView(linearLayout);
是不是使用起来方便快捷呢?不管是换颜色还是换圆角半径这样我们就自定义好了,自己的一个圆角按钮。好了。拿去愉快的使用吧。
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值