第二章 吸引你的眼球—UI编程（6）

2.2 彰显你的个性—自定义UI组件

很多时候，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="wrap_content"      android:layout_height="wrap_content"  >  <ImageView      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:id="@+id/iv"      android:paddingTop="5dip"      android:paddingBottom="5dip"      android:paddingLeft="20dip"      android:layout_gravity="center_vertical"  />  <TextView      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:textColor="#333"      android:id="@+id/tv"      android:layout_marginLeft="8dip"      android:layout_gravity="center_vertical"  />  </LinearLayout>

 

这个xml实现了一个左图右字的布局，接下来写一个类MyLayout继承LinearLayout，导入刚刚的布局，并且设置需要的方法，从而使得能在代码中控制这个自定义控件内容的显示。代码如下：

// import略 public class MyLayout extends LinearLayout {       private ImageView iv;     private TextView tv;       public MyLayout(Context context) {         this(context, null);     }     public MyLayout(Context context, AttributeSet attrs) {         super(context, attrs);         // 导入布局         LayoutInflater.from(context).inflate(R.layout.mylayout, 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"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent">     <com.char2.MyLayout         android:id="@+id/my_button"          android:layout_height="wrap_content"          android:layout_width="wrap_content"          android:background="@drawable/button_gray"/> </LinearLayout>

 

最后，我们在activity中设置该控件的内容，部分代码如下：

MyLayout myLayout = (MyLayout)findViewById(R.id.my_button); myLayout.setImageResource(R.drawable.close); myLayout.setTextViewText("关闭");

 

效果如图2-18所示：

图2-18 多个控件的组合

 

--------------------------------------------

试着放个广告 现在没工作 要生存 没办法

平安陆金所 隶属于平安集团的p2p平台

年投资回报率7%－9% 是替代银行理财的首选

个人经验教训 推荐投资安鑫或者有担保的彩虹项目

不要投资安e 那个几乎无法转让 想提前提现非常困难

注册链接  http://affiliate.lufax.com/action/36XBU

用此链接注册 你我都会有几十元的额外现金奖励

--------------------------------------------

这样，一个带文字和图片的组合按钮控件就完成了。这样梳理一下，使用还是非常简单的。下面，我们再来看一个例子，自定义一个控件，显示带有边框的字。我们新建一个类继承TextView，然后重写它的onDraw方法，部分代码如下：

private Canvas canvas = new Canvas();       public MyTextView(Context context, AttributeSet attrs) {         super(context, attrs);     }     @Override     protected void onDraw(Canvas canvas) {         super.onDraw(canvas);         this.canvas = canvas;         Rect rec = canvas.getClipBounds();         Paint paint = new Paint();         paint.setColor(Color.WHITE);         paint.setStyle(Paint.Style.STROKE);         paint.setStrokeWidth(2);         canvas.drawRect(rec, paint);     }

 

然后，我们在需要使用这个自定义控件的layout中加入这控件：

<?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">     <com.char2.MyTextView         android:layout_centerInParent="true"         android:id="@+id/my_button"          android:layout_height="wrap_content"          android:layout_width="wrap_content"          android:text="自定义控件"         android:textSize="24sp"/> </RelativeLayout>

 

效果如图2-19所示：

图2-19 重写控件onDraw方法

 

可以看到，带有边框的字已经实现了。