自定义View

通常情况下，有以下三种方法来实现自定义的控件:

       (1)对现有控件进行拓展

     （2）通过组合来实现新的控件

     （3）重写View来实现全新的控件

                                         方法一： 对现有控件进行拓展

      这是一个非常重要的自定义View方法，它可以在原生控件的基础上进行拓展，增加新的功能，修改显示的UI等.一般来说，我们可以在onDraw()方法中对原生控件行为进行拓展。 下面以一个TextView为例，来看看如何使用拓展原生控件的方法创建新的控件。比如：想让一个TextView的背景更加丰富，给其多绘制几层背景。

  首先分析一个如何实现这个效果,原生的TextView使用onDraw()方法绘制要显示的文字。当继承了系统的TextView之后，如果不重写其onDraw()方法,则不会修改TextView的任何效果。可以认为在自定义的TextView中调用TextView类的onDraw()方法来绘制了显示文字。

    @Override
    protected void onDraw(Canvas canvas) {
       //在回调父类方法前,实现自己的逻辑,对TextView来说即是在绘制文本内容前
        super.onDraw(canvas);<pre name="code" class="java">       //在回调父类方法后,实现自己的逻辑,对TextView来说即是在绘制文本内容后
      }

 程序调用super.onDraw(canvas)方法来实现原生控件的功能，当是在调用super.onDraw()方法之前和之后，我们都可以实现自动的逻辑，分别在系统绘制文字前后，完成自己的操作。这就是通过改变控件的绘制行为创建自定义View的思路。

     最重要的部分是在onDraw()方法中，为了改变原生的绘制行为，在系统调用super.onDraw(canvas) 方法前，即在绘制文字之前，绘制两个不同大小的矩形，形成一个重叠效果，再让系统调用super.onDraw(canvas)方法,执行绘制文字的工作。这样，我们就通过改变控件绘制行为，创建了一新的控件。

继承类的代码如下：

public class MyTextView extends TextView {
	 private Paint mPaint1;
	private Paint mPaint2;

	//当时自己手动new出对象时，调用此构造方法.
	public MyTextView(Context context) {
		super(context);
		initView();
	}
	
   //在布局文件中声明自定义View对象时调用,但是这个方法加入了Style样式的引用,即
    //如果你在 Xxx.xml布局文件里<xx.xx.DrawView>中加入了style="@style/xxx.xml"，就会调用这个构造方法。
	public MyTextView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		initView();
	}

	 //在布局文件中声明自定义View对象时,调用此方法，就是在Xxx.xml布局文件里声明了<xx.xx.DrawView>这种
	public MyTextView(Context context, AttributeSet attrs) {
		super(context, attrs);
		initView();
		
	}
      
	private void initView(){
		    mPaint1 = new Paint(); 
		    mPaint1.setColor(getResources().getColor(android.R.color.holo_blue_light));
		    mPaint1.setStyle(Paint.Style.FILL);   
		    mPaint2 = new Paint();
		    mPaint2.setColor(Color.YELLOW);
		    mPaint2.setStyle(Paint.Style.FILL);  	    
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		 //绘制外层矩形
		canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint1);
		//绘制内层矩形
              canvas.drawRect(10, 10, getMeasuredWidth()-10, getMeasuredHeight()-10, mPaint2);
		canvas.save();
		//绘制文字前平移10个像素
		canvas.translate(10, 0);
		super.onDraw(canvas);
                 canvas.restore();
	}
}

自定义的标签xml如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
         <com.xrj.controlview.MyTextView  
               android:layout_width="200dp"
               android:layout_height="50dp"
               android:gravity="center"
                android:text="Android"
                android:textSize="19sp" 
           />

</LinearLayout>

程序运行结果如下图：

                                              方法二：通过组合来实现新的控件

 创建复合控件可以很好地创建出具有重用功能的控件集合。这种方法通常需要继承一个合适的ViewGroup,再给它添加指定功能的控件，从而组成成新的复合控件。通过这种方式创建的控件，我们一般会给它指定一些可配置的属性,让它具有更强的拓展性。

       （2.1）定义属性：为一个View提供可自定义的属性非常简单，只需要在res资源目录的values目录下创建一个attrx.xml的属性定义文件。代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
       <declare-styleable name="TopBar">
              <attr    name="title"  format="string"      />
              <attr    name="titleTextSize"  format="dimension" />
             <attr     name="titleTextColor"  format="color" />
             <attr   name="leftTextColor"  format="color" /> 
             <attr   name="leftBackground" format="reference|color"   />
             <attr   name="leftText"  format="string"  />
             <attr   name="rightTextColor"  format="color" />
             <attr   name="rightBackground"  format="reference|color" /> 
             <attr   name="rightText"  format="string" />      
       </declare-styleable> 
</resources>

 在上述代码中，通过< declare-styleable >标签声明了使用自定义属性,通过name属性来确定引用的名称，通过<attr>标签来声明具体的自定义属性。

    （2.2）组合控件：创建自定义控件TopBar，并让它继承自ViewGroup，从而组合一些需要的控件。

public class TopBar  extends RelativeLayout{

	  //包含topbar上的元素:左按钮，右按钮，标题
	  private Button mLeftButton;
	  private Button mRightButton;
	  private TextView mTitleView;
	  
	  //布局属性:用来控制组件元素在ViewGroup中的位置
	  private LayoutParams mLeftParams, mTitlepParams, mRightParams;
	  
	  
	  //左按钮的属性:即我们在attrs.xml文件中定义的属性
	  private int mLeftTextColor;
	  private Drawable mLeftBackground;
	  private String mLeftText;
	  
	  //右按钮的属性:即我们在attrs.xml文件中定义的属性
	  private int mRightTextColor;
	  private Drawable mRightBackground;
	  private String mRightText;
	
	// 标题的属性值，即我们在atts.xml文件中定义的属性
	  private float mTitleTextSize;
	  private int mTitleTextColor;
	  private String mTitle;
	
	   //映射传入的接口对象
	  private topbarClickListener mListener;
	  

	public TopBar(Context context, AttributeSet attrs) {
		super(context, attrs);
               setBackgroundColor(0xFFF59563); //设置topbar的背景
        
        //通过这个方法,将你在atts.xml中定义的declare-styleable的所有属性的值存储到TypyArray中
        TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        
        //从TypeArray中取出对应的值来为要设置的属性赋值

        //通过TypeArray对象的getString(),getColor()方法,就可以获取这些定义的属性值
        mLeftTextColor=ta.getColor(R.styleable.TopBar_leftTextColor, 0);
		mLeftBackground=ta.getDrawable(R.styleable.TopBar_leftBackground);
		mLeftText=ta.getString(R.styleable.TopBar_leftText);
		
		mRightTextColor=ta.getColor(R.styleable.TopBar_rightTextColor, 0);
		mRightBackground=ta.getDrawable(R.styleable.TopBar_rightBackground);
		mRightText=ta.getString(R.styleable.TopBar_rightText);
		
		mTitleTextSize=ta.getDimension(R.styleable.TopBar_titleTextSize, 10);
		mTitleTextColor=ta.getColor(R.styleable.TopBar_titleTextColor, 0);
		mTitle=ta.getString(R.styleable.TopBar_title);
		//获取完TypeArray的值后，一般要调用recyle方法来避免重新创建的时候的错误
		ta.recycle(); //完成资源的回收

		/**   组合组件   通过动态添加控件的方式,使用addView(）方法将这三个控件加入到定义的TopBar模板中，并给它们设置我们前面获取到的具体的属性值，比如标题的文字，颜色，大小  */

                mLeftButton=new Button(context);
		mRightButton=new Button(context);
		mTitleView=new TextView(context);
		
		//为创建的组件元素赋值
		//值就来源于我们在引用xml文件中给对应属性的赋值
		mLeftButton.setTextColor(mLeftTextColor);
		mLeftButton.setBackground(mLeftBackground);
		mLeftButton.setText(mLeftText);
		
		mRightButton.setTextColor(mRightTextColor);
		mRightButton.setBackground(mRightBackground);
		mRightButton.setText(mRightText);
		
		
		mTitleView.setText(mTitle);
		mTitleView.setTextColor(mTitleTextColor);
		mTitleView.setTextSize(mTitleTextSize);
		mTitleView.setGravity(Gravity.CENTER);
		
		//为组件元素设置相应的的布局元素
		mLeftParams=new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
		mLeftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
		//添加到ViewGroup
		addView(mLeftButton, mLeftParams);
		
		mRightParams=new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
		mRightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
		addView(mRightButton, mRightParams);
		
		mTitlepParams=new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
		mTitlepParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
		addView(mTitleView,mTitlepParams);

              定义接口: 既然是UI模板，那么每个调用者所需要这些按钮能够实现的功能都是不一样的。因此，不能直接在UI模板中添加具体的实现逻辑，只能通过接口回调的思想，将具体的实现逻辑交给调用者

            在UI模板类中定义一个左右按钮点击的的接口，并创建两个方法,分别用于左边按钮的点击和右边按钮的点击。代码如下:

	 /**定义接口
	  * 接口对象,实现回调机制，在回调方法中
	  * 通过映射的接口对象调用接口中的方法
	  * 而不用去考虑如何实现,具体的实现由调用者去创建
	  * */
	public interface topbarClickListener{
		 //左按钮点击事件
		void leftClick();
		//右按钮点击事件
		void rightClick();
	}
	

暴露接口给调用者：在模板方法中，为左，右按钮增加点击事件，但不去实习具体的逻辑，而是调用接口中相应的点击方法。

	 //按钮的点击事件，不需要具体的实现
		//只需要调用接口的方法,回调的方法,会有具体的实现
		mRightButton.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
                            mListener.rightClick();
			}
		});
		
		mLeftButton.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
                             mListener.leftClick();				
			}
		});<pre name="code" class="java">                 //暴露一个方法给调用者来注册接口回调
		//通过接口来获得回调这对接口方法的实现
		public void setOnTopBarClickListener(topbarClickListener mListener){
			       this.mListener= mListener; 

                }

实现接口回调：在调用者的代码中，调用者需要实现这样一个接口，并完成接口中的方法,驱动具体的实现逻辑，将接口的对象传递进去，从而完成回调。通常情况下可以使用匿名内部类的形式来实现接口中的方法：

 调用者的代码如下:

public class TopBarTest extends Activity {
 
	 private TopBar mTopbar;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.topbar_test);
		// 获得我们创建的topbar
		mTopbar = (TopBar) findViewById(R.id.topBar);
		
		// 为topbar注册监听事件，传入定义的接口
		// 并以匿名类的方式实现接口内的方法
		mTopbar.setOnTopBarClickListener(new topbarClickListener() {
			
			@Override
			public void rightClick() {
				Toast.makeText(TopBarTest.this, "right", Toast.LENGTH_LONG).show();
			}
			
			@Override
			public void leftClick() {
				Toast.makeText(TopBarTest.this, "left", Toast.LENGTH_LONG).show();
			}
		});

	}
}

(2.3)引用UI模板

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:padding="5dp"
   >
    <com.xrj.controlview.TopBar 
             android:id="@+id/topBar"
             android:layout_width="match_parent"
             android:layout_height="40dp"
             custom:leftBackground="@drawable/blue_button"
             custom:leftText="Back"
             custom:leftTextColor="#FFFFFF"      
             custom:rightBackground="@drawable/blue_button"
             custom:rightText="More"
             custom:rightTextColor="#FFFFFF"
             custom:title="自定义标题"
             custom:titleTextColor="#123412"
             custom:titleTextSize="10sp"
         />
</RelativeLayout>

 运行结果如下: