小賴的實戰記錄

由於程式碼如果越來越大，而且多個地方會重用同一種layout 元件的組合與行為的話，

用ViewStub或Fragment都有點很難控管。

 

所以開始想說，要做自定元件, 做了一個Demo用的範例程式碼，IconTitleLayout。

參考了以下資料，

http://www.cnblogs.com/wlrhnh/p/3479988.html

 

然後開始實際撰寫

會需要一個你元件所需要的xml內容

<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:orientation="horizontal"
		android:gravity="left|top"
		android:layout_gravity="top">
	    <ImageView
	        android:id="@+id/icon"
	        android:src="@drawable/selector_icon"
			android:layout_height="60dp"
			android:layout_width="60dp"
			android:clickable="true"
			android:scaleType="centerInside">								
		</ImageView>
	    <TextView
	        android:id="@+id/title"
	        android:layout_width="wrap_content"
			android:layout_height="60dp"
			android:minWidth="60dp"
			android:gravity="left|center_vertical"
			android:textColor="#FFFFFF"
			android:textAppearance="?android:attr/textAppearanceMedium"
			android:clickable="true">
	    </TextView>
	</LinearLayout>
</LinearLayout >

 

以及你元件繼承相關的Class，及自定行為

package com.tomlai.widget;


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

import com.tomlai.demo.app.R;

public class IconTitleLayout extends LinearLayout {
    ImageView mImageView ; 
    TextView mTextView;
    
    public IconTitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        
        LayoutInflater inflater= (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.widget_icon_title_layout, this );
        
        mImageView = (ImageView)this.findViewById(R.id.icon);
        mTextView = (TextView)this.findViewById(R.id.title);        
    }
    
    public void setTitle(String title) {
        mTextView.setText(title);
    }
    
    public String getTitle() {
        return mTextView.getText().toString();
    }
}

再則叫用你的元件，在xml裡面

     <com.tomlai.widget.IconTitleLayout
         android:id="@+id/icon_title_layout"
          android:layout_width="wrap_content"
    	  android:layout_height="wrap_content">
         
     </com.tomlai.widget.IconTitleLayout>

 

及在Acitivty

        IconTitleLayout layout = (IconTitleLayout)findViewById(R.id.icon_title_layout);
        layout.setTitle("Icon Title");

結果呈現