首页 > 代码库 > 第二章 吸引你的眼球—UI编程（6）
第二章 吸引你的眼球—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 多个控件的组合
这样，一个带文字和图片的组合按钮控件就完成了。这样梳理一下，使用还是非常简单的。下面，我们再来看一个例子，自定义一个控件，显示带有边框的字。我们新建一个类继承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方法
可以看到，带有边框的字已经实现了。
第二章 吸引你的眼球—UI编程（6）