美化你的APP——从Toolbar开始

Toolbar是什么

Toolbar是Google在Android 5.0中推出的一款替代ActionBar的View。ActionBar必须得作为Activity内容的一部分,而Toolbar可以放在任何层次。Toolbar比ActionBar支持更多的功能,从开始到终点,Toolbar包含下面可选的元素:

- 一个导航按钮。 可以是一个向前的按钮、导航菜单按钮,等等。

- 一个logo图片

- 标题和副标题

- 一个或多个自定义一View

- 一个menu

下面先以一张图片来介绍一下Toolbar的布局。如下:

如何使用Toolbar

简单使用

现在,我用Android Studio创建一个Module,默认的,它会为我生成一个带Toolbar的Activity,其界面如下:

其中顶部就是ToolBar。

关于使用,有两点需要说明:

1. Activity需要继承自AppCompatActivity,Activity使用没有ActionBar的theme

public class MainActivity extends AppCompatActivity {

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

    }

}

下面是theme主题设置:

android:theme="@style/AppTheme.NoActionBar"
  1. 在布局文件中使用Toolbar控件
 <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" />

稍复杂一点使用

下面的使用将显示Toolbar的各个元素。

其中从左到右依次为Navigation Icon、App Icon、Title和SubTitle以及菜单。

其中导航图标、应用图标、标题这些既可以在XML中定义,也可以在代码中定义。要让Toolbar支持Menu,可以重写Activity的onCreateContextMenu中加载menu,然后给Toolbar设置一个MenuListener即可,如下:

ublic class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener {

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

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        toolbar.setOnMenuItemClickListener(this);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return true;
    }

    @Override
    public boolean onMenuItemClick(MenuItem item) {

        switch (item.getItemId()) {
            case R.id.action_search:
                Toast.makeText(this, "Search", Toast.LENGTH_SHORT).show();
                break;
            case R.id.action_add:
                Toast.makeText(this, "Add", Toast.LENGTH_SHORT).show();
                break;
            case R.id.action_setting:
                Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show();
                break;
        }

        return false;
    }
}

其中如果要想给导航按钮,增加返回的功能,需要重写onOptionsItemSelected方法,如下:

 @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        if (item.getItemId() == android.R.id.home) {
            finish();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

Toolbar让标题居中显示

很多应用,没有使用ActionBar,而是使用了自定义的Topbar。使用Toolbar后发现,有些布局可能也无法实现,或者说不好实现,比如说将Title至于Toolbar中间。Toolbar提供了titleMargin属性通过设置Marigin可以达到Title文本居中的效果,不过下面我的方案是在Toolbar中间添加一个TextView。效果如下:

其中实现是通过一个ToolbarHelper来实现的,其实现如下:

public class ToolbarHelper {

    public static void addMiddleTitle(Context context, CharSequence title, Toolbar toolbar) {

        TextView textView = new TextView(context);
        textView.setText(title);

        Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.WRAP_CONTENT);
        params.gravity = Gravity.CENTER_HORIZONTAL;
        toolbar.addView(textView, params);

    }

}

这样就可以实现一种效果,比如QQ

这样上图中的“动态”两字我们就可以使用Toolbar的title属性,而中间的好友动态就可以通过添加TextView的方式来实现。

至于其他功能,也可以通过Toolbar来添加View来实现。

源码请见Github

时间: 2025-01-14 04:06:17

美化你的APP——从Toolbar开始的相关文章

android:ToolBar详解(手把手教程)

来源 http://blog.mosil.biz/2014/10/android-toolbar/ 编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! 这篇文章因为是台湾人写的,语言风格很别致.本文在原文的基础上做了一些微调(主要是繁体字的问题). 今年(2014) 的 google i/o 发表令多数人为之一亮的 material design,而 goo

Android 5.x Theme 与 ToolBar 实战

1.概述 随着Material Design的逐渐的普及,业内也有很多具有分享精神的伙伴翻译了material design specification ,中文翻译地址:Material Design 中文版.So,我们也开始Android 5.x相关的blog,那么首先了解的当然是其主题的风格以及app bar. 当然,5.x普及可能还需要一段时间,所以我们还是尽可能的去使用兼容包支持低版本的设备. ps:本博客使用: compileSdkVersion 22 buildToolsVersio

苹果APP游戏及应用程序发布到AppStore详细流程

ios app应用开发完成提交至app store审核流程详解QQ2205357007- 提供苹果APP上架appstore市场咨询及服务,以及苹果开发者证书制作,测试证书制作,真机调试证书,APP市场截图美化,苹果APP被拒解决方案,苹果个人公司企业开发者注册,邓白氏编码申请协助.苹果APP二次开发等等增值服务.  [app代上架]苹果appstore上架_苹果App代上架_专业的苹果官方appstore市场上架服务提供商-qq2205357007--ios内部渠道包过 - [安卓各大市场包过

Android ToolBar详解

今年(2014) 的 google i/o 发表令多数人为之一亮的 material design,而 google 也从「google i/o 2014」 开始,大家也陆陆续续地看到其更新的 android app 皆套用了这个设计介面.当然,这个设计介面著实让大家感到惊艳外,更让 android 开发者开始担心未来 app 的界面处理了.不过,所幸有着之前 actionbar 的经验后,android 也很快地在 support library 里面提供了相对应的 api 给开发者使用,本篇

ToolBar使用以及使用中的问题

时间:2015年12月28日12:01:22 如何使用toolbar? 基础使用步骤: 1.style 2.layout 3.java a.style调整的地方主要为style.xml,新增加一个style,这里name叫做:AppTheme.Base,为了让原本的actionbar隐藏起来,所以写为: <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar"> //或者

最详细的 Android Toolbar 开发实践总结(转)

转自:http://www.codeceo.com/article/android-toolbar-develop.html 过年前发了一篇介绍 Translucent System Bar 特性的文章 Translucent System Bar 的最佳实践 ,收到很多开发者的关注和反馈.今天开始写第二篇,全面的介绍一下 Toolbar 的使用.说起 Toolbar ,可能有很多开发的童鞋还比较陌生,没关系,请接着往下看. 初识 Toolbar Toolbar是在 Android 5.0 开始

分分钟教你学会 ToolBar 的使用(转)

转自:http://blog.csdn.net/itguangit/article/details/52042203 1.和平常一样,新建一个Moudle 在xml布局文件中使用 Toolbar 控件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x

如何编写和精灵宝可梦一样的 app?

原文:How To Make An App Like Pokemon Go 作者:Jean-Pierre Distler 译者:kmyhy 如今最流行的一个手机游戏就是精灵宝可梦.它使用增强现实技术将游戏带入到"真实世界",让玩家做一些对健康有益的事情. 在本教程中,我们将编写自己的增强现实精灵捕获游戏.这个游戏会显示一张包含有你的位置和敌人的位置的地图,用一个 3D SceneKit 视图呈现后置摄像头中拍摄的图像和敌人的 3D 模型. 如果你第一次接触增强现实,你可以先看一下我们的

ListView或者RecyclerView滚动时隐藏Toolbar (1)

原文链接 : How to hide/show Toolbar when list is scroling (part 1) 译者 : chaossss 校对者: 这里校对者的github用户名 状态 : 校对中 今天我打算写一篇博文给大家介绍Google+ App的一个酷炫效果--向上/向下滚动ListView/RecyclerView时,Toolbar和FAB(屏幕右下方的小按钮)会隐藏/出现.这个效果也被Google视为符合 Material Design 规范的效果哦,详情参见: Mat