版权声明:本文为HaiyuKing原创文章,转载请注明出处!

前言

简单记录ToolBar作为导航栏的使用。关键点在于如何在dialogfragment中使用toolbar!

Toolbar的图标、标题设置:

效果图

参考使用方法的效果图。

代码分析

分为两部分:一部分是固定不变的部分(参考导入步骤);另外一部分是根据实际情况灵活改变的部分(参考使用方法);

使用步骤

一、项目组织结构图

注意事项:

1、  导入类文件后需要change包名以及重新import R文件路径

2、  Values目录下的文件(strings.xml、dimens.xml、colors.xml等),如果项目中存在,则复制里面的内容,不要整个覆盖

二、导入步骤

(1)引入appcompat support v7支持包【一般都会引入】

apply plugin: 'com.android.application'

android {
compileSdkVersion 27
defaultConfig {
applicationId "com.why.project.toolbardemo"
minSdkVersion 16
targetSdkVersion 27
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
} dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

(2)修改styles.xml文件中的AppTheme

<resources>

    <!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style> </resources>

(3)将nav_toolbar_base.xml复制到项目中

<?xml version="1.0" encoding="utf-8"?>
<!-- 基础的toolbar(代码控制标题、图标显示) -->
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar_base"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_height"
android:minHeight="@dimen/nav_height"
android:background="@color/nav_bg"
app:navigationIcon="@drawable/nav_back"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:titleTextAppearance="@style/nav_toolbar_title_style"
app:theme="@style/nav_toolbar_menu_style"
app:popupTheme="@style/nav_toolbar_popup_style"
>
<TextView
android:id="@+id/toolbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="@color/nav_text_color"
android:textSize="@dimen/nav_title_text_size"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>

nav_toolbar_base.xml

(4) 将nav_back.png复制到项目中

(5)在colors.xml中添加以下代码

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color> <!-- toolbar背景色 -->
<color name="nav_bg">#ffffff</color>
<!-- toolbar标题颜色 -->
<color name="nav_text_color">#434343</color>
<!-- toolbar的menu文本颜色 -->
<color name="nav_menu_text_color">#3090d9</color>
<!-- toolbar的popup背景色 -->
<color name="nav_popup_bg_color">#ffffff</color>
<!-- toolbar的popup文本颜色 -->
<color name="nav_popup_text_color">#818181</color>
</resources>

(6)在dimens.xml中添加以下代码

<?xml version="1.0" encoding="utf-8"?>
<resources> <!-- toolbar高度 -->
<dimen name="nav_height">56dp</dimen>
<!-- toolbar标题文字大小 -->
<dimen name="nav_title_text_size">18sp</dimen>
<!-- toolbar的Menu文字大小 -->
<dimen name="nav_menu_text_size">14sp</dimen>
<!-- toolbar的popup文字大小 -->
<dimen name="nav_popup_text_size">16sp</dimen> </resources>

(7)在styles.xml中添加以下代码

<resources>

    <!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<!-- 添加这一句, 即可改变toolbar右侧更多图标的颜色-->
<item name="android:textColorSecondary">@color/nav_menu_text_color</item>
</style> <!-- toolbar标题的颜色和大小值设置 -->
<style name="nav_toolbar_title_style">
<item name="android:textColor">@color/nav_text_color</item>
<item name="android:textSize">@dimen/nav_title_text_size</item>
</style>
<!-- toolbar的menu(非popup样式)的颜色和大小值设置 -->
<style name="nav_toolbar_menu_style">
<item name="android:actionMenuTextColor">@color/nav_menu_text_color</item>
<item name="android:textSize">@dimen/nav_menu_text_size</item>
</style> <!-- toolbar弹出的popup菜单的颜色和大小值设置 -->
<style name="nav_toolbar_popup_style">
<item name="android:colorBackground">@color/nav_popup_bg_color</item>
<item name="android:textColor">@color/nav_popup_text_color</item>
<item name="android:textSize">@dimen/nav_popup_text_size</item>
<!--将overlapAnchor属性设置成false就可以在toolbar下方显示-->
<item name="overlapAnchor">false</item>
</style>
</resources>

至此,toolbar的基础代码添加到项目中了,后续根据想要显示的效果添加图片资源和menu文件。

三、使用方法

(1)在activity布局文件中引用nav_toolbar_base.xml【下面所有activity的布局文件都是这个】

activity_toolbar_normal.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#F4F4F4"> <include layout="@layout/nav_toolbar_base"/> </LinearLayout>

(2)无右侧菜单项图标样式

1、将nav_notifications.png复制到项目中【因为换了个图标,所以需要添加新图标】

2、在Activity中这样写【注意:initToolBar()方法里面的代码可以根据实际情况拆分开,比如想要根据传过来的参数动态更改标题、隐藏menu菜单项等】

package com.why.project.toolbardemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.TextView; /**
* Created by HaiyuKing
* Used 无右侧菜单项样式
*/ public class ToolBarNoMenuActivity extends AppCompatActivity {
private Toolbar mToolbar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar_normal); initToolBar();//初始化toolbar
} private void initToolBar() {
mToolbar = findViewById(R.id.toolbar_base);
mToolbar.setTitle("");//这样设置的话,自带的标题就不会显示
//设置自定义的标题(居中)
TextView toolBarTitle = mToolbar.findViewById(R.id.toolbarTitle);
toolBarTitle.setText("首页");
setSupportActionBar(mToolbar);//由于toolbar只是一个普通控件,我们将ToolBar设置为ActionBar
//设置导航图标要在setSupportActionBar方法之后
mToolbar.setNavigationIcon(R.drawable.nav_notifications);//设置为空的话,就会不显示左侧的图标
//对NavigationIcon添加点击
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
}

效果图

(3)左图左标题右图样式

1、将nav_ok.png复制到项目中【因为需要用到menu菜单项,所以需要添加新图标】

2、在res/menu目录中添加toolbar_one_menu.xml文件

<?xml version="1.0" encoding="utf-8"?>
<!-- 基础的toolbar(右侧只有一个图标的样式) -->
<!--app:showAsAction="ifRoom/never/always",ifRoom表示只要在app bar存在可用空间,就可以显示,never表示一直显示在溢出菜单(overflowwindow)里面 -->
<!--always:始终把这个放到项目中app bar。但是谷歌建议避免这么使用,除非它非常关键,使它始终显示在操作栏。设置多个始终显示在app bar可能会导致它们在应用栏其他UI重叠。-->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_save"
android:icon="@drawable/nav_ok"
android:title="保存"
app:showAsAction="always" /> </menu>

3、在Activity中这样写【注意:initToolBar()方法里面的代码可以根据实际情况拆分开,比如想要根据传过来的参数动态更改标题、隐藏menu菜单项等】

package com.why.project.toolbardemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast; /**
* Created by HaiyuKing
* Used 左图左标题右图样式
*/ public class ToolBarTitleLeftActivity extends AppCompatActivity {
private Toolbar mToolbar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar_normal); initToolBar();//初始化toolbar
} private void initToolBar() {
mToolbar = findViewById(R.id.toolbar_base);
mToolbar.setTitle("标题");//这样设置的话,自带的标题就不会显示
//设置自定义的标题(居中)
TextView toolBarTitle = mToolbar.findViewById(R.id.toolbarTitle);
toolBarTitle.setText("");
setSupportActionBar(mToolbar);//由于toolbar只是一个普通控件,我们将ToolBar设置为ActionBar
//设置导航图标要在setSupportActionBar方法之后
//mToolbar.setNavigationIcon(null);//设置为空的话,就会不显示左侧的图标
//对NavigationIcon添加点击
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
}); //添加menu 菜单点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_save:
Toast.makeText(ToolBarTitleLeftActivity.this,"保存",Toast.LENGTH_SHORT).show();
break;
}
return true;
}
}); } @Override
public boolean onCreatePanelMenu(int featureId, Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_one_menu, menu);//toolbar添加menu菜单
return true;
}
}

效果图

(4)左图中标题右图样式

跟《(3)左图左标题右图样式》的使用相同的nav_ok.png图标和toolbar_one_menu.xml文件

不同的是activity的写法不一样:【注意:initToolBar()方法里面的代码可以根据实际情况拆分开,比如想要根据传过来的参数动态更改标题、隐藏menu菜单项等】

package com.why.project.toolbardemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast; /**
* Created by HaiyuKing
* Used 左图中标题右图样式
*/ public class ToolBarTitleCenterActivity extends AppCompatActivity {
private Toolbar mToolbar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar_normal); initToolBar();//初始化toolbar
} private void initToolBar() {
mToolbar = findViewById(R.id.toolbar_base);
mToolbar.setTitle("");//这样设置的话,自带的标题就不会显示
//设置自定义的标题(居中)
TextView toolBarTitle = mToolbar.findViewById(R.id.toolbarTitle);
toolBarTitle.setText("标题");
setSupportActionBar(mToolbar);//由于toolbar只是一个普通控件,我们将ToolBar设置为ActionBar
//设置导航图标要在setSupportActionBar方法之后
//mToolbar.setNavigationIcon(null);//设置为空的话,就会不显示左侧的图标
//对NavigationIcon添加点击
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
}); //添加menu 菜单点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_save:
Toast.makeText(ToolBarTitleCenterActivity.this,"保存",Toast.LENGTH_SHORT).show();
break;
}
return true;
}
}); } @Override
public boolean onCreatePanelMenu(int featureId, Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_one_menu, menu);//toolbar添加menu菜单
return true;
}
}

效果图

(5)无左侧图标布局

1、将nav_close.png复制到项目中【因为为了和上面的有所区别,所以需要添加新图标】

2、跟《(3)左图左标题右图样式》的使用相同的nav_ok.png图标和toolbar_one_menu.xml文件

3、在Activity中这样写【注意:initToolBar()方法里面的代码可以根据实际情况拆分开,比如想要根据传过来的参数动态更改标题、隐藏menu菜单项等】

package com.why.project.toolbardemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView; /**
* Created by HaiyuKing
* Used 无左侧图标布局
*/ public class ToolBarNoNavigationiconActivity extends AppCompatActivity { private Toolbar mToolbar;
private MenuItem menuItem; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar_normal); initToolBar();//初始化toolbar
} private void initToolBar() {
mToolbar = findViewById(R.id.toolbar_base);
mToolbar.setTitle("");//这样设置的话,自带的标题就不会显示
//设置自定义的标题(居中)
TextView toolBarTitle = mToolbar.findViewById(R.id.toolbarTitle);
toolBarTitle.setText("筛选");
setSupportActionBar(mToolbar);//由于toolbar只是一个普通控件,我们将ToolBar设置为ActionBar
//设置导航图标要在setSupportActionBar方法之后
mToolbar.setNavigationIcon(null);//设置为空的话,就会不显示左侧的图标
//对NavigationIcon添加点击
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) { }
}); //添加menu 菜单点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_save:
finish();
break;
}
return true;
}
}); } @Override
public boolean onCreatePanelMenu(int featureId, Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_one_menu, menu);//toolbar添加menu菜单
menuItem = menu.findItem(R.id.action_save);
menuItem.setIcon(R.drawable.nav_close);//动态修改menu的图标
return true;
}
}

效果图

(6)菜单项中含有文本的布局

1、在res/menu目录中添加toolbar_three_menu.xml文件【因为含有三个菜单项,所以需要使用新的menu文件】

<?xml version="1.0" encoding="utf-8"?>
<!-- 基础的toolbar的menu -->
<!--app:showAsAction="ifRoom/never/always",ifRoom表示只要在app bar存在可用空间,就可以显示,never表示一直显示在溢出菜单(overflowwindow)里面 -->
<!--always:始终把这个放到项目中app bar。但是谷歌建议避免这么使用,除非它非常关键,使它始终显示在操作栏。设置多个始终显示在app bar可能会导致它们在应用栏其他UI重叠。-->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_undo"
android:title="撤销"
app:showAsAction="always" /> <item
android:id="@+id/action_redo"
android:title="重做"
app:showAsAction="always" /> <item
android:id="@+id/action_save"
android:icon="@drawable/nav_ok"
android:title="保存"
app:showAsAction="always" /> </menu>

2、在Activity中这样写【注意:initToolBar()方法里面的代码可以根据实际情况拆分开,比如想要根据传过来的参数动态更改标题、隐藏menu菜单项等】

package com.why.project.toolbardemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast; /**
* Created by HaiyuKing
* Used 菜单项中含有文本的布局展现
*/ public class ToolBarMenuTextActivity extends AppCompatActivity { private Toolbar mToolbar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar_normal); initToolBar();//初始化toolbar
} private void initToolBar() {
mToolbar = findViewById(R.id.toolbar_base);
mToolbar.setTitle("");//这样设置的话,自带的标题就不会显示
//设置自定义的标题(居中)
TextView toolBarTitle = mToolbar.findViewById(R.id.toolbarTitle);
toolBarTitle.setText("编辑");
setSupportActionBar(mToolbar);//由于toolbar只是一个普通控件,我们将ToolBar设置为ActionBar
//设置导航图标要在setSupportActionBar方法之后
//mToolbar.setNavigationIcon(null);//设置为空的话,就会不显示左侧的图标
//对NavigationIcon添加点击
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//添加menu 菜单点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_undo:
Toast.makeText(ToolBarMenuTextActivity.this,"撤销",Toast.LENGTH_SHORT).show();
break;
case R.id.action_redo:
Toast.makeText(ToolBarMenuTextActivity.this,"重做",Toast.LENGTH_SHORT).show();
break;
case R.id.action_save:
Toast.makeText(ToolBarMenuTextActivity.this,"保存",Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
} @Override
public boolean onCreatePanelMenu(int featureId, Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_three_menu, menu);//toolbar添加menu菜单
return true;
}
}

效果图

(7)溢出菜单(popup)的样式

1、将nav_menu_fabu.png、nav_menu_share.png复制到项目中【因为使用到新的menu菜单项了,所以需要添加图片资源】

  

2、在res/menu目录中添加toolbar_popup_menu.xml文件【因为属性有所变化,所以需要使用新的menu文件】

<?xml version="1.0" encoding="utf-8"?>
<!-- 基础的toolbar的menu -->
<!--app:showAsAction="ifRoom/never/always",ifRoom表示只要在app bar存在可用空间,就可以显示,never表示一直显示在溢出菜单(overflowwindow)里面 -->
<!--always:始终把这个放到项目中app bar。但是谷歌建议避免这么使用,除非它非常关键,使它始终显示在操作栏。设置多个始终显示在app bar可能会导致它们在应用栏其他UI重叠。-->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_edit"
android:title="编辑"
app:showAsAction="always" /> <item
android:id="@+id/action_share"
android:icon="@drawable/nav_menu_share"
android:title="分享"
app:showAsAction="never" /> <item
android:id="@+id/action_publish"
android:icon="@drawable/nav_menu_fabu"
android:title="发布"
app:showAsAction="never" /> </menu>

3、在Activity中这样写【注意:initToolBar()方法里面的代码可以根据实际情况拆分开,比如想要根据传过来的参数动态更改标题、隐藏menu菜单项等】

package com.why.project.toolbardemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast; /**
* Created by HaiyuKing
* Used 溢出菜单(popup)的样式
*/ public class ToolBarPopupMenuActivity extends AppCompatActivity {
private Toolbar mToolbar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar_normal); initToolBar();//初始化toolbar
} private void initToolBar() {
mToolbar = findViewById(R.id.toolbar_base);
mToolbar.setTitle("");//这样设置的话,自带的标题就不会显示
//设置自定义的标题(居中)
TextView toolBarTitle = mToolbar.findViewById(R.id.toolbarTitle);
toolBarTitle.setText("预览");
setSupportActionBar(mToolbar);//由于toolbar只是一个普通控件,我们将ToolBar设置为ActionBar
//设置导航图标要在setSupportActionBar方法之后
//mToolbar.setNavigationIcon(null);//设置为空的话,就会不显示左侧的图标
//对NavigationIcon添加点击
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
}); //添加menu 菜单点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_edit:
Toast.makeText(ToolBarPopupMenuActivity.this,"编辑",Toast.LENGTH_SHORT).show();
break;
case R.id.action_share:
Toast.makeText(ToolBarPopupMenuActivity.this,"分享",Toast.LENGTH_SHORT).show();
break;
case R.id.action_publish:
Toast.makeText(ToolBarPopupMenuActivity.this,"发布",Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
} @Override
public boolean onCreatePanelMenu(int featureId, Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_popup_menu, menu);//toolbar添加menu菜单
return true;
}
}

效果图

(8)对话框中使用toolbar

1、新建自定义的dialogfragment文件,比如HasToolbarDialog【注意,黄色标记的代码】【布局文件共用已有的xml文件】

package com.why.project.toolbardemo.dialog;

import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.support.v7.widget.Toolbar;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;
import android.widget.Toast; import com.why.project.toolbardemo.R; /**
* Created by HaiyuKing
* Used 演示如何使用toolbar的对话框界面
*/ public class HasToolbarDialog extends DialogFragment{
private static final String TAG = HasToolbarDialog.class.getSimpleName(); public static final String TAG_FULLSCREEN = "fullScreen";//全屏
public static final String TAG_BELOWSTATUEBAR = "belowStatusBar";//状态栏下方 /**View实例*/
private View myView;
/**context实例*/
private Context mContext;
/**标记:用来代表是从哪个界面打开的这个对话框*/
private String mTag; private Toolbar mToolbar; public static HasToolbarDialog getInstance(Context mContext, Bundle bundle)
{
HasToolbarDialog dialog = new HasToolbarDialog();
dialog.mContext = mContext;
return dialog;
} @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//android.R.style.Theme_Material_NoActionBar_Fullscreen这个样式好看
//Display fullscreen without actionbar
//http://www.itgo.me/a/7477281837685192473/how-to-make-material-design-full-screen-dialog
//解决在4.2.2设备上打开崩溃的问题
if(Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP && Build.VERSION.SDK_INT > Build.VERSION_CODES.JELLY_BEAN_MR1) {
setStyle(DialogFragment.STYLE_NORMAL, android.R.style.Theme_Material_Light_NoActionBar_Fullscreen);//全屏(在状态栏底下)
} else {
setStyle(DialogFragment.STYLE_NORMAL, android.R.style.Theme_Holo_Light_NoActionBar_Fullscreen);
}
} @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(0));//设置背景为透明,并且没有标题
getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题栏
//设置窗体全屏
getDialog().getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); myView = inflater.inflate(R.layout.activity_toolbar_normal, container, false);
/*this.getDialog().setOnKeyListener(new DialogInterface.OnKeyListener()
{
public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event){
if (keyCode == KeyEvent.KEYCODE_BACK) {
LogUtil.w(TAG, "onKey");
dismiss();
return true; // return true是中断事件,那么下面的就接受不到按键信息了
}else
{
return false; //在return false的时候 才会事件继续向下传递。
}
}
});*/
return myView;
} @Override
public void onActivityCreated(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onActivityCreated(savedInstanceState); initToolBar();//初始化toolbar //初始化控件以及设置
initView();
//初始化数据
initDatas();
initEvents();
} /**
* 设置宽度和高度值,以及打开的动画效果
*/
@Override
public void onStart() {
super.onStart(); if(mTag.equals(TAG_FULLSCREEN)){//全屏显示
//设置对话框的宽高,必须在onStart中
Window window = this.getDialog().getWindow();
window.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);//全屏(盖住状态栏)
window.setGravity(Gravity.BOTTOM);//设置在底部
//打开的动画效果
}else{
//从我的场景列表界面中设置按钮打开的
//设置对话框的宽高,必须在onStart中
DisplayMetrics metrics = new DisplayMetrics();
this.getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
Window window = this.getDialog().getWindow();
if(getStatusBarHeight(mContext) <= 96){
window.setLayout(metrics.widthPixels, metrics.heightPixels - getStatusBarHeight(mContext));
}else{
window.setLayout(metrics.widthPixels, this.getDialog().getWindow().getAttributes().height);//适配红米6pro刘海屏
}
window.setGravity(Gravity.BOTTOM);//设置在底部
//打开的动画效果
}
} /**获取状态栏的高度*/
private int getStatusBarHeight(Context context) {
int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
return context.getResources().getDimensionPixelSize(resourceId);
}
@Override
public void onDestroy()
{
super.onDestroy();
} private void initToolBar() {
mToolbar = myView.findViewById(R.id.toolbar_base);
mToolbar.setTitle("");//这样设置的话,自带的标题就不会显示
//设置自定义的标题(居中)
TextView toolBarTitle = mToolbar.findViewById(R.id.toolbarTitle);
toolBarTitle.setText("对话框标题");
//setSupportActionBar(mToolbar);//由于toolbar只是一个普通控件,我们将ToolBar设置为ActionBar【dialogFragment中去掉】
//设置导航图标要在setSupportActionBar方法之后
mToolbar.setNavigationIcon(R.drawable.nav_back);//设置为空的话,就会不显示左侧的图标
//对NavigationIcon添加点击
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//关闭对话框,返回null
dismiss();
}
}); //添加menu 菜单点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_edit:
Toast.makeText(mContext,"编辑",Toast.LENGTH_SHORT).show();
break;
case R.id.action_share:
Toast.makeText(mContext,"分享",Toast.LENGTH_SHORT).show();
break;
case R.id.action_publish:
Toast.makeText(mContext,"发布",Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
//https://stackoverflow.com/questions/27608399/toolbar-in-dialogfragment
// Inflate a menu to be displayed in the toolbar
mToolbar.inflateMenu(R.menu.toolbar_popup_menu);
} /**实例化控件*/
private void initView() { }
/**
* 初始化数据:tag标记、标题
*/
private void initDatas() {
mTag = this.getTag();
} /**
* 初始化监听事件
*/
private void initEvents() { }
}

2、在Activity中打开对话框

package com.why.project.toolbardemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView; import com.why.project.toolbardemo.dialog.HasToolbarDialog; /**
* Created by HaiyuKing
* Used 在对话框中使用toolbar
*/ public class ToolBarDialogActivity extends AppCompatActivity {
private Toolbar mToolbar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar_normal);
initToolBar();//初始化toolbar
} private void initToolBar() {
mToolbar = findViewById(R.id.toolbar_base);
mToolbar.setTitle("");//这样设置的话,自带的标题就不会显示
//设置自定义的标题(居中)
TextView toolBarTitle = mToolbar.findViewById(R.id.toolbarTitle);
toolBarTitle.setText("点击右侧图标打开一个对话框");
setSupportActionBar(mToolbar);//由于toolbar只是一个普通控件,我们将ToolBar设置为ActionBar
//设置导航图标要在setSupportActionBar方法之后
//mToolbar.setNavigationIcon(null);//设置为空的话,就会不显示左侧的图标
//对NavigationIcon添加点击
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
}); //添加menu 菜单点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_save:
Bundle bundle = new Bundle();
HasToolbarDialog dialog = HasToolbarDialog.getInstance(ToolBarDialogActivity.this,bundle);
dialog.show(getSupportFragmentManager(),HasToolbarDialog.TAG_BELOWSTATUEBAR);
break;
}
return true;
}
}); } @Override
public boolean onCreatePanelMenu(int featureId, Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_one_menu, menu);//toolbar添加menu菜单
return true;
}
}

效果图

Activity界面

对话框界面

(9)动态更新Menu的图标和文本

1、在Activity中使用【注意黄色标记的代码,属于动态更新Menu的核心代码】

package com.why.project.toolbardemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView; /**
* Created by HaiyuKing
* Used 动态更新Menu
*/
public class ToolBarMenuUpdateActivity extends AppCompatActivity { private Toolbar mToolbar; private boolean showOk = false;//切换图标的状态值,至于默认值是true还是false,根据项目情况而定 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar_normal); initToolBar();//初始化toolbar
} private void initToolBar() {
mToolbar = findViewById(R.id.toolbar_base);
mToolbar.setTitle("");//这样设置的话,自带的标题就不会显示
//设置自定义的标题(居中)
TextView toolBarTitle = mToolbar.findViewById(R.id.toolbarTitle);
toolBarTitle.setText("动态更新Menu");
setSupportActionBar(mToolbar);//由于toolbar只是一个普通控件,我们将ToolBar设置为ActionBar
//设置导航图标要在setSupportActionBar方法之后
//mToolbar.setNavigationIcon(null);//设置为空的话,就会不显示左侧的图标
//对NavigationIcon添加点击
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//添加menu 菜单点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_save:
showOrHiddenUpdatedMenu(); //动态更新Menu
break;
}
return true;
}
});
} @Override
public boolean onCreatePanelMenu(int featureId, Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_one_menu, menu);//toolbar添加menu菜单
return true;
} @Override
public boolean onPrepareOptionsMenu(Menu menu) {
if (! showOk) {
menu.findItem(R.id.action_save).setIcon(R.drawable.nav_menu_fabu);//更新android:icon值
menu.findItem(R.id.action_save).setTitle("发布");//更新android:title值
} else {
menu.findItem(R.id.action_save).setIcon(R.drawable.nav_ok);//更新android:icon值
menu.findItem(R.id.action_save).setTitle("保存");//更新android:title值
}
return super.onPrepareOptionsMenu(menu);
} //动态更新Menu
private void showOrHiddenUpdatedMenu(){
if(! showOk){
showOk = true;
invalidateOptionsMenu(); //重新绘制menu
}else{
showOk = false;
invalidateOptionsMenu(); //重新绘制menu
}
}
}

onCreateOptionsMenu方法只在创建Activity的时候调用一次,以后就不再调用了,所以就不能在onCreateOptionsMenu中做处理了。
不过系统提供了另外的一个方法onPrepareOptionsMenu,我们可以在这个方法中做一些逻辑处理,然后在需要更新Menu的地方调用invalidateOptionsMenu()方法。

效果图

混淆配置

参考资料

《第一行代码(第2版)》

PhotoPicker

Android ToolBar 简单实用

Toolbar的使用详解

Android Toolbar样式定制详解

动态更新Toolbar Menu以及Menu中同时显示文字和图标

项目demo下载地址

https://github.com/haiyuKing/ToolbarDemo

ToolbarDemo【Toolbar作为顶部导航栏的简单使用】的更多相关文章

  1. android开发(49) android 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏

    概述 在很app上都见过 可折叠的顶部导航栏效果.google support v7  提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下:    实现步骤 1. 写 ...

  2. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  3. 分别用ToolBar和自定义导航栏实现沉浸式状态栏

    一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...

  4. 使用PagerSlidingTabStrip实现顶部导航栏

    使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏. 效果图如下:          PagerSlidingTabStrip是github上的一个开源项目,项目地址如下 ...

  5. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

  6. 【React -- 9/100】 抽离顶部导航栏 - [组件复用]

    今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...

  7. 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发

    路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...

  8. uni-app 去除顶部导航栏

    自学uni-app第一天,因为有一点点的小程序和vue的基础所以感觉对uni-app有一点点的亲切感,从今天呢开始着手从登录页学习uni-app,记录一些用到的知识点,欢迎大家一起学习. 启动页隐藏顶 ...

  9. Vant 顶部导航栏【van-tabs】Bug

    Vant 顶部导航栏[van-tabs]Bug 如果在外面包裹div控制显示隐藏会出现导航条不准确的bug 代码 <div class="selWrap" v-show=&q ...

随机推荐

  1. VMware12安装虚拟机教程、Ubuntu16.04安装教程(包括vmware tools的安装)

    转自https://jingyan.baidu.com/article/c275f6ba07e269e33d756714.html 方法/步骤 1 虚拟机.Linux操作系统介绍及下载地址 虚拟机VM ...

  2. 【cogs 775】山海经 ——Segment Tree

    题目链接:      TP 题解:   我数据结构真心是弱啊= =. 线段树好厉害啊,一直不会区间最大连续和,今天刚学习了一下233. 维护前缀最大和后缀最大,越界最大(?),再维护一个区间最大,瞎搞 ...

  3. 【codeforces 516B】Drazil and Tiles

    题目链接: http://codeforces.com/problemset/problem/516/B 题解: 首先可以得到一个以‘.’为点的无向图,当存在一个点没有边时,无解.然后如果这个图边双联 ...

  4. Postman----Newman的使用

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #fffff ...

  5. window 7 安装Jmeter并配置https录制脚本

    安装与环境配置: http://blog.csdn.net/hhuangdanfeng/article/details/51564765 http://blog.csdn.net/u010573212 ...

  6. Universal-Image-Loader源码解解析---display过程 + 获取bitmap过程

    Universal-Image-Loader在github上的地址:https://github.com/nostra13/Android-Universal-Image-Loader 它的基本使用请 ...

  7. 蚂蚁通讯框架SOFABolt之私有通讯协议设计

    前言 SOFABolt 是蚂蚁金融服务集团开发的一套基于 Netty 实现的网络通信框架. 为了让 Java 程序员能将更多的精力放在基于网络通信的业务逻辑实现上,而不是过多的纠结于网络底层 NIO ...

  8. window.history.back(-1);与window.go(-1);的区别

    history.back(-1):直接返回当前页的上一页,数据全部消息,是个新页面 history.go(-1):也是返回当前页的上一页,不过表单里的数据全部还在 history.back(1) 前进 ...

  9. Airtest 快速上手教程

    一.Airtest 简介: AirtestIDE 是一个跨平台的UI自动化测试编辑器,适用于游戏和App. 自动化脚本录制.一键回放.报告查看,轻而易举实现自动化测试流程 支持基于图像识别的 Airt ...

  10. 结合JDK源码看设计模式——桥接模式

    前言: 在我们还没学习框架之前,肯定都学过JDBC.百度百科对JDBC是这样介绍的[JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Jav ...