自定义UI控件

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

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

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

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

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

一、组合控件

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

  例1:

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

  若水工作室

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

  custom_button.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:paddingBottom="10.0dip"
        android:paddingLeft="10.0dip"
        android:paddingTop="10.0dip" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dip"
        android:paddingBottom="10.0dip"
        android:paddingLeft="5.0dip"
        android:paddingRight="10.0dip"
        android:paddingTop="10.0dip"
        android:textColor="#ffffff"
        android:textSize="18.0sp" />

</LinearLayout>
   接下来写一个类继承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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- 控件名即为完整类名 -->

    <com.plusjun.android11.CustomButton
        android:id="@+id/bt_confirm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <com.plusjun.android11.CustomButton
        android:id="@+id/bt_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>
  注意的是,控件标签需使用完整的类名。最后一步,即在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

<?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="fill_parent" >

    <EditText
        android:id="@+id/et"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:singleLine="true" />

    <!-- 下面的background="#00000000"代表背景无色(透明) -->
    <!-- layout_alignRight="@+id/et"代表该控件的右端紧靠"@+id/et"的右端 -->
    <!-- android:visibility="gone"代表该控件不可见-->

    <ImageButton
        android:id="@+id/ib"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/et"
        android:background="#00000000"
        android:src="@drawable/no"
        android:visibility="gone" />

</RelativeLayout>
  实现输入框右侧带按钮效果,注意将按钮隐藏。然后写一个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
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <!-- 控件名即为完整类名 -->

    <com.plusjun.android22.CustomEditView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>
  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
邮箱:theworldsong@foxmail.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值