Android自定义View示例(零)—很简单的自定义View

MainActivity如下:

package cn.com;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
/**
 * Demo描述:
 * 一个非常简单的自定义View.
 * 代码中的笔记很好,便于我们对于自定义View的一个初步认识和理解
 */
public class MainActivity extends Activity {
	// 两个自定义的控件
	private SelfWidget mFirstSelfWidget;
	private SelfWidget mSecondSelfWidget;
    private Context mContext;
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		mContext=this;
		mFirstSelfWidget = (SelfWidget) findViewById(R.id.first_self_widget);
		mSecondSelfWidget = (SelfWidget) findViewById(R.id.second_self_widget);

		// 给自定义组件里面的小控件设置值

		// 控件设置文字和图片
		mFirstSelfWidget.setTextViewText("One");
		mFirstSelfWidget.setImageResource(R.drawable.game1);
		mSecondSelfWidget.setTextViewText("Two");
		mSecondSelfWidget.setImageResource(R.drawable.game2);

		// 处理点击事件
		mFirstSelfWidget.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				Toast.makeText(mContext, "点击了第一个自定义组件", 0).show();
			}
		});

		// 处理点击事件
		mSecondSelfWidget.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				Toast.makeText(mContext, "点击了第二个自定义组件", 0).show();
			}
		});

	}
}

SelfWidget如下:

package cn.com;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
//自定义组件
//错误代码:
//View view=inflater.inflate(R.layout.self_view, null);
//造成部分图片不显示
//原因:inflate(resource, root)方法中第二个参数,指定了新生成的View的parent
//即新生成的View依附于谁而显示

public class SelfWidget extends LinearLayout {
	private ImageView imageView;
	private TextView textView;

	public SelfWidget(Context context) {
		super(context);
	}

	public SelfWidget(Context context, AttributeSet attrs) {
		super(context, attrs);
		LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		// This is error code
		// View view=inflater.inflate(R.layout.self_view, null);
		
		// 给此SelfWidget填充布局
		View view = inflater.inflate(R.layout.self_view, this);
		// 找到此布局中的ImageView
		imageView = (ImageView) view.findViewById(R.id.imageView);
		// 找到此布局中的TextView
		textView = (TextView) view.findViewById(R.id.textView);
	}

	
	
	
	/**
	 * 在以下代码中,给该控件设置一些方法.
	 * 比如设置该控件的文字和图片
	 * 
	 * 以前在这里不是很理解.
	 * 其实说白了我们的自定义View,比如此处的SelfWidget它也是一个类(Class)
	 * 我们在这个类里面一样有构造方法,除了构造方法一样有其他的一些方法,比如设置某个控件
	 * 的图片文字,大小.
	 * 当我们在Activity里findViewById()找了布局中的该控件:
	 * mFirstSelfWidget = (SelfWidget) findViewById(R.id.first_self_widget);
	 * 这里的mFirstSelfWidget就是我们这里的SelfWidget类的一个实例化对象罢了.
	 * 它当然有这个类(自定义控件)里定义的各个方法.
	 * 我们直接用这个对象去调用对应的方法就修改了View的效果或者属性值.
	 * 
	 * 这个和我们以前的(类及其对象)的定义和使用没有什么区别.
	 * 不同的是,这里的类变成了一个View类,它的对象变成了一个实际的界面中控件罢了.
	 */
	
	
	
	
	/**
	 * 设置图片资源
	 */
	public void setImageResource(int resId) {
		imageView.setImageResource(resId);
	}

	/**
	 * 设置显示的文字
	 */
	public void setTextViewText(String text) {
		textView.setText(text);
		textView.setTextColor(Color.RED);

	}

}

main.xml如下:

<?xml version="1.0" encoding="utf-8"?> 
<!-- 在main中有两个组件.采用的都是自定义的组件.名字叫 cn.com.ImageButLinearLayout-->
<!-- 第一个组件的id为first_self_widget,第二个组件的id为second_self_widget-->
<!-- self_selector是一个xml文件,自定义组件的selector,点击自定义组件后图片切换-->
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="horizontal" > 
 
    <cn.com.SelfWidget
        android:id="@+id/first_self_widget" 
        android:layout_height="100dip"   
        android:layout_width="100dip" 
        android:background="@drawable/self_selector"   
     /> 
 
    <cn.com.SelfWidget
        android:id="@+id/second_self_widget" 
        android:layout_marginLeft="5dp" 
        android:layout_height="100dip"   
        android:layout_width="100dip" 
        android:background="@drawable/self_selector"   
        /> 
 
</LinearLayout> 

self_view.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/imageView" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_vertical" 
        android:paddingBottom="5dip" 
        android:paddingLeft="5dip" 
        android:paddingTop="5dip" 
    /> 
 
    <TextView 
        android:id="@+id/textView" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_vertical" 
        android:layout_marginLeft="8dip" 
        android:textColor="#000000" /> 
 
</LinearLayout> 

self_selector.xml如下:

<?xml version="1.0" encoding="utf-8"?> 
<!--在点击自定义组件时进行图片的切换-->
<selector xmlns:android="http://schemas.android.com/apk/res/android" >  
    <item 
        android:state_focused="true" 
        android:state_pressed="false" 
        android:drawable="@drawable/a">
    </item> 
    <item 
        android:state_pressed="true" 
        android:drawable="@drawable/b">
    </item> 
    <item 
        android:state_checked="true" 
        android:drawable="@drawable/b">        
    </item> 
    <item 
        android:state_focused="false" 
        android:state_pressed="false" 
        android:drawable="@drawable/a">
    </item> 
</selector>