android 自定义换件--数字图象时钟控件

android本身包含有数量庞大的控件,一般来说是可以用来满足日常开发工作的.但为了满足人们日益增强的审美需求和视觉体验,各家各户的程序员和UI大师无不绞尽脑汁设计更复杂,功能更丰富,效果更绚丽的自定义控件.这是个数字时钟控件,由于一些原因,没有使用字体,而是使用了各种字体的图像包贴图实现.代码如下:

控件布局,使用6个图片控件,分别显示时间和各个数字.布局如下:

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="0dip"
        android:paddingLeft="0dip"
        android:paddingTop="0dip"
        android:src="@drawable/t8" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/imageView1"
        android:layout_toRightOf="@id/imageView1"
        android:paddingBottom="0dip"
        android:paddingLeft="0dip"
        android:paddingTop="0dip"
        android:src="@drawable/t8" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/imageView2"
        android:layout_toRightOf="@id/imageView2"
        android:paddingBottom="0dip"
        android:paddingLeft="0dip"
        android:paddingTop="0dip"
        android:src="@drawable/colon" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/imageView3"
        android:layout_toRightOf="@id/imageView3"
        android:paddingBottom="0dip"
        android:paddingLeft="0dip"
        android:paddingTop="0dip"
        android:src="@drawable/t8" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/imageView4"
        android:layout_toRightOf="@id/imageView4"
        android:paddingBottom="0dip"
        android:paddingLeft="0dip"
        android:paddingTop="0dip"
        android:src="@drawable/t8" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/imageView5"
        android:layout_toRightOf="@id/imageView5"
        android:paddingBottom="0dip"
        android:paddingLeft="0dip"
        android:paddingTop="0dip"
        android:src="@drawable/am" />

</RelativeLayout>

控件代码为控件提供属性操作,代码如下:

package com.a;

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

public class ImageTime extends RelativeLayout {

	private ImageView imageView1;
	private ImageView imageView2;
	private ImageView imageView3;
	private ImageView imageView4;
	private ImageView imageView5;
	private ImageView imageView6;
	public ImageTime(Context context) {

		super(context);

		// TODO Auto-generated constructor stub

	}

	public ImageTime(Context context, AttributeSet attrs) {

		super(context, attrs);

		// TODO Auto-generated constructor stub

		LayoutInflater inflater = (LayoutInflater) context
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

		inflater.inflate(R.layout.imagebtn, this);

		imageView1 = (ImageView) findViewById(R.id.imageView1);
		imageView2 = (ImageView) findViewById(R.id.imageView2);
		imageView3 = (ImageView) findViewById(R.id.imageView3);
		imageView4 = (ImageView) findViewById(R.id.imageView4);
		imageView5 = (ImageView) findViewById(R.id.imageView5);
		imageView6 = (ImageView) findViewById(R.id.imageView6);
	}

	/**
	 * 
	 * 设置图片资源
	 */
	public void setImageResource1(int resId) {
		imageView1.setImageResource(resId);
	}
	public void setImageResource2(int resId) {
		imageView2.setImageResource(resId);
	}
	public void setImageResource3(int resId) {
		imageView3.setImageResource(resId);
	}
	public void setImageResource4(int resId) {
		imageView4.setImageResource(resId);
	}
	public void setImageResource5(int resId) {
		imageView5.setImageResource(resId);
	}
	public void setImageResource6(int resId) {
		imageView6.setImageResource(resId);
	}
	
}

简单使用控件,把控件加入窗口,对就布局和代码如下:

<?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="vertical" >
    <com.a.ImageTime
        android:id="@+id/btn_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

package com.a;


import android.app.Activity;
import android.os.Bundle;
import android.text.format.Time;


public class IdentifyButtonActivity extends Activity {
    private ImageTime imageBtn1;
    private static final int[] TIME_IMGS = {
        R.drawable.t0,
        R.drawable.t1,
        R.drawable.t2,
        R.drawable.t3,
        R.drawable.t4,
        R.drawable.t5,
        R.drawable.t6,
        R.drawable.t7,
        R.drawable.t8,
        R.drawable.t9,
        R.drawable.am,
        R.drawable.pm,
        R.drawable.colon
    };
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        imageBtn1=(ImageTime) this.findViewById(R.id.btn_right);
        Time time = new Time("GMT+8");    
        time.setToNow();   
        int year = time.year;   
        int month = time.month;   
        int day = time.monthDay;   
        int minute = time.minute;   
        int hour = time.hour;   
        int sec = time.second;   
        
        imageBtn1.setImageResource1(TIME_IMGS[hour/10]);
        imageBtn1.setImageResource2(TIME_IMGS[hour%10]);
        //imageBtn1.setImageResource3(R.drawable.t2);
        imageBtn1.setImageResource4(TIME_IMGS[minute/10]);
        imageBtn1.setImageResource5(TIME_IMGS[minute%10]);
        imageBtn1.setImageResource6(R.drawable.am);
    }
}