本文来自网易云社区

作者:孙有军

标题栏在每个应用中都有,有各种各样的标题栏,今天我们就主要来说说标题栏怎么做,主要内容涉及到自定义标题,ActionBar,Toolbar等知识。

自定义标题

几年前开发安卓是没有统一的标题的,每一个页面都需要自己来布局标题,如果有多个页面标题类似,往往就统一编写出来一个布局,统一管理和处理,这里我们来看看怎么编写自定义布局标题,不采用系统提供的,因为有时候有些特定的或者特殊效果的标题,自定义比较方便。

需要注意的是现在的应用基本上都从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之前调用。至于为什么,你看看源码就知道了。

在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有哪些属性需要设置:

  1. id标识该菜单

  2. icon 显示图标,如果在overflow则显示title

  3. title 如果在overflow中不显示icon,直接显示title,如果在ActionBar长按显示该title

  4. 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+款云产品!

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

相关文章:
【推荐】 质量报告之我见
【推荐】 网易易盾验证码的安全策略

Android 标题栏(1)的更多相关文章

  1. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  2. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  3. Android 标题栏(2)

    本文来自网易云社区 作者:孙圣翔 添加ActionProvider 1.在menu菜单中添加app:actionProviderClass属性: <item     android:id=&qu ...

  4. Android标题栏上添加多个Menu按钮

    最近项目中碰到要在Android Menu旁边再添加一个按钮,而不是点击menu按钮然后在弹出一些选项. MainActivity代码: public class MainActivity exten ...

  5. Android标题栏最右边添加按钮

    step1:重写activity的onCreateOptionsMenu方法 @Override public boolean onCreateOptionsMenu(Menu menu){ Menu ...

  6. Android 标题栏菜单设置与应用(popupWindow的应用)

    效果图

  7. android标题栏(titlebar)显示进度条

    在后台线程中执行各种操作(网络连接.大数据存储)的时候,我们希望让客户能看到后台有操作在进行,那么既能有效的提示用户,又不占用当前操作空间,最好的方法就是在标题栏有个进度条. [代码] [Java]代 ...

  8. Android 标题栏封装

    自定义命名空间与xml文件:

  9. Android开发之一些资源索引

    1.android标题栏(titlebar)显示进度条 protected void onCreate(Bundle savedInstanceState) { super.onCreate(save ...

随机推荐

  1. NSThread 在主线操作的三个方法

    - (void)createNSThread444{ UIImage *image = [UIImage imageNamed:@"图片名字"]; /** 1 performSel ...

  2. DB2事务日志

    1.DB2数据库的日志原理 事务日志记录数据库中所有对象和数据的改变,在早前版本中最大可达256G,其大小为( logprimary + logsecond ) * logfilsiz,其中logpr ...

  3. 我对于UI设计这个领域的理解

    User Interface(UI),包括三部分用户.界面以及用户与界面之间的交互关系.UI设计则是指对软件的人机交互.操作逻辑.界面美观的整体设计. 如何看待UI设计这个领域? 任何一个行业的出现都 ...

  4. Laravel 开启跨域请求

    项目中用到了接口,外部调用的时候老是请求不到,本地请求却没问题,查了下说是因为跨域的问题.根据网上所说解决方法如下: 1.建立中间件Cors.php命令:php artisan make:middle ...

  5. [SoapUI] 设置HTTP Request的Header

    import com.eviware.soapui.support.types.StringToStringMap def hearderMap = new StringToStringMap() d ...

  6. 优秀UX设计师的八条黄金法则

    与用户保持亲密   成为成功的UX设计师最重要的先决条件之一就是与用户保持紧密的联系,以发现和了解他们的需求和爱好.理想情况下你应该让自己完全地成为产品用户,因为只有这样你才能理解背后的动机.“这样的 ...

  7. spring-boot @Async 的使用、自定义Executor的配置方法

    1. TaskExecutor Spring异步线程池的接口类,其实质是java.util.concurrent.Executor Spring 已经实现的异常线程池: 1. SimpleAsyncT ...

  8. 2018.09.20 atcoder 1D Reversi(模拟)

    传送门 考虑每次摆石头都会消去最外层的一个连续颜色串. 所以只用统计一下有多少段颜色即可. 代码: #include<bits/stdc++.h> using namespace std; ...

  9. 2018.07.17 HAOI2016 找相同字符(SAM)

    传送门 就是给两个字符串,让你求公共字串的个数. 本来大佬们都是用的广义后缀自动机,但我感觉后缀自动机已经可以做这道题了.我们对其中一个字串建出后缀自动机,然后用另外一个后缀自动机在上面统计贡献即可. ...

  10. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)

    出处:http://www.cnblogs.com/jerehedu/p/7832808.html  前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...