很多时候android自定义控件并不能满足需求,如何做呢?很多方法,可以自己绘制一个,可以通过继承基础控件来重写某些环节,当然也可以将控件组合成一个新控件,这也是最方便的一个方法。今天就来介绍下如何使用组合控件,将通过一个实例来介绍。
实现一个带图片和文字的按钮,如图所示:
整个过程可以分四步走。第一步,定义一个layout,实现按钮内部的布局。代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon"
android:paddingTop="5dip"
android:paddingBottom="5dip"
android:paddingLeft="40dip"
android:layout_gravity="center_vertical"
/>
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#00FF00"
android:layout_marginLeft="8dip"
android:layout_gravity="center_vertical"
/>
</LinearLayout>
这个xml实现一个左图右字的布局,接下来写一个类继承LinearLayout,导入刚刚的布局,并且设置需要的方法,从而使的能在代码中控制这个自定义控件内容的显示。代码如下:
package com.sada.compare.ui;
import com.sx.allwidget.R;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class ImageBt extends LinearLayout {
private ImageView iv;
private TextView tv;
public ImageBt(Context context) {
this(context, null);
}
public ImageBt(Context context, AttributeSet attrs) {
super(context, attrs);
// 导入布局
LayoutInflater.from(context).inflate(R.layout.custombt, this, true);
iv = (ImageView) findViewById(R.id.iv);
tv = (TextView) findViewById(R.id.tv);
}
/**
* 设置图片资源
*/
public void setImageResource(int resId) {
iv.setImageResource(resId);
}
/**
* 设置显示的文字
*/
public void setTextViewText(String text) {
tv.setText(text);
}
}
第三步,在需要使用这个自定义控件的layout中加入这控件,只需要在xml中加入即可。方法如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
>
<com.sada.compare.ui.ImageBt
android:id="@+id/bt_confirm"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
android:clickable="true"
android:focusable="true"
android:background="@drawable/background"
/>
<com.sada.compare.ui.ImageBt
android:id="@+id/bt_cancel"
android:layout_toRightOf="@id/bt_confirm"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
android:clickable="true"
android:focusable="true"
android:background="@drawable/backgroundc"
/>
</RelativeLayout>
注意的是,控件标签使用完整的类名即可。为了给按钮一个点击效果,你需要给他一个selector背景,这里就不说了。
最后一步,即在activity中设置该控件的内容。当然,在xml中也可以设置,但是只能设置一个,当我们需要两次使用这样的控件,并且显示内容不同时就不行了。在activity中设置也非常简单,我们在ImageBt这个类中已经写好了相应的方法,简单调用即可。代码如下:
package com.sada.compare.ui;
import com.sx.allwidget.R;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity {
private ImageBt ib1;
private ImageBt ib2;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.newmain);
ib1 = (ImageBt) findViewById(R.id.bt_confirm);
ib2 = (ImageBt) findViewById(R.id.bt_cancel);
ib1.setTextViewText("确定");
ib1.setImageResource(R.drawable.confirm);
ib2.setTextViewText("取消");
ib2.setImageResource(R.drawable.cancel);
ib2.setClickable(false);
ib1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
ib2.setClickable(true);
ib1.setClickable(false);
//在这里可以实现点击事件
Toast.makeText(getApplicationContext(), "you have cofirm!",
Toast.LENGTH_SHORT).show();
}
});
ib2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
ib1.setClickable(true);
ib2.setClickable(false);
Toast.makeText(getApplicationContext(), "you have cancel!", Toast.LENGTH_SHORT).show();
}
});
}
}