android action bar 风格,Android ActionBar和ToolBar的使用

最新推荐文章于 2023-08-27 17:43:56 发布
最新推荐文章于 2023-08-27 17:43:56 发布
阅读量533 收藏
点赞数
文章标签： android action bar 风格

参考

前言

自android5.0开始，AppCompatActivity代替ActionBarActivity，而且ToolBar也代替了ActionBar，下面就是ActionBar和ToolBar的使用

ActionBar

1、截图

81d0bcb282cb

image.png

2、使用

2.1、AppCompatActivity和其对应的Theme

AppCompatActivity使用的是v7的ActionBar(和默认的ActionBar使用起来略有区别，一会代码中会有体现)

Theme的话继承于Theme.AppCompat.Light.DarkActionBar，系统提供的深色系的actionbar，那么按钮，文字，和菜单是白色的

//Activity

public class ActionBarActivity extends AppCompatActivity

//style

@color/colorPrimary

@color/colorPrimaryDark

@color/colorAccent

false

2.2、ActionBar的使用

获取actionbar：

math?formula=%5Ccolor%7Bred%7D%7B%E8%BF%99%E9%87%8Cv7%E7%9A%84%E6%98%AFgetSupportActionBar()%EF%BC%8C%E9%BB%98%E8%AE%A4%E7%9A%84%E6%98%AFgetActionBar()%7D

//AppCompatActivity use v7 action bar

actionBar = this.getSupportActionBar();

//Activity use action bar

//actionBar = this.getActionBar();

if(actionBar == null){

return;

}

设置主副标题

//主标题

actionBar.setTitle("ActionBar Title");

//副标题

actionBar.setSubtitle("Sub Title");

设置navigation up按钮：可见+可用+更换图标

//左侧按钮：可见+可用+更换图标

actionBar.setDisplayHomeAsUpEnabled(true);

actionBar.setHomeButtonEnabled(true);

//actionBar.setHomeAsUpIndicator(R.mipmap.back_white);

设置navigation up按钮的监听：复写onSupportNavigateUp()，

math?formula=%5Ccolor%7Bred%7D%7B%E4%BD%86%E6%98%AF%E5%A6%82%E6%9E%9C%E6%9C%89menu%E5%A4%8D%E5%86%99onOptionsItemSelected%E5%87%BD%E6%95%B0%E7%9A%84%E8%AF%9D%EF%BC%8C%E5%88%99onSupportNavigateUp()%E5%B0%86%E4%B8%8D%E4%BC%9A%E8%A2%AB%E8%B0%83%E7%94%A8%7D

/**

* 复写：左侧按钮点击动作

* android.R.id.home

* v7 actionbar back event

* 注意：如果复写了onOptionsItemSelected方法，则onSupportNavigateUp无用

* */

@Override

public boolean onSupportNavigateUp() {

finish();

return super.onSupportNavigateUp();

}

/**

* 复写：左侧按钮点击动作

* android.R.id.home

* actionbar back event

* 注意：如果复写了onOptionsItemSelected方法，则onSupportNavigateUp无用

@Override

public boolean onNavigateUp() {

finish();

return super.onNavigateUp();

}* */

设置logo(icon等)：用logo代替icon，不知道为什么不灵？？

//设置logo

actionBar.setLogo(android.R.mipmap.sym_def_app_icon);

actionBar.setDisplayUseLogoEnabled(true);

//设置icon：use logo instead of an icon

//actionBar.setIcon(R.mipmap.ic_launcher);

设置菜单menu和对应监听：android.R.id.home就是左侧的navigation up按钮

/**

* 复写：添加菜单布局

* */

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.menu, menu);

return true;

}

/**

* 复写：设置菜单监听

* */

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

//actionbar navigation up 按钮

case android.R.id.home:

finish();

break;

case R.id.action_refresh:

Toast.makeText(this, "Refresh selected", Toast.LENGTH_SHORT).show();

break;

case R.id.action_add:

Toast.makeText(this, "Add selected", Toast.LENGTH_SHORT).show();

break;

case R.id.action_settings:

Toast.makeText(this, "Settings selected", Toast.LENGTH_SHORT).show();

break;

default:

break;

}

return true;

}

设置tab和对应监听

//增加actionbar 下面的tab按钮

actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

actionBar.addTab(actionBar.newTab().setText("Tab 1").setTabListener(new ActionBar.TabListener() {

@Override

public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

Toast.makeText(ActionBarActivity.this, "Tab 1 select",Toast.LENGTH_SHORT).show();

}

@Override

public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { }

@Override

public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { }

}));

actionBar.addTab(actionBar.newTab().setText("Tab 2").setTabListener(new ActionBar.TabListener() {

@Override

public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

Toast.makeText(ActionBarActivity.this, "Tab 2 select",Toast.LENGTH_SHORT).show();

}

@Override

public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { }

@Override

public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { }

}));

或者完全自定义

//自定义

actionBar.setCustomView(R.layout.actionbar_title);

actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

隐藏、显示actionbar

case R.id.btn_hide:

if(actionBar != null){

/**

* 隐藏actionbar

* 1、有actionbar情况下：actionBar.hide();

* 2、直接使用Theme.Holo.NoActionBar

* 3、theme中添加属性

* false

* true

* 4、在setContent之前 Window feature must be requested before adding content

* AppCompatActivity: supportRequestWindowFeature(Window.FEATURE_NO_TITLE)，

* Activity: requestWindowFeature(Window.FEATURE_NO_TITLE);

*

* */

actionBar.hide();

}

break;

case R.id.btn_show:

if(actionBar != null){

actionBar.show();

}

break;

-------------------------------------分割线-------------------------------

Menu(共通的菜单，不细说)

1、showAsAction属性

always表示永远显示在ActionBar中，如果屏幕空间不够则无法显示

ifRoom表示屏幕空间够的情况下显示在ActionBar中，不够的话就显示在overflow中

never则表示永远显示在overflow中

withText：这个值使菜单项和它的图标，文本一起显示

2、布局

xmlns:android="http://schemas.android.com/apk/res/android">

android:id="@+id/action_refresh"

android:icon="@mipmap/refresh"

android:title="Refresh"

app:showAsAction="always" />

android:id="@+id/action_add"

android:icon="@mipmap/add"

android:title="Add"

app:showAsAction="ifRoom" />

android:id="@+id/action_settings"

android:icon="@mipmap/settings"

android:title="Settings"

app:showAsAction="never">

-------------------------------------分割线-------------------------------

ToolBar

了解了ActionBar的话，那么ToolBar和其差不多，更加强大，更加符合MD风格，然后就代替ActionBar，使用起来差不多，但是又UI上的坑

1、截图：颜色不正常的

81d0bcb282cb

image.png

2、使用

2.1、隐藏ActionBar有4中方式

1、如果继承了theme有actionbar的则，在setContentView方法之前设置：v7的supportRequestWindowFeature(Window.FEATURE_NO_TITLE);或者非v7的requestWindowFeature(Window.FEATURE_NO_TITLE);

2、theme直接继承没有actionbar的，比如说：Theme.AppCompat.Light.NoActionBar

3、theme中没设置属性没有actionbar：false

true

4、actionBar.hide();

2.2、AppCompatActivity和其对应的Theme

//activity

public class ToolBarActivity extends AppCompatActivity

//style

false

true

@color/colorPrimary

@color/colorPrimaryDark

@color/colorAccent

false

ToolBar的使用

toolbar在layout中布局代码：

math?formula=%5Ccolor%7Bred%7D%7B%E8%BF%99%E9%87%8C%E9%9D%A2%E6%9C%89UI%E7%9A%84%E5%9D%91%EF%BC%8C%E5%B0%B1%E6%98%AF%E6%B7%B1%E8%89%B2toolbar%EF%BC%8C%E6%96%87%E5%AD%97%E4%B9%9F%E6%98%AF%E9%BB%91%E8%89%B2%E7%9A%84%EF%BC%8C%E9%9A%BE%E7%9C%8B%7D

android:id="@+id/toolbar"

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:background="?attr/colorPrimary"

android:layout_height="wrap_content"

android:minHeight="?attr/actionBarSize">

获取toolbar并取代actionbar，这里设置toolbar的标题必须在setSupportActionBar之前，否则无用

//隐藏默认actionbar

ActionBar actionBar = getSupportActionBar();

if(actionBar != null){

actionBar.hide();

}

//获取toolbar

toolBar = findViewById(R.id.toolbar);

//主标题，必须在setSupportActionBar之前设置，否则无效，如果放在其他位置，则直接setTitle即可

toolBar.setTitle("ToolBar Title");

//用toolbar替换actionbar

setSupportActionBar(toolBar);

设置副标题

//副标题+颜色

toolBar.setSubtitle("Sub Title");

设置navigation up按钮的图标和点击监听

//左侧按钮：可见+更换图标+点击监听

getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示toolbar的返回按钮

//toolBar.setNavigationIcon(R.mipmap.back_white);

toolBar.setNavigationOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

finish();

}

});

设置logo

//设置logo

toolBar.setLogo(android.R.mipmap.sym_def_app_icon);

设置菜单menu及其监听

/**

* 复写：添加菜单布局

* */

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.menu, menu);

return true;

}

/**

* 复写：设置菜单监听

* */

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.action_refresh:

Toast.makeText(this, "Refresh selected", Toast.LENGTH_SHORT).show();

break;

case R.id.action_add:

Toast.makeText(this, "Add selected", Toast.LENGTH_SHORT).show();

break;

case R.id.action_settings:

Toast.makeText(this, "Settings selected", Toast.LENGTH_SHORT).show();

break;

default:

break;

}

return true;

}

加载自定义toolbar：直接在toolbar的layout中写即可，可以是文字居中等等

隐藏、显示toolbar

case R.id.btn_hide:

if(toolBar != null){

toolBar.setVisibility(View.GONE);

}

break;

case R.id.btn_show:

if(toolBar != null){

toolBar.setVisibility(View.VISIBLE);

}

break;

3、截图：颜色正常的

81d0bcb282cb

4、用ToolBar 的Theme和PopupTheme来控制颜色正常，或自定义颜色

4.1、ToolBar显然颜色不对，那找找为啥ActionBar的时候对的，直觉告诉我是theme的问题，于是找Theme.AppCompat.Light.DarkActionBar，点击进去看会看到

actionBarPopupThem是Light的，就是menu菜单点击弹出那个

actionBarTheme是深色系的，那么控制按钮图标和主副标题颜色就是白色的

@style/ThemeOverlay.AppCompat.Light

@null

@style/ThemeOverlay.AppCompat.Dark.ActionBar

@drawable/abc_list_selector_holo_dark

@color/primary_dark_material_dark

@color/primary_material_dark

4.2、新建Toolbar的theme和popuptheme：这里面就是继承刚刚找到的东西，当然也可以再自定义颜色咯

4.3、添加Toolbar的theme和popuptheme

//需添加

xmlns:app="http://schemas.android.com/apk/res-auto"

省略...

app:theme="@style/MyDarkToolBarTheme"

app:popupTheme="@style/MyLightPopupTheme">

大功告成

以上就是ActionBar和ToolBar的入门使用，后面配合上系统的StatusBar和NavigationBar，并实现沉浸式还有的烦，但这些都属于基础部分，得打牢UI基础。

weixin_39562185
关注
Android UI(ActionBar+Toolbar)详解
Andy_lau
08-14 2938
目录：     1.ActionBar与ToolBar概述     2.ActionBar与ToolBar的应用场景     3.ActionBar的隐藏         3.1 通过自定义Theme隐藏         3.2 通过系统Theme隐藏         3.3 通过Java代码隐藏     4.ToolBar的使用         4.1 自定义Theme中的一些常
Android学习笔记044之Actionbar和Toolbar
Huawen的博客
09-02 1511
这一篇我们介绍两个相似的控件，分别是Actionbar和Toolbar。Actionbar　　Actionbar是Android3.0之后的一个重要的交互元素，Actionbar位于Activity的顶部，用于显示图标、菜单、标题，广泛用于View的交互、导航等功能。在Android3.0之后，Actionbar是默认添加的，只要你新建的Activity继承于AppCompatActivity，Ac
Android学习之路(11) ActionBar与ToolBar的使用
最新发布
qq_32907491的博客
08-27 2447
那找找为啥ActionBar的时候对的，直觉告诉我是theme的问题，于是找Theme.AppCompat.Light.DarkActionBar，点击进去看会看到actionBarPopupThem是Light的，就是menu菜单点击弹出那个actionBarTheme是深色系的，那么控制按钮图标和主副标题颜色就是白色的
Android toolbar与actionbar区别
06-01 1864
Android toolbar与actionbar区别ActionBar 是android 3.0的推出的，当时Google 想要逐渐改善过去 android 纷乱的界面设计，希望让终端使用者尽可能在 android 手机有个一致的操作体验。ActionBar 过去最多人使用的两大套件就是 ActionBarSherlock 以及官方提供在 support library v 7 里的 AppCom
Android标题栏ActionBar与Toolbar
王廷浩的博客
04-03 980
ActionBar出现的几个坑，这里提前罗列出来： 1.使用getSupportActionBar时，继承的Activity要是AppCompatActivity。 这里说明一下Activity和AppCompatActivity的区别： ①AppCompatActivity默认带标题，但Activity不带； ②如果需要用兼容版的fragment，则需要继承support v4提...
Android中ActionBar和ToolBar添加返回箭头的实例代码
08-29
在Android应用开发中，`ActionBar`和`ToolBar`是两种常用的顶部导航组件，它们提供了展示应用标识、操作项以及提供返回功能的界面元素。本文将详细介绍如何在Android中为这两个组件添加返回箭头，并提供相应的实例...
android3.0工具栏,Android中的工具栏（ActionBar和ToolBar）
weixin_29410963的博客
05-25 636
ActionBar和ToolBarAction Bar是Android 3.0引入的导航栏功能，然而到5.0的时候，又推出了ToolBar，实际上这两个可以理解为同一个东西，ToolBar是对ActionBar的升级，使用起来也基本是一样的。只是因为ActionBar在实际使用过程中的各种问题，才推出了ToolBar来接替ActionBar。ActionBar通常翻译为操作栏，而到了ToolBar...
Android学习笔记四十四之Actionbar和Toolbar
u012426327的专栏
09-04 629
这一篇我们介绍两个相似的控件，分别是Actionbar和Toolbar。 Actionbar 　　Actionbar是Android3.0之后的一个重要的交互元素，Actionbar位于Activity的顶部，用于显示图标、菜单、标题，广泛用于View的交互、导航等功能。在Android3.0之后，Actionbar是默认添加的，只要你新建的Activity继承于AppCompatAc
一探ActionBar和ToolBar的区别
俊光的专栏
12-30 8488
ActionBar ActionBar是一个确定用户位置的窗口功能，并且能提供用户操作和导航的模块。使用ActionBar能够为用户提供一个熟悉的界面进行界面的切换，这个切换能够使系统更优雅是适应不同屏幕的配置。 ActionBar提供以下几个重要的功能： 提供一个专属的空间给你的应用，标志和显示用户在应用程序中的位置。 在可预测的方法中，让重要的操作更加突出和易操作（例如搜索）。 支
Android标题栏Toolba和ActionBar对比精炼详解
Chin_Style的博客
04-08 1394
一、前期基础知识储备上官方文档，A standard toolbar for use within application content.A Toolbar is a generalization of action bars for use within application layouts. While an action bar is traditionally part of an A...
ToolBar(ActionBar)
蔷薇_wendy的博客
04-28 340
ToolBar 是API21引入了为了替代系统自带的actionBar的控件，对于样式的设计更加灵活用ToolBar替代系统默认的actionbar 1.ToolBar的引入，在res/layout/tool_bar.xml新建文件 <android.support.v7.widget.Toolbar android:id="@+id/toolBar" xmlns:android=
ActionBar 和 Toolbar详解
amen的博客
03-23 1222
ActionBar 和 Toolbar 　　在Android 3.0中除了Fragment外，ActionBar也是一个重要的内容。ActionBar主要是用于代替传统的标题栏与Menu按钮： - 标题栏：使用ActionBar来做标题栏，可以展示更多丰富的内容，且方便操控。 - Menu按钮： - 在Android 3.0系统之前，Android手机有一个专门的M
Toolbar和ActionBar的小结
haizhuo的博客
04-30 605
前言 哼，Toolbar，有够厉害的。算google致力于简化开发，提供的封装好的控件。像这种封装好的自定义控件有很多,比如BottomNavigation、比如TextInputLayout等。贴个material design风格控件网址：Components，有兴趣的可以看看。 ActionBar 描述：活动中的主要工具栏，可以显示活动标题，应用程序级别的导航功能和其他交互式项。 诞生：是Google在Android 3.0（api 11）时代推出的。 Android 5.0之前 要使用Actio
Android学习——Toobar与ActionBar
Dev Blog
09-17 352
Toobar与ActionBar 从Android3.0(API level 11)开始，所有使用默认主题的activity都自带一个ActionBar，但是随着Android版本的迭代，ActionBar的特性不断增加，从而导致了在不同Android系统的设备上，ActionBar的显示不一致。 从Android5.0(API level 21)开始，引进了Toolbar，它包含了Actio...
Android使用Toolbar代替ActionBar
Tiger的专栏
04-11 328
1.通常需要配置三个styles.xml默认styles配置主题&lt;!-- Base application theme. 隐藏掉ActionBar即可--&gt; &lt;style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"&gt; &lt;!-- Customize your theme here. --...
android action bar 风格,Android ActionBar使用教程
weixin_32428571的博客
05-25 922
ActionBar的引入方式：有几种，从 Android 3.0(API lever 11) 开始，所有使用 Theme.Holo 主题(或者它的子类)的 Activity 都包含了 action bar，当 targetSdkVersion 或 minSdkVersion 属性被设置成 “11” 或更大时，它是默认主题。为了兼容Android3.0之前的低版本，actionbar通常通过exte...
Android AppBar样式设计☞ActionBar/Toolbar
weixin_33696106的博客
08-12 112
2019独角兽企业重金招聘Python工程师标准>>> ...
ActionBar详解和toolbar详解
追寻梦想
10-13 1396
转自：http://www.imooc.com/article/2844 ActionBar详解 一、Actionbar的使用用途 1． Actionbar的五大用途：可以使用图标做导航 2． 提供导航标签 3． 提供下拉列表导航 4． 为菜单添加动作视图 5． 为菜单添加Actionprovide 二、Actionbar的使用方法 1．如果不使用Actionba
Android 5.0深入探索：Toolbar的使用与定制
在Android 5.0中，Toolbar作为一个可自定义的视图组件，替代了传统的ActionBar，提供了更大的灵活性和设计自由度。在Android Studio 2.0环境下，使用V7 AppCompat库版本23.4.0，可以轻松地在项目中引入Toolbar。首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值