android 自定义View的编写

刘炳昭 2011-11-10

刚参加工作,接触到企业级的android项目开发,发现实际项目当中大都是用到自定义的view来完成布局.

自己研究了下写下这个demo

首先是自定义view的layout

<?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="wrap_content"
    >
    
    <ImageView android:id="@+id/iv_main_item_icon" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        />
    
    <TextView android:id="@+id/tv_main_item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv_main_item_icon"
        android:layout_centerHorizontal="true"
		android:textSize="25sp"
		android:textColor="@color/blue"
        />
    
    <TextView android:id="@+id/tv_main_item_summary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_main_item_title"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dip"
        android:layout_gravity="center_horizontal"
        />

</RelativeLayout>

下面这个是自定义view的javacode

package com.customview;

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

public class MyCustomView extends LinearLayout {
	
	private ImageView imageView;
	private TextView tv_title;
	private TextView tv_summary;
	
	public MyCustomView(Context context) {
		super(context);
	}
	
	public MyCustomView(Context context, AttributeSet attrs) {
		super(context, attrs);
		
		//取得XML配置的属性
		TypedArray a = context.obtainStyledAttributes(attrs,  
                R.styleable.MyCustomView);
		int imageId = a.getResourceId(R.styleable.MyCustomView_imageSrc,
				R.drawable.ic_launcher);
		int titleId = a.getResourceId(R.styleable.MyCustomView_titleSrc,
				R.string.app_name);
		int summaryId = a.getResourceId(R.styleable.MyCustomView_summarySrc,
				R.string.app_name);
		
		setUpViews(imageId, titleId, summaryId);
	}

	/**
	 * 设置View
	 * @param imageId  图片的引用id
	 * @param titleId  标题的引用id
	 * @param summaryId  说明文字的引用id
	 */
	private void setUpViews(int imageId, int titleId, int summaryId){
		LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		View view = inflater.inflate(R.layout.mycustomview, this);
		
		imageView = (ImageView) view.findViewById(R.id.iv_main_item_icon);
		tv_title = (TextView) view.findViewById(R.id.tv_main_item_title);
		tv_summary = (TextView) findViewById(R.id.tv_main_item_summary);
		
		imageView.setImageResource(imageId);
		tv_title.setText(titleId);
		tv_summary.setText(summaryId);
	}

}

由于我们可能需要在XML配置中传入一些参数,因此要在values文件夹下加入一个attrs.xml

其中上面代码中TypedArraya=context.obtainStyledAttributes(attrs,R.styleable.MyCustomView);就是用到这个attrs定义的内容

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<declare-styleable name="MyCustomView">
	    <attr name="imageSrc" format="reference" />
	    <attr name="titleSrc" format="reference" />
	    <attr name="summarySrc" format="reference" />
    </declare-styleable>  
</resources>

最后在main.xml使用这个自定义view如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:myview="http://schemas.android.com/apk/res/com.customview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    
    <com.customview.MyCustomView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        myview:imageSrc="@drawable/ic_launcher"
        myview:titleSrc="@string/title"
        myview:summarySrc="@string/summary"
        />

</LinearLayout>

注意要加上xmlns:myview="http://schemas.android.com/apk/res/com.customview

相关推荐