AndroidStudio自定义顶部导航栏----API29下ActionBar和ToolBar的基本实现
作者：互联网
基于AndroidStudio自定义顶部菜单栏----ActionBar和ToolBar的基本实现
自定义ActionBar
ActionBar是一个确定用户位置的窗口功能，并且能提供用户操作和导航的模块。使用ActionBar能够为用户提供一个熟悉的界面进行界面的切换，这个切换能够使系统更优雅是适应不同屏幕的配置。
ActionBar可以自定义以下几种元素，实现不同风格
- 设置返回键
- 设置标题
- 自定义搜索框
- 自定义菜单（图标及文字形式的菜单）
我在项目中封装了7种ActionBar，可以适应不同的需求
（1）去掉系统自带的ActionBar，在values/styles.xml中修改style为：
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
- 可以根据喜好更改颜色（参数如下）
<!--状态栏颜色-->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!--控制各个控件被选中时的颜色-->
<item name="colorAccent">@color/colorAccent</item>
<!--页面背景色-->
<item name="android:windowBackground">@color/windowBackg</item>
<!--底部导航栏颜色-->
<item name="android:navigationBarColor">@color/navigationColor</item>
<!--Appbar背景色-->
<item name="android:colorPrimary">@color/colorPrimary</item>
<!--ToolBar上的Title颜色-->
<item name="android:textColorPrimary">@color/textColorPrimary</item>
<!--各个控制控件的默认颜色-->
<item name="android:colorControlNormal">@color/colorControlNormal</item>
（2）为自定义的ActionBar定义布局（customactionbar.xml）
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00BFFF">
<ImageView
android:id="@+id/header_back"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:padding="4dp"
android:src="@mipmap/ic_arrow_back" />
<LinearLayout
android:id="@+id/linear_header_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<TextView
android:id="@+id/header_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/search"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="@drawable/edittext_bg_shape"
android:layout_margin="3dp"
android:layout_centerInParent="true"
android:padding="5dp"
android:visibility="gone">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:hint="search"
android:layout_centerInParent="true"
android:padding="3dp"
android:textColor="#fff"
android:textSize="13sp" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:padding="12dp">
<TextView
android:id="@+id/header_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#fff"/>
</RelativeLayout>
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
（3）在activity_main.xml中定义所有actionbar的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.actionbar.customactionbar.MainActivity">
<com.example.actionbar.customactionbar.CustomActionBar
android:id="@+id/actionbar_0"
android:layout_width="match_parent"
android:layout_height="45dp"/>
<com.example.actionbar.customactionbar.CustomActionBar
android:id="@+id/actionbar_1"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="20dp"/>
<com.example.actionbar.customactionbar.CustomActionBar
android:id="@+id/actionbar_2"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="20dp"/>
<com.example.actionbar.customactionbar.CustomActionBar
android:id="@+id/actionbar_3"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="20dp"/>
<com.example.actionbar.customactionbar.CustomActionBar
android:id="@+id/actionbar_4"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="20dp"/>
<com.example.actionbar.customactionbar.CustomActionBar
android:id="@+id/actionbar_5"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="20dp"/>
<com.example.actionbar.customactionbar.CustomActionBar
android:id="@+id/actionbar_6"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="20dp"/>
</LinearLayout>
（4）定义CustomActionBar类，封装了ActionBar的各种函数
public class CustomActionBar extends LinearLayout {
private ImageView headerBack;
private TextView headerTitle, headerMenuText;
private LinearLayout Search;
private LayoutInflater mInflater;
private View headView;
public CustomActionBar(Context context) {
super(context);
init(context);
}
public CustomActionBar(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public void init(Context context) {
mInflater = LayoutInflater.from(context);
headView = mInflater.inflate(R.layout.customactionbar, null);
addView(headView);
initView();
}
private void initView() {
headerBack = headView.findViewById(R.id.header_back);
headerTitle = headView.findViewById(R.id.header_title);
headerMenuText = headView.findViewById(R.id.header_menu);
Search = headView.findViewById(R.id.search);
headerBack.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
((Activity) getContext()).finish();
}
});
}
public void setStyle(String title) {
if (title != null)
headerTitle.setText(title);
}
/**
* 标题加文字菜单
*
* @param title
* @param menuText
* @param listener
*/
public void setStyle(String title, String menuText, OnClickListener listener) {
setStyle(title);
if (menuText != null)
headerMenuText.setText(menuText);
headerMenuText.setOnClickListener(listener);
}
/**
* 只有右边字体
*
* @param menuText
* @param listener
*/
public void setStyle(String menuText, OnClickListener listener) {
headerBack.setVisibility(GONE);
if (menuText != null)
headerMenuText.setText(menuText);
headerMenuText.setOnClickListener(listener);
}
/**
* 标题加图标菜单
*
* @param title
* @param menuImgResource
* @param listener
*/
public void setStyle(String title, int menuImgResource, OnClickListener listener) {
setStyle(title);
headerMenuText.setBackgroundResource(menuImgResource);
headerMenuText.setOnClickListener(listener);
}
public void setStyle(boolean hasSearch){
if(hasSearch){
Search.setVisibility(VISIBLE);
}
}
/**
* 将默认的返回按钮功能去掉
*/
public void setStyleNoBack(String title) {
setStyle(title);
headerBack.setVisibility(GONE);
}
}
（5）在MainActivity类中实现各种ActionBar
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
CustomActionBar actionBar0 = findViewById(R.id.actionbar_0);
CustomActionBar actionBar1 = findViewById(R.id.actionbar_1);
CustomActionBar actionBar2 = findViewById(R.id.actionbar_2);
CustomActionBar actionBar3 = findViewById(R.id.actionbar_3);
CustomActionBar actionBar4 = findViewById(R.id.actionbar_4);
CustomActionBar actionBar5 = findViewById(R.id.actionbar_5);
CustomActionBar actionBar6 = findViewById(R.id.actionbar_6);
//actionbar0默认只有返回键
//只有标题
actionBar1.setStyleNoBack("标题");
//只有菜单
actionBar2.setStyle("菜单", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(),"您点击了菜单",Toast.LENGTH_SHORT).show();
}
});
//返回键 + 标题
actionBar3.setStyle("标题");
//返回键 + 标题 + 菜单
actionBar4.setStyle("标题", "菜单", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(),"您点击了菜单",Toast.LENGTH_SHORT).show();
}
});
//返回键 + 标题 + 菜单图标
actionBar5.setStyle("标题", R.mipmap.more_white, new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(),"您点击了菜单",Toast.LENGTH_SHORT).show();
}
});
//搜索框模式
actionBar6.setStyle(true);
}
}
- 搜索框格式实现：在drawable中创建相应的格式文件，定义如下
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="25dp" />
<solid android:color="#F3F3F3" />
</shape>
效果图
自定义ToolBar
Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件。由于他的可定制度高，所以已经逐步替代掉了ActionBar。实际上这两个可以理解为同一个东西，ToolBar是对ActionBar的升级，使用起来也基本是一样的。
ToolBar可自定义以下几种元素，以适应不同的需求
- 设置导航栏图标
- 设置logo
- 设置标题与子标题
- 设置菜单（文字及图标菜单）
- 可自定义添加一至多个控件
（1）编写activity_main.xml文件，定义工具栏的布局
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#FFFFFF"
app:popupTheme="@style/Theme.Toolbar.base.MenuItem">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Clock"/>
</Toolbar>
</FrameLayout>
（2）创建自定义的菜单（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/menu_search"
android:icon="@mipmap/ic_search"
android:title="@string/menu_search"
android:showAsAction="ifRoom|withText" />
<item
android:id="@+id/menu_notification"
android:icon="@mipmap/ic_clock"
android:title="@string/menu_notification"
android:showAsAction="ifRoom|withText" />
<item
android:id="@+id/menu_close"
android:title="@string/menu_close"
app:showAsAction="never"/>
<item
android:id="@+id/menu_about"
android:title="@string/menu_about"
app:showAsAction="never"/>
</menu>
（3）在MainActivity中具体实现工具栏
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//去掉自带的ActionBar
// supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvents();
}
private void initEvents() {
//设置menu监听器
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
int menuItemId = item.getItemId();
switch (menuItemId) {
case R.id.menu_close:
Toast.makeText(MainActivity.this, R.string.menu_close, Toast.LENGTH_SHORT).show();
break;
case R.id.menu_about:
Toast.makeText(MainActivity.this, R.string.menu_about, Toast.LENGTH_SHORT).show();
break;
case R.id.menu_search:
Toast.makeText(MainActivity.this, R.string.menu_search, Toast.LENGTH_SHORT).show();
break;
case R.id.menu_notification:
Toast.makeText(MainActivity.this, R.string.menu_notification, Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
}
private void initView() {
mToolbar = (Toolbar) findViewById(R.id.tool_bar);
//设置导航栏图标
mToolbar.setNavigationIcon(R.mipmap.ic_menu_logo);
//设置app logo
mToolbar.setLogo(R.mipmap.ic_launcher);
//设置主标题
mToolbar.setTitle("Title");
//设置主标题文本的字体，大小，颜色等主题属性
mToolbar.setTitleTextAppearance(getApplicationContext(), R.style.Theme_Toolbar_Base_Title);
//设置子标题
mToolbar.setSubtitle("Subtitle");
//设置子标题文本的字体，大小，颜色等主题属性
mToolbar.setSubtitleTextAppearance(getApplicationContext(), R.style.Theme_Toolbar_Base_Subtitle);
//加载menu布局文件
mToolbar.inflateMenu(R.menu.toolbar_menu);
}
}
（4）去掉系统自带的ActionBar（也可以需要的 Activity设置为NoActionBar主题），这里因为MainActivity是使用默认的，所以我们采用修改默认主题的父类为：
parent="Theme.AppCompat.Light.NoActionBar"
也可以在setContentView()之前调用supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
（5）在values/styles.xml文件下设置标题的主题（字体大小，颜色等）
这里比较简单，就不上代码了。
效果图
参考
android：ToolBar详解（手把手教程）
Toolbar的详细介绍和自定义Toolbar
Android ToolBar 使用完全解析
作者：龚崇敏
原文链接：
https://blog.csdn.net/qq_40663411/article/details/106447982
标签：ActionBar,Toast,自定义,void,public,AndroidStudio,id 来源： https://blog.csdn.net/qq_40663411/article/details/106447982