当前位置:   article > 正文

Android创建新的视图(二)之创建复合控件_android 开发 xml创建视图

android 开发 xml创建视图

第一个实现一个带图片和文字的按钮,如图所示:

整个过程可以分四步走。第一步,定义一个layout,实现按钮内部的布局。代码如下:

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
<? 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:layout_width = "wrap_content"
     android:layout_height = "wrap_content"
     android:id = "@+id/iv"
     android:src = "@drawable/confirm"
     android:paddingTop = "5dip"
     android:paddingBottom = "5dip"
     android:paddingLeft = "40dip"
     android:layout_gravity = "center_vertical"
     />
< TextView
     android:layout_width = "wrap_content"
     android:layout_height = "wrap_content"
     android:text = "确定"
     android:textColor = "#000000"
     android:id = "@+id/tv"
     android:layout_marginLeft = "8dip"
     android:layout_gravity = "center_vertical"
     />
</ LinearLayout >
这个xml实现一个左图右字的布局,接下来写一个类继承LinearLayout,导入刚刚的布局,并且设置需要的方法,从而使的能在代码中控制这个自定义控件内容的显示。代码如下:

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
package com.notice.ib;
 
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中加入即可。方法如下:
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
< RelativeLayout
          android:orientation = "horizontal"
          android:layout_width = "fill_parent"
          android:layout_height = "wrap_content"
          android:layout_gravity = "bottom"
          >
          < com.notice.ib.ImageBt
              android:id = "@+id/bt_confirm"
              android:layout_height = "wrap_content"
              android:layout_width = "wrap_content"
              android:layout_alignParentBottom = "true"
              android:background = "@drawable/btbg"
              android:clickable = "true"
              android:focusable = "true"
              />
          < com.notice.ib.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:background = "@drawable/btbg"
              android:clickable = "true"
              android:focusable = "true"
             />
          </ RelativeLayout >
注意的是,控件标签使用完整的类名即可。为了给按钮一个点击效果,你需要给他一个selector背景,这里就不说了。

最后一步,即在activity中设置该控件的内容。当然,在xml中也可以设置,但是只能设置一个,当我们需要两次使用这样的控件,并且显示内容不 同时就不行了。在activity中设置也非常简单,我们在ImageBt这个类中已经写好了相应的方法,简单调用即可。代码如下:

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
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.login);
 
         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);
 
        ib1.setOnClickListener(new View.OnClickListener() {
   
        @Override
        public void onClick(View v) {
        // TODO Auto-generated method stub
         Toast.makeText(getApplicationContext(), "确定",
          Toast.LENGTH_SHORT).show();
   }
  });
 
     }
}
这样,一个带文字和图片的组合按钮控件就完成了。这样梳理一下,使用还是非常简单的。组合控件能做的事还非常多,主要是在类似上例中的ImageBt类中写好要使用的方法即可。
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/759710
推荐阅读
相关标签
  

闽ICP备14008679号