首先介绍一下安卓控件和布局的继承结构,如下图:
View是安卓中最基本的一种UI组件,它可以在屏幕上绘制一块矩形区域,并能相应这块区域的各种事件,我们使用的各种控件其实是在View的基础之上又添加了各自特有的功能。如图所示,我们所用的所有控件都是直接或间接继承自View的,所用的所有布局都是直接或间接继承自ViewGroup的,而ViewGroup也继承自View。
接下来就开始实现我们的第一个自定义控件-自定义标题栏。
首先导入到drawable文件夹中两个我们要用到的图片:


其实所谓的自定义控件就是我们自己创建一个布局,然后在这个布局去编辑内容,其他的布局文件就可以像使用控件一样直接引用我们创建的这个布局文件进行使用了。
具体步骤
1.新建一个布局文件title.xml
2.然后编辑title.xml的布局代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ccc">
<Button
android:id="@+id/title_back"
android:layout_margin="5dp"
android:background="@drawable/backspace"
android:layout_gravity="center"
android:layout_width="60dp"
android:layout_height="45dp"></Button>
<TextView
android:id="@+id/title_text"
android:layout_gravity="center"
android:textSize="24sp"
android:gravity="center"
android:text="Title Text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"></TextView>
<Button
android:id="@+id/title_edit"
android:layout_margin="5dp"
android:background="@drawable/edit"
android:layout_gravity="center"
android:layout_width="50dp"
android:layout_height="50dp"></Button>
</LinearLayout>
效果图
3.定义好我们新建的title.xml布局文件,然后就可以在activity_main.xml中引用title.xml了
activity_main.xml代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include layout="@layout/title"></include>
</LinearLayout>
没错!我们只需要通过一行include语句将标题栏布局引入进来就可以了。效果和上个效果图一模一样。
但是我们实际运行的时候会如下图所示,有两个标题栏;
如果我们想把系统自带的标题栏去掉,可以修改MainActivity如下:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionbar = getSupportActionBar();
if (actionbar ! = null) {
actionbar.hide();
}
}
}
这里我们调用了getSupportActionBar()方法来获得ActionBar的实例,然后再调用ActionBar的hide()方法将标题栏隐藏起来。
重新运行程序,效果如下:
创建自定义控件的优化
引入布局的技巧确实解决了重复编写布局代码的问题,但是如果布局中有一些控件要求能够响应事件,我们还是需要在每个活动中为这些控件单独编写一次事件注册的代码。我们可通过如下方式解决
新建TitleLayout类继承自LinearLayout类,让它成为我们自定义的标题栏控件,代码如下所示:
public class TitleLayout extends LinearLayout {
public TitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title, this);
}
}
通过LayoutInflater的from()方法可以构建出一个LayoutInflater对象,然后调用inflate()方法就可以动态加载一个布局文件,inflate()方法接收两个参数,第一个参数是要加载的布局文件的id,这里我们传入R.layout.title,第二个参数是给加载好的布局再添加一个父布局,这里我们想要指定为TitleLayout,于是直接传入this。
即让这个TitleLayout类成为我们自定义控件的引用源,然后我们需要在布局文件中添加这个自定义控件,修改activity_main.xml中的代码,如下所示:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.example.customviews2.TitleLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"></com.example.customviews2.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 view) {
((Activity)getContext()).finish();
}
});
titleEdit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getContext(), "You clicked Edit button",
Toast.LENGTH_SHORT).show();
}
});
}
}
这样的话,每当我们在一个布局中引入TitleLayout时,返回按钮和编辑按钮的点击事件就已经自动实现好了,这就省去了很多编写重复代码的工作。