android:建立自定义控件

在前面两节咱们已经学习了 Android 中的一些常见控件以及基本布局的用法，不过当时 咱们并无关注这些控件和布局的继承结构，如今是时候应该看一下了，如图 3.26 所示。

 

 

 

 

 

图   3.26

 

能够看到，咱们所用的全部控件都是直接或间接继承自 View 的，所用的全部布局都是 直接或间接继承自 ViewGroup 的。View 是 Android 中一种最基本的 UI 组件，它能够在屏幕 上绘制一块矩形区域，并能响应这块区域的各类事件，所以，咱们使用的各类控件其实就是 在 View 的基础之上又添加了各自特有的功能。而 ViewGroup 则是一种特殊的 View，它能够 包含不少的子 View 和子 ViewGroup，是一个用于放置控件和布局的容器。

这个时候咱们就能够思考一下，若是系统自带的控件并不能知足咱们的需求时，可不可 以利用上面的继承结构来建立自定义控件呢？答案是确定的，下面咱们就来学习一下建立自 定义控件的两种简单方法。先将准备工做作好，建立一个 UICustomViews 项目。

 

3.4.1    引入布局

 

若是你用过 iPhone 应该会知道，几乎每个 iPhone 应用的界面顶部都会有一个标题栏， 标题栏上会有一到两个按钮可用于返回或其余操做（iPhone 没有实体返回键）。如今不少的 Android 程序也都喜欢模仿 iPhone 的风格，在界面的顶部放置一个标题栏。虽然 Android 系 统已经给每一个活动提供了标题栏功能，但这里咱们仍然决定不使用它，而是建立一个自定义 的标题栏。

通过前面两节的学习，我想建立一个标题栏布局对你来讲已经不是什么困难的事情了， 只须要加入两个 Button 和一个 TextView，而后在布局中摆放好就能够了。但是这样作却存 在着一个问题，通常咱们的程序中可能有不少个活动都须要这样的标题栏，若是在每一个活的布局中都编写一遍一样的标题栏代码，明显就会致使代码的大量重复。这个时候咱们就可

以使用引入布局的方式来解决这个问题，新建一个布局 title.xml，代码以下所示：

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/title_bg" >

 

<Button android:id="@+id/title_back" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="5dip" android:background="@drawable/back_bg" android:text="Back" android:textColor="#fff" />

 

<TextView android:id="@+id/title_text" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:gravity="center" android:text="Title Text" android:textColor="#fff" android:textSize="24sp" />

 

<Button android:id="@+id/title_edit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="5dip" android:background="@drawable/edit_bg" android:text="Edit" android:textColor="#fff" />

 

</LinearLayout>

 

 

 

能够看到，咱们在 LinearLayout 中分别加入了两个 Button 和一个 TextView，左边的 Button

可用于返回，右边的 Button 可用于编辑，中间的 TextView 则能够显示一段标题文本。上面 的代码中大多数的属性你都已是见过的，下面我来讲明一下几个以前没有讲过的属性。 android:background 用于为布局或控件指定一个背景，可使用颜色或图片来进行填充，这 里我提早准备好了三张图片，title_bg.png、back_bg.png 和 edit_bg.png，分别用于做为标题栏、 返回按钮和编辑按钮的背景。另外在两个 Button 中咱们都使用了 android:layout_margin 这个属 性，它能够指定控件在上下左右方向上偏移的距离，固然也可使用 android:layout_marginLeft 或 android:layout_marginTop 等属性来单独指定控件在某个方向上偏移的距离。

如今标题栏布局已经编写完成了，剩下的就是如何在程序中使用这个标题栏了，修改

activity_main.xml 中的代码，以下所示：

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" >

 

<include layout="@layout/title" />

 

 

</LinearLayout>

没错！咱们只须要经过一行 include 语句将标题栏布局引入进来就能够了。 最后别忘了在 MainActivity 中将系统自带的标题栏隐藏掉，代码以下所示：

 

public class MainActivity extends Activity {

 

 

@Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

}

 

 

}

如今运行一下程序，效果如图 3.27 所示。

 

 

图   3.27

 使用这种方式，无论有多少布局须要添加标题栏，只需一行 include 语句就能够了。

 

3.4.2    建立自定义控件

 

引入布局的技巧确实解决了重复编写布局代码的问题，可是若是布局中有一些控件要求 可以响应事件，咱们仍是须要在每一个活动中为这些控件单独编写一次事件注册的代码。好比 说标题栏中的返回按钮，其实不论是在哪个活动中，这个按钮的功能都是相同的，即销毁 掉当前活动。而若是在每个活动中都须要从新注册一遍返回按钮的点击事件，无疑又是增 加了不少重复代码，这种状况最好是使用自定义控件的方式来解决。

新建 TitleLayout 继承自 LinearLayout，让它成为咱们自定义的标题栏控件，代码以下 所示：

 

public class TitleLayout extends LinearLayout {

 

 

public TitleLayout(Context context, AttributeSet attrs) {

super(context, attrs);

LayoutInflater.from(context).inflate(R.layout.title, this);

}

 

}

 

 

 

首先咱们重写了 LinearLayout 中的带有两个参数的构造函数，在布局中引入 TitleLayout

控件就会调用这个构造函数。而后在构造函数中须要对标题栏布局进行动态加载，这就要借 助 LayoutInflater 来实现了。经过 LayoutInflater 的 from()方法能够构建出一个 LayoutInflater 对象，而后调用 inflate()方法就能够动态加载一个布局文件，inflate()方法接收两个参数，第 一个参数是要加载的布局文件的 id，这里咱们传入 R.layout.title，第二个参数是给加载好的 布局再添加一个父布局，这里咱们想要指定为 TitleLayout，因而直接传入 this。

如今自定义控件已经建立好了，而后咱们须要在布局文件中添加这个自定义控件，修改

activity_main.xml 中的代码，以下所示：

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" >

 

<com.example.uicustomviews.TitleLayout android:layout_width="match_parent" android:layout_height="wrap_content"

></com.example.uicustomviews.TitleLayout>

 

 

</LinearLayout>

添加自定义控件和添加普通控件的方式基本是同样的，只不过在添加自定义控件的时候 咱们须要指明控件的完整类名，包名在这里是不能够省略的。

从新运行程序，你会发现此时效果和使用引入布局方式的效果是同样的。 而后咱们来尝试为标题栏中的按钮注册点击事件，修改 TitleLayout 中的代码，以下所示：

 

public class TitleLayout extends LinearLayout {

 

 

public TitleLayout(Context context, AttributeSet attrs) { super(context, attrs); LayoutInflater.from(context).inflate(R.layout.title, this); Button titleBack = (Button) findViewById(R.id.title_back); Button titleEdit = (Button) findViewById(R.id.title_edit); titleBack.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) { ((Activity) getContext()).finish();

}

});

titleEdit.setOnClickListener(new OnClickListener() {

@Override

 

 

 

public void onClick(View v) {

Toast.makeText(getContext(), "You clicked Edit button",

Toast.LENGTH_SHORT).show();

}

});

}

 

}

首先仍是经过 findViewById()方法获得按钮的实例，而后分别调用 setOnClickListener() 方法给两个按钮注册了点击事件，当点击返回按钮时销毁掉当前的活动，当点击编辑按钮时 弹出一段文本。从新运行程序，点击一下编辑按钮，效果如图 3.28 所示。

 

 

 

图   3.28

 

这样的话，每当咱们在一个布局中引入 TitleLayout，返回按钮和编辑按钮的点击事件就 已经自动实现好了，也是省去了不少编写重复代码的工做。