安卓学习笔记---自定义app顶部标题栏

几乎每一个安卓应用在顶部都有一个标题栏，有返回，标题，编辑等其他显示的控件，这些控件在每一个页面都会显示，那么又是怎么实现的呢？

最笨的方法就是每一个页面都去重新写一遍，就有了大量重复的代码，也浪费了大量的时间，如果还有点击事件，那无疑在代码中又写了很多重复的代码，蓝瘦香菇有木有

比较好的方式就是我们只写一个文件，然后让其他的布局文件来引用即可，简单高效。

下面看看如何实现：借鉴郭神的思路

引入布局：

首先我们创建一个title_bar.xml文件，用来定义标题栏需要展示哪些控件，代码如下所示：

xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#00ffff"
    >
    <Button
        android:id="@+id/btnBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="返回"
        android:layout_alignParentLeft="true"
        />
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="标题"
        android:layout_centerInParent="true"
        />

    <Button
        android:id="@+id/btnEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="编辑"
        android:layout_alignParentRight="true"
        />
LinearLayout>

定义了两个按钮，一个显示标题的文本。

这样我们就可以在每个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"
    android:orientation="vertical">
    <include layout="@layout/title_bar">include>
  
LinearLayout>

运行之后，效果如下所示：

同时我们还看到了安卓自带了标题栏功能，这里我们使用代码先隐藏掉，代码如下所示：

android.support.v7.app.ActionBar actionBar=getSupportActionBar();
if(actionBar!=null)
{
    actionBar.hide();
}

这里调用了 getSupportActionBar()方法来获得ActivityBar的实例，然后在调用ActionBar的hide()方法将标题栏隐藏起来。再次运行程序，效果如下：

创建自定义控件

引入布局的技巧确实解决了重复编写布局代码的问题，但是如果布局中有一些控件要求能够响应事件，我们还是需要在每个活动中为这些控件单独编写一次事件注册代码。比如说标题栏中的返回按钮，其实不管是在哪个活动中，这个按钮功能都是相同的，即销毁当前活动。而如果在每一个活动中都需要重新注册一遍返回按钮的点击事件，无疑会增加很多重复代码，这种情况最好是使用自定义控件的方式解决。

代码如下：

/**
 * 自定义标题栏
 */
public class TitleLayout extends LinearLayout{

    private TextView tv_title;
    public TitleLayout(Context context) {
        super(context,null);
    }

    public TitleLayout(final Context context, AttributeSet attrs) {
        super(context, attrs);

        //引入布局
        LayoutInflater.from(context).inflate(R.layout.title_bar,this);
        Button btnBack=(Button)findViewById(R.id.btnBack);
        Button btnEdit=(Button)findViewById(R.id.btnEdit);
        btnBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                ((Activity)getContext()).finish();
            }
        });

        btnEdit.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(context,"编辑",Toast.LENGTH_SHORT).show();
            }
        });

        tv_title=(TextView)findViewById(R.id.tv_title);

    }

    //显示活的的标题
    public void setTitle(String title)
    {
        if(!TextUtils.isEmpty(title))
        {
            tv_title.setText(title);
        }
    }
}

给出了按钮的点击事件以及显示活动标题的方法，接下来如何使用呢？

首先来看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"
    android:orientation="vertical"
    android:background="#ff00ff"
    tools:context="com.test.helloworld.MainActivity">

    <com.test.helloworld.view.TitleLayout
        android:id="@+id/titlelayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    com.test.helloworld.view.TitleLayout>

LinearLayout>

添加自定义控件和添加普通控件的方式基本是一样的，只不过在添加自定义控件的时候，我们需要指明控件的完整类名，包名在这里是不可以省略的。

接下来我们就看在代码中如何使用：

public class SeconeActivity extends BaseActivity {
    private TitleLayout titlelayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_secone);
        //隐藏系统的标题栏
        android.support.v7.app.ActionBar actionBar=getSupportActionBar();
        if(actionBar!=null)
        {
            actionBar.hide();
        }
        titlelayout=(TitleLayout)findViewById(R.id.titlelayout);
        //显示活动自定义标题
        titlelayout.setTitle("第二个页面");
    }
}

运行效果如下：

看到了吗，使用就是这么简单，赶快用上吧，减少很多代码呢。