Android 标题栏（1）

时间 2019-11-12

原文原文链接

本文来自网易云社区android

做者：孙有军web

标题栏在每一个应用中都有，有各类各样的标题栏，今天咱们就主要来讲说标题栏怎么作，主要内容涉及到自定义标题，ActionBar，Toolbar等知识。app

自定义标题

几年前开发安卓是没有统一的标题的，每个页面都须要本身来布局标题，若是有多个页面标题相似，每每就统一编写出来一个布局，统一管理和处理，这里咱们来看看怎么编写自定义布局标题，不采用系统提供的，由于有时候有些特定的或者特殊效果的标题，自定义比较方便。
ide

须要注意的是如今的应用基本上都从4.0开始支持，就算是低版本也有surpport包可使用，所以在使用以前，给该页面设置为NoActionbar。
函数

布局

首先咱们新建一个title_layout.xml布局：布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:background="@color/color_FA5864"
                android:orientation="vertical"
                tools:showIn="@layout/activity_custom_title">

    <ImageView
        android:id="@+id/back_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:src="@drawable/actionbar_white_back_icon"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/back_icon"
        android:textColor="@color/white"
        android:textSize="16sp"
        tools:text="@string/ask"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="18dp"
        android:src="@drawable/person_center"/>

</RelativeLayout>

上面的布局都很简单，就是一个相对布局，两边是图标，中间一个标题，根据具体需求能够实现更为复杂的效果，这里咱们来讲说tools效果。优化

小技巧

tools:showIn="@layout/activity_custom_title"

由于该title_layout是被其余布局include引用使用的，所以你在当前界面预览，只能预览到当前实现的效果，而若是你添加了tools：showIn属性，就能够在当前布局预览到放置到目标布局后的效果。

tools:text="@string/ask" 当咱们在布局时，有时可能须要设置文案来预览实现效果，可是当正式提交时又须要删除默认设置的文案，这里可使用tools:text来插入文案，这个只在编写时有效果，正式提交时会删除该属性。

布局引用

在布局完成后，就能够在目标布局中include使用：动画

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

其余设置

最后关掉当前的Actionbar，有如下几种方式能够关闭：网站

onCreate中调用requestWindowFeature(Window.FEATURE_NO_TITLE);记住必定要在setContentView以前调用。至于为何，你看看源码就知道了。ui

在AndroidManifest对对应的Activity设置style。style为NoActionBar

若是设置的style不是NoActionBar，则对使用的style复写<item name="windowActionBar">false</item> 和<item name="windowNoTitle">true</item>属性

优缺点

自定义很容易实现，他主要有哪些优缺点呐？

优势：

定制度高，灵活容易实现比较复杂的布局容易实现自定义动画效果

缺点

重复布局，样式多时通用性差不少特定效果，代码复杂系统相比原生，优化比较少

ActionBar & Toolbar

你可能在想为何这里要合在一块儿，不该该一个一个的讲解吗？这咱们先看看他们出现的缘由。

历史沿革

在系统早期没有统一的标题设置，每一个页面就须要本身来实现标题，所以在Andriod 3.0版本，系统中引入了ActionBar来统一实现标题效果，而且对3.0之前的版本采用support包进行支持（其实如今基本上全部手机已经从4.0开始支持了，所以能够不须要考虑3.0之前的版本），ActionBar的出现，提供了全局统一的UI界面，而且提供了一致的操做效果，只要你是ActionBar进行实现的，都有一样的效果。

虽然ActionBar统一了不少东西，可是它也牺牲了灵活性，为了实现某些效果仍是须要采用自定义实现，尤为是一些炫酷的标题效果，google也认识到了这个问题，尤为是在当前界面不炫酷都没有人用的状况下，google在Android L（5.0）版本提供了Toolbar，在L以前的版本采用support包来实现，Toolbar能够当作ActionBar来使用，而且提供了灵活性，所以ActionBar已经不怎么建议使用了。因为Toolbar能够当前ActionBar来使用，说明二者具备不少相同的东西，所以这里放到一块儿来说解。

ActionBar的显示与隐藏

ActionBar的显示

在3.0以上的版本，只要你的Activity实现了Theme.Holo主题，或者Theme.Holo的子主题，他默认就已经有ActionBar效果了。若是是其余主题，你可能须要调用requestWindowFeature(Window.FEATURE_ACTION_BAR)函数来显示，或者对你使用的主题中的 windowActionBar属性设置为true，而3.0以前的版本（不用考虑3.0以前的版本）你须要让你的Activity继承自ActionBarActivity，而且设置主题为Theme.AppCompat主题。

ActionBar的影藏

在前面自定义的时候咱们已经说了怎么隐藏，这里在来提一下，能够调用requestWindowFeature(Window.FEATURE_NO_TITLE)来隐藏，也能够对Activity设置NoActionBar主题进行隐藏，或者设置windowActionBar为false，还能够在代码中调用getActionBar().hide或者getSupportActionBar().hide()。这里调用的函数不一样是根据你继承的Activity来区分的，若是你直接继承的是Activity则调用getActionBar（），若是是support包中则调用getSupportActionBar（）。

Toolbar的使用

要使用Toolbar，首先要将默认出现的ActionBar隐藏，所以须要设置NoActionBar，或者设置windowActionBar为false，以后在布局中加入Toolbar节点。样例以下，Activity引入的一个toolbar_layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="com.netease.study.ui.title.ToolbarActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="内容内容内容"/>


</LinearLayout>

布局完成后，在界面中find该View，将他设置到ActionBar，让Activity将它当作ActionBar来处理。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_toolbar);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}

将find出来的Toolbar设置到ActionBar。就这么简单，以后全部的使用方式都跟以前的ActionBar同样了。从布局中也能够看出咱们将Toolbar放置在线性布局的顶部，其实它能够放置在任何位置，与ActionBar不同，ActionBar默认在顶部，状态栏如下的位置。

设置属性

既然是标题栏，那确定是有一些属性能够进行设置的，那咱们就来以此的设置一些属性，这里设置的属性对于ActionBar，Toolbar（这里的Toolbar是当作ActionBar来使用的，就是调用了setSupportActionBar(toolbar)函数）都实用。咱们来看看一张图片，先来认识一下ActionBar上的各个属性：

为ActionBar图标，通常为应用图标，不过如今不少应用已经再也不显示图标了，包含它只是为了品牌曝光和宣传；

Action按钮，点击这些图标能够作一系统响应Overflow按钮，当前面的Action按钮显示不下，且配置了某些属性时会显示该按钮。

设置图标

能够采用以下的方式来设置应用图标：

1. 在AndroidManifest中的Application节点或者Activity节点设置logo属性

可是要注意的是若是你的主题是Theme.Holo的，若是设置了logo属性，默认是会显示图标的，可是若是你设置的是Theme.AppCompat，那恭喜你，默认不显示，若是你想显示怎么办代码中调用。

2.调用代码来显示

若是配置中没有设置logo属性，咱们须要代码来控制，可是这里也分为两种状况:

a.若是你的Activity是继承自Activity的，那么你能够直接调用getActionBar().setLogo()

b.若是你的Activity是继承自AppCompatActivity的，那么你须要以下的方式来进行设置，三个设置方式一个都不能少：

private void setLogo() {
    ActionBar actionBar = getSupportActionBar();
    actionBar.setLogo(R.drawable.logo);
    actionBar.setDisplayUseLogoEnabled(true);
    actionBar.setDisplayShowHomeEnabled(true);
}

上面就是整个设置logo的方式，Android就是这么的坑爹啊！不一样的版本，不一样的主题，不一样的基类状况就彻底不同了，这也是Android适配的一方面，全是坑，坑。

设置标题

设置标题是比较简单的，不会出上面的那些幺蛾子，主要有如下两种方式来设置：

1：在AndroidManifest的Activity设置label节点，可是要注意的是这里只能设置主标题

2：在代码中设置，若是是继承自Activity调用getActionBar().setTitle()来设置主标题，调用getActionBar().setSubTitle()来设置副标题。若是是继承自AppCompatActivity，则须要调用getSupportActionBar来进行设置。

设置Action按钮

咱们在上面的ActionBar图中认识到了有Action按钮。那怎么添加Action按钮呐？

1：首先建立一个菜单布局 action_menu.xml，放置到menu文件下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/search_icon"
        android:icon="@drawable/actionbar_search_dark_icon"
        android:title="@string/search"
        app:showAsAction="always">
    </item>

    <item
        android:id="@+id/plus"
        android:icon="@drawable/actionbar_plus_icon_normal"
        android:title="@string/more"
        app:showAsAction="always">
    </item>
</menu>

菜单里面包含两个按钮一个搜索，一个加号，每个item就表示一个菜单，item里面能够继续嵌套menu，做为该项item的子菜单。这里咱们来看看每个item有哪些属性须要设置：

id标识该菜单
icon 显示图标，若是在overflow则显示title
title 若是在overflow中不显示icon，直接显示title，若是在ActionBar长按显示该title
showAsAction标识显示规则，重点看一下该属性：

always： always永远显示ActionBar中，若是空间不够则没法显示 ifRoom： ifRoom表示有空间的时候显示在ActionBar中，不然显示在overflow中 never：never一直显示在overflow中

同时还须要注意的是：若是你使用的support，也就是Theme为Theme.AppCompat，须要声明xmlns:app="http://schemas.android.com/apk/res-auto" app能够改为任何名称，showAsAction前面用app来标识，若是不是采用的support，也就是Theme为Theme.Holo，前面用android来标识，不然全部菜单都默认显示在overflow中

2：代码中加载菜单，须要复写onCreateOptionsMenu函数

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.action_menu, menu);    
    return true;
}

通过上述两步，菜单就已经显示在ActionBar上面了。

响应Action按钮

显示菜单后，须要响应点击事件，怎么来响应点击事件？须要复写onOptionsItemSelected函数:

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {  
  switch (item.getItemId()) {        case R.id.search_icon:
            Toast.makeText(this, "clicked", Toast.LENGTH_LONG).show();          
              break;        
              case R.id.plus:           
               break;
    }   
     return super.onOptionsItemSelected(item);
}

在onOptionsItemSelected中根据id来进行响应。

设置ActionView

咱们能够在菜单中设置ActionView，好比搜索，他是一个带图标和输入框的控件，他分别有两种不一样的形态，展开和折叠。接下来咱们就讲讲怎么设置ActionView。 1.在menu菜单的item中设置actionViewClass属性：

<item    
android:id="@+id/search_icon"  
  android:icon="@drawable/actionbar_search_dark_icon"   
   android:title="@string/search"    
   app:actionViewClass="android.support.v7.widget.SearchView"  
     app:showAsAction="ifRoom|collapseActionView">
</item>
// 注意 根据是否引用的support包，actionViewClass设置的类不一样，若是是support包则设置为android.support.v7.widget.SearchView且用app来标识， 不然设置为android.widget.SearchView且用android来标识

2：在代码中能够获取到ActionView，也能够设置ActionView：

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.action_menu, menu);
    MenuItem search = menu.findItem(R.id.search_icon);    
    // 这种方式也能够获取到ActionView
    // SearchView view = (SearchView) search.getActionView();
    // 必定要注意导入的类是否正确,要区分support和非support包中的类
    SearchView view = (SearchView) MenuItemCompat.getActionView(search);
    view.setOnQueryTextListener(new SearchView.OnQueryTextListener() {     
       @Override
        public boolean onQueryTextSubmit(String query) {         
           return false;
        }        @Override
        public boolean onQueryTextChange(String newText) {       
             return false;
        }
    });    return true;
}

若是menu菜单中没有设置actionViewClass，也能够在代码中手动设置，search.setActionView(new SearchView(this));，上面就是获取到的SearchView，必定要注意引入的类是否正确，不然会崩溃，拿到后就能够设置查询等监听了，这里就不在演示了。

网易云免费体验馆，0成本体验20+款云产品！

更多网易研发、产品、运营经验分享请访问网易云社区。