android 简单控件组合显示

android 界面的控件处理时，有时遇到两个或更多个控件紧密联系在一起，可以将其做成绑定在一块，绑定组合之后就会更加方便的处理界面显示：

为了更快的上手，形象直接有效，直接从代码入手，自己再敲一遍，一切就在不言中已经领会了，再去翻翻理论，就更懂了！！

1. 先看一下自定义组合代码，继承LinearLayout ：

package com.test.customviewtest;

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

/**
 * 
 * 将ImageButton和TextView 组合在一起，其他控件组合方法类似
 */
public class ComposeWidget extends LinearLayout {
	private ImageButton mImageButton;
	private TextView mTextView;

	public ComposeWidget(Context context, AttributeSet attrs) {
		super(context, attrs);
		// 注意参数:root=this 及 attachToRoot=true
		LayoutInflater.from(context)
				.inflate(R.layout.custom_button, this, true);
		mImageButton = (ImageButton) findViewById(R.id.myButton);
		mTextView = (TextView) findViewById(R.id.myTextView);
	}

	public void setButtonBackground(int resid) {
		mImageButton.setBackgroundResource(resid);
	}

	public void setTextViewText(String text) {
		mTextView.setText(text);
	}
}

2. 发现上面中引入了 R.layout.custom_button ，其实就是组合控件的一个布局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="vertical" >

    <ImageButton
        android:id="@+id/myButton"
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_gravity="center_vertical"
        android:background="@drawable/flag" />

    <TextView
        android:id="@+id/myTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:textColor="#00ff00" />

</LinearLayout>

 

3. 然后在主界面的activity_main.xml 中引入自定义的组合控件：

   <com.test.customviewtest.ComposeWidget
        android:id="@+id/myComposeWidget"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:clickable="true"
        android:focusable="true" >
    </com.test.customviewtest.ComposeWidget>

注： com.test.customviewtest.ComposeWidget 是自定义控件ComposeWidget类的全路径

以上三步就够了，自定义组合控件便能显示出来！！

 

以下介绍一下EditText 与ImageButton 组合显示，根据EditText中是否有内容，显示或隐藏ImageButton的过程:

1.自定义组合代码：

package com.test.customviewtest;

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;

interface EditTextInterface {
	public void hideImageButton();

	public void showImageButton();
}

public class CustomEditText extends LinearLayout implements EditTextInterface {
	public EditText mEditText;
	public ImageButton mImageButton;

	public CustomEditText(Context context, AttributeSet attrs) {
		super(context, attrs);

		LayoutInflater.from(context).inflate(R.layout.custom_edittext, this,
				true);

		mEditText = (EditText) findViewById(R.id.mEditText);
		mImageButton = (ImageButton) findViewById(R.id.mImageButton);

		mEditText.addTextChangedListener(mTextWatcher);
		mImageButton.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				hideImageButton();
				mEditText.setText("");
			}
		});
	}

	TextWatcher mTextWatcher = new TextWatcher() {

		@Override
		public void onTextChanged(CharSequence s, int start, int before,
				int count) {

		}

		@Override
		public void beforeTextChanged(CharSequence s, int start, int count,
				int after) {

		}

		@Override
		public void afterTextChanged(Editable s) {
			if (s.length() == 0) {
				hideImageButton();
			} else {
				showImageButton();
			}
		}
	};

	@Override
	public void hideImageButton() {
		if (mImageButton.isShown()) {
			mImageButton.setVisibility(View.GONE);
		}
	}

	@Override
	public void showImageButton() {
		if (!mImageButton.isShown()) {
			mImageButton.setVisibility(View.VISIBLE);
		}
	}
}

 

此处对EditText 添加了 TextWatcher 监听，TextWatcher 对内容进行了监听！！

2. R.layout.custom_edittext 对应的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/mEditText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:singleLine="true" />

    <ImageButton
        android:id="@+id/mImageButton"
        android:layout_width="50dip"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/mEditText"
        android:background="#00ff00"
        android:src="@android:drawable/ic_delete"
        android:visibility="gone" />

</RelativeLayout>

3. 主界面的activity_main.xml 中引入该组合控件：

 <com.test.customviewtest.CustomEditText
        android:id="@+id/myCustomEditText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >
    </com.test.customviewtest.CustomEditText>

注： 需要引用类的全路径：com.test.customviewtest.CustomEditText

以上三步便实现EditText 与ImageButton 根据内容组合显示！！