Android UI编程之自定义控件初步——ImageButton

我想咱们在使用一些App的时候，应该不会出现一些“裸控件”的吧。除非是一些系统中的软件，那是为了保持风格的一致性，作出的一些权衡。我这里并不是是在指责Android原生的控件很差看，说实在的，我很喜欢Android的一些原生控件。只是有些时候为了风格的一致性，就不得不去花些功夫在美工上。这于美工这一点，我对某讯的产品的确欣赏。下面就让咱们开始一点一点学习Android UI编程中的自定义控件。

 

分析：

自定义控件就点像堆积木，并给它涂上颜色，和功能说明。下面就让咱们用一个例子来逐一地简单讨论一下。

 

示例分析：

效果图展现：

本示例将选取ImageButton来作一个简单地分析。下面先来看看运行效果图：

  

 

搭建基本雏形：

对于雏形，首先要作的是积木的选择。咱们选择的是一个ImageView和一个TextView，上下摆放，而后用一个约束将其绑定在一块儿。以下所示的代码片断：

 

?

1 2 3 4 5 6 7 8

<!--?xml version= 1.0 encoding=utf- 8 ?--> <linearlayout android:gravity= "center_vertical" android:layout_height= "fill_parent" android:layout_width= "fill_parent" android:orientation= "vertical" xmlns:android= "http://schemas.android.com/apk/res/android" >        <imageview android:id= "@+id/imageView1" android:layout_gravity= "center_horizontal" android:layout_height= "wrap_content" android:layout_width= "wrap_content" android:paddingbottom= "5dip" android:paddingtop= "5dip" android:src= "@drawable/right_icon" >        <textview android:id= "@+id/textView1" android:layout_gravity= "center_horizontal" android:layout_height= "wrap_content" android:layout_margintop= "5dp" android:layout_width= "wrap_content" android:text= "肯定" android:textcolor= "#000000" >   </textview></imageview></linearlayout>

上面的代码只能让咱们获得一个如上所示的中间方形图和下方的文本以及紧贴在这二者边缘的一个约束。

 

 

外观设计和功能添加：

外观设计：

如今咱们就要进行颜色分配和功能说明了，它被实如今Java代码中了。以下关键代码：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13

/**       * 设置图片资源       */      public void setImageResource( int resId) {          imageView.setImageResource(resId);      }        /**       * 设置显示的文字       */      public void setTextViewText(String text) {          textView.setText(text);      }

 

 

功能添加：

而对于此咱们仅仅只是让这个“Button”更好看了一些罢了。因而咱们如今还要作另一件事。例如点击后要有一些指定的、绑定死的、使用这个控件所必然会进行的操做。其实和上面的加外套是一个性质。以下关键代码：

 

?

1 2 3 4 5 6 7 8 9 10

@Override      public void setOnClickListener(OnClickListener l) {          auxiliaryFunction();                    super .setOnClickListener(l);      }            protected void auxiliaryFunction() {          Log.i(TAG, log message.);      }

上面添加的额外功能，咱们能够在Log日志中查看是否有真的完成。

 

既然是自定义，固然这里的ImageButton原始构建不会是Button。以下真相代码：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

public class ImageButton extends LinearLayout {        private ImageView imageView;      private TextView textView;        public ImageButton(Context context) {          super (context);      }        public ImageButton(Context context, AttributeSet attrs) {          super (context, attrs);          LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);          inflater.inflate(R.layout.image_button, this );          imageView = (ImageView) findViewById(R.id.imageView1);          textView = (TextView) findViewById(R.id.textView1);      }        /**       * 设置图片资源       */      public void setImageResource( int resId) {          imageView.setImageResource(resId);      }        /**       * 设置显示的文字       */      public void setTextViewText(String text) {          textView.setText(text);      }        @Override      public void setOnClickListener(OnClickListener l) {          auxiliaryFunction();                    super .setOnClickListener(l);      }            protected void auxiliaryFunction() {          Log.i(TAG, log message.);      } }

 

 

使用分析：

 

1.xml代码中的使用

这里只是有一点须要注意，咱们要指明自定义控件的完整路径，以下：

 

?

1	<com.demo.customview.imagebutton.widgets.imagebutton android:background= "@drawable/custom_button" android:id= "@+id/btn_right" android:layout_height= "150dp" android:layout_width= "150dp" ></com.demo.customview.imagebutton.widgets.imagebutton>

 

 

2.动做效果配置

对于Button的动做也就是触摸、按下和抬起，对于这三个动做效果的配置须要在res包下的drawable文件夹中去建立（没有这个文件夹就新建一个）。以下代码：

 

?

1 2 3 4 5 6 7 8

<!--?xml version= 1.0 encoding=utf- 8 ?--> <selector xmlns:android= "http://schemas.android.com/apk/res/android" >        <item android:drawable= "@drawable/button_unpress_background" android:state_focused= "true" android:state_pressed= "false" ></item>      <item android:drawable= "@drawable/button_pressed_background" android:state_pressed= "true" ></item>      <item android:drawable= "@drawable/button_unpress_background" android:state_focused= "false" android:state_pressed= "false" ></item>   </selector>

 

 

3.Java代码中的使用

在Java代码的使用与Button无异，以下：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

public class MainActivity extends Activity {        private ImageButton mImageBtn1;        @Override      protected void onCreate(Bundle savedInstanceState) {          super .onCreate(savedInstanceState);          setContentView(R.layout.activity_main);            mImageBtn1 = (ImageButton) this .findViewById(R.id.btn_right);          mImageBtn1.setTextViewText(肯定);          mImageBtn1.setImageResource(R.drawable.right_icon);            mImageBtn1.setOnClickListener( new View.OnClickListener() {                public void onClick(View v) {                  Toast.makeText(getApplicationContext(), 点击肯定, 0 ).show();              }          });      } }

 

结伴旅游,一个免费的交友网站：www.jieberu.com

推推族，免费得门票，游景区：www.tuituizu.com