自定义UI控件

  很多时候android自定义控件并不能满足需求,如何做呢?很多方法,可以自己绘制一个,可以通过继承基础控件来重写某些环节,当然也可以将控件组合成一个新控件,这也是最方便的一个方法。

那么最好的方式去创建一个新的控件是什么?  这主要取决你想要完成什么。

1、组合控件,就是通过合并几个控件的功能来生成一个控件;

2、有些基本功能原生控件都能提供,所以这个时候你只需要继承并对控件进行扩展。通过重写它的事件,onDraw,但是始终都保持都父类方法的调用;

3、完完整整创建一个新的控件

一、组合控件

  这里将用两个例子来介绍。

  例1:

  第一个例子实现一个带图片和文字的按钮,如图所示:

  

  整个过程可以分四步走。第一步,定义一个layout,实现按钮内部的布局。代码如下:

  custom_button.xml




    

    

   接下来写一个类继承LinearLayout,导入刚刚的布局,并且设置需要的方法,从而使的能在代码中控制这个自定义控件内容的显示。代码如下:

  CustomButton.java

package com.plusjun.android11;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class CustomButton extends LinearLayout{

	private ImageView iv;
	private TextView tv;

	//重写构造方法
	public CustomButton(Context context, AttributeSet attrs){
		super(context, attrs);
		// 导入布局并实例化
		LayoutInflater.from(context).inflate(R.layout.custom_button, this, true);

		iv = (ImageView) findViewById(R.id.iv);
		tv = (TextView) findViewById(R.id.tv);
	}

	//设置图片资源
	public void setImageResource(int resId){
		iv.setImageResource(resId);
	}

	//设置显示的文字
	public void setTextViewText(String text){
		tv.setText(text);
	}
}
  第三步,在需要使用这个自定义控件的layout中加入这控件,只需要在xml中加入即可。方法如下:
  acivity_main.xml



    

    

    

  注意的是,控件标签需使用完整的类名。最后一步,即在activity中设置该控件的内容。在activity中设置也非常简单,我们在CustomButton这个类中已经写好了相应的方法,简单调用即可。代码如下:

  MainActivity.java

package com.plusjun.android11;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;

public class MainActivity extends Activity{
	private CustomButton btnConfirm;
	private CustomButton btnCancel;

	@Override
	public void onCreate(Bundle savedInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		btnConfirm = (CustomButton) findViewById(R.id.bt_confirm);
		btnCancel = (CustomButton) findViewById(R.id.bt_cancel);
		
		btnConfirm.setTextViewText("确定");
		btnConfirm.setImageResource(R.drawable.yes);
		btnCancel.setTextViewText("取消");
		btnCancel.setImageResource(R.drawable.no);
		
		btnConfirm.setOnClickListener(new OnClickListener(){
			public void onClick(View v){
				//实现点击事件
			}
		});
		btnCancel.setOnClickListener(new OnClickListener(){
			public void onClick(View v){
				//实现点击事件
			}
		});
	}
}
  这样,一个带文字和图片的组合按钮控件就完成了。这样梳理一下,使用还是非常简单的。组合控件能做的事还非常多,主要是在类似上例中的CustomButton类中写好要使用的方法即可。


  例2:
  再来看一个组合控件,带删除按钮的EidtText。即在用户输入后,会出现删除按钮,点击即可取消用户输入。效果图如下:

  
  定义方法和上例一样。首先写一个自定义控件的布局:
  custom_editview.xml




    

    
    
    

    

  实现输入框右侧带按钮效果,注意将按钮隐藏。然后写一个CustomEditView类,实现删除用户输入功能。这里用到了TextWatcher这个接口,监听输入框中的文字变化。使用也很简单,实现他的三个方法即可。看代码:
  CustomEditView.java
package com.plusjun.android22;

import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class CustomEditView extends LinearLayout {
	ImageButton ib;
	EditText et;
	/* 当输入框状态改变时,会调用TextWatcher里相应的方法
	 * TextWatcher是一个接口,因此里面的所有方法都要实现
	 */
	TextWatcher tw = new TextWatcher(){

		@Override
		public void onTextChanged(CharSequence s, int start, int before, int count){
			// TODO Auto-generated method stub
		}

		@Override
		public void beforeTextChanged(CharSequence s, int start, int count, int after){
			// TODO Auto-generated method stub
		}
		
		// 在文字改变后调用
		@Override
		public void afterTextChanged(Editable s){
			if (s.length() == 0){
				ib.setVisibility(View.GONE);// 设置按钮不可见
			} else{
				ib.setVisibility(View.VISIBLE);// 设置按钮可见
			}
		}
	};

	//重写构造方法
	public CustomEditView(Context context, AttributeSet attrs){
		super(context, attrs);
		//获取视图并实例化
		LayoutInflater.from(context).inflate(R.layout.custom_editview, this, true);
		init();
	}

	//注意init()方法是自行构造的,不是继承的
	private void init() {
		ib = (ImageButton) findViewById(R.id.ib);
		et = (EditText) findViewById(R.id.et);

		// 为输入框绑定一个监听文字变化的监听器
		et.addTextChangedListener(tw);
		// 添加按钮点击事件
		ib.setOnClickListener(new OnClickListener(){
			public void onClick(View v){
				ib.setVisibility(View.GONE);// 设置按钮不可见
				et.setText("");// 设置输入框内容为空
			}
		});
	}
}
  在TextWatch接口的afterTextChanged方法中对文字进行判断,若长度为0,就隐藏按钮,否则,显示按钮。每修改一次文字的字符,都会调用该方法。
  另外,实现ImageButton(即那个叉)的点击事件,删除输入框中的内容,并隐藏按钮。
  后面两步的实现就是加入到实际布局中:
  activity_main.xml


    

    

  MainActivity.java

package com.plusjun.android22;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}


以上部分内容转载或参考来源如下:

http://www.92coding.com/blog/index.php/archives/143.html#

http://my.oschina.net/wangjunhe/blog/99764

在此表示感谢。
转载请注明来源,版权归原作者所有,未经同意严禁用于任何商业用途。
微博:http://weibo.com/theworldsong
邮箱:[email protected]

你可能感兴趣的:(Android开发)