一.如今好多的Android APP都在界面的顶部放置一个标题栏,标题栏里通常会有一两个按钮可用于返回和其它操作,虽然Android系统中已经给每个Activity提供了标题栏功能,但是这里介绍一下我学习到两种创建自定义标题栏的方式。
自定义标题栏的效果如下:
二.接下来就来介绍这两种方式:
- 引入布局的方式:
第一步,新建一个Android Project,项目名取为Custom_titlebar,然后创建一个布局文件,为title.xml,这个布局即为标题栏的布局,水平依次放置了按钮,文本视图,按钮,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/title_bar1">
<Button
android:id="@+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:background="@drawable/back"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="Hello World"/>
<Button
android:id="@+id/ok"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:background="@drawable/ok" />
</LinearLayout>
第二步,使用这个标题栏的布局,打开默认创建的activity_main.xml,代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include layout="@layout/title" />
</LinearLayout>
第三步,修改默认的MainActivity类,因为是自定义标题栏,所以要把默认的标题栏去掉,代码如下:
package com.example.custom_titlebar;
import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏
setContentView(R.layout.activity_main);
}
}
部署此项目,就可以得到之前上面那幅图的效果了。
使用引入布局的方式,不管有多少布局需要添加标题栏,只需一行include语句就行了。
2.第二种方式,创建自定义控件的方式:
引入布局的方式解决了重复编写布局代码的问题,但是如果布局中有一些控件要求能够响应事件,我们还是需要在每个Activity中为这些控件单独编写一次事件注册的代码。比如,每个标题栏上有个返回按钮,在每一个Activity里的功能都是一样的,如果使用引入布局的方式,将会增加很多代码,所以,自定义控件可以解决这样的问题。
第一步,新建一个title.xml布局文件,代码同第一种方式的title.xml文件一样。
第二步,新建一个TitleLayout类,继承于LinearLayout类,让此类成为我们的自定义标题栏控件,代码如下:
package com.example.custom;
import com.example.custom_titlebar1.R;
import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;
public class TitleLayout extends LinearLayout{
/**
* 构造方法
* @param context 上下文对象
* @param attrs
*/
public TitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title, this);//加载title.xml的布局文件
Button back=(Button)findViewById(R.id.back);//获取title.xml布局文件中的返回按钮
Button ok=(Button)findViewById(R.id.ok);//获取title.xml布局文件中的确认按钮
/**
* 添加各自的事件监听器
*/
back.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
((Activity) getContext()).finish();//返回上一个界面
}
});
ok.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
Toast.makeText(getContext(), "OK", Toast.LENGTH_SHORT).show();//显示OK的消息提示框
}
});
}
}
第三步,在默认的activity_main.xml布局文件中添加此自定义标题栏控件,代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.custom.TitleLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
其中添加自定义控件要指明控件的完整类名,包名是不能省略的。
第四步,修改MainActivity类,代码同第一种方式的MainActivity类一样。
部署此项目,就可以得到之前上面那幅图的效果了,此时我们点击左边的按钮,可返回上一级界面,点击右边的按钮,将会弹出消息提示框OK。