Android ActionBar 转Toolbar 出现的一些问题总结
程序员文章站
2022-03-26 11:29:14
...
前言：最近对公司的APP进行一些控件的升级（很久以前就想动，我已经忍了很久了），记录一下ActionBar 转 ToolBar 期间遇到的大大小小的坑，顺便做个笔记。
一、先说一开始的使用
1.在xml布局文件的头部添加Toolbar控件
<?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.support.v7.widget.Toolbar
android:id="@+id/toolbar"
style="@style/AppTheme.Toolbar">
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:text="@string/app_name"
android:textColor="#FFFFFF"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>
</LinearLayout>可以注意到Toolbar 里面有一个TextView 控件，这是为了设置标题居中显示。
2.因为要使用Toolbar替换ActionBar,我们就要把原本的ActionBar去掉,这时候就需要自定义主题了，自定义一个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>
<style name="AppTheme.Toolbar" parent="Widget.AppCompat.ActionBar">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">?attr/actionBarSize</item>
<item name="android:background">?attr/colorPrimary</item>
<item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
</resources>3.这时候在代码中调用下，就可以使用ToolBar了
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
private TextView mtvTitle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
// 设置toolbar 自带的标题为空
mToolbar.setTitle("");
// 设置toolbar
setSupportActionBar(mToolbar);
// 自定义标题居中
mtvTitle = (TextView) findViewById(R.id.tvTitle);
mtvTitle.setText(getString(R.string.app_name));
// 设置左边的图标 点击图标会执行 android.R.id.home 的监听
mToolbar.setNavigationIcon(getResources().getDrawable(R.mipmap.back));
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
finish();
break;
}
return super.onOptionsItemSelected(item);
}
}效果图如下：
二、使用Toolbar 时的菜单问题
1.跟使用actionbar 一样，绑定一个菜单
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.config, menu);
return super.onCreateOptionsMenu(menu);
}当然了，得给出config菜单文件的代码。。。
<?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/airlink_config"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="101"
android:title="一键配置"
app:showAsAction="never" />
<item
android:id="@+id/softap_config"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="103"
android:title="热点配置"
app:showAsAction="never" />
</menu>菜单项的各个属性：
- android:icon：这个属性是指定每个菜单项左边的图标的
- android:id：菜单项的唯一标识
- android:orderInCategory：菜单项的优先级，也就是顺序，只能设置大于正整数，数值越大菜单项越靠前
- android:title：菜单描述，也就是菜单文字
- app:showAsAction：这个是控制菜单项的显示的
添加上以后跑一下，效果时这样的
2.发现设置的图标不见了，这时候需要重写onPrepareOptionsPanel(View view, Menu menu)方法，这样才能正常显示图标，代码如下：
@SuppressLint("RestrictedApi")
@Override
protected boolean onPrepareOptionsPanel(View view, Menu menu) {
if (menu != null) {
if (menu.getClass() == MenuBuilder.class) {
try {
Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, true);
} catch (Exception e) {
e.printStackTrace();
}
}
}
return super.onPrepareOptionsPanel(view, menu);
}这时候图标就显示出来了
3.已正常的审美观来讲，菜单的位置以及样式感觉很丑，所以得自定义一个样式，让大家能够接受,代码如下：
<!--自定义toolbar菜单样式-->
<style name="toolbarMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
<!-- 是否覆盖锚点，默认为true，即盖住Toolbar -->
<item name="overlapAnchor">false</item>
<!-- 弹出层背景颜色 -->
<item name="android:popupBackground">@android:color/white</item>
<!-- 弹出层垂直方向上的偏移，负值会覆盖toolbar -->
<item name="android:dropDownVerticalOffset">5dp</item>
<!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 -->
<item name="android:dropDownHorizontalOffset">-2dp</item>
<!--文字颜色-->
<item name="android:textColor">@android:color/black</item>
</style>在主题中引用这个样式
<!-- 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="actionOverflowMenuStyle">@style/toolbarMenuStyle</item>
</style>最后还要在toolbar 中设置
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
style="@style/AppTheme.Toolbar"
app:popupTheme="@style/toolbarMenuStyle">
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:text="@string/app_name"
android:textColor="#FFFFFF"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>OK，这时候就设置完成了，跑一下代码，效果如下：
三、关于ToolBar 其他问题
1.在使用ToolBar 的时候很明显的感受到高度很不符合当前界面的大小，其实要想自定义ToolBar 的高度很简单，只需要设置 AppTheme.Toolbar 里面的两个参数就可以了，代码如下：
<style name="AppTheme.Toolbar" parent="Widget.AppCompat.ActionBar">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">@dimen/toolbar_hight</item>
<item name="android:minHeight">@dimen/toolbar_hight</item>
<item name="android:background">?attr/colorPrimary</item>
<item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>这两个高度值都要设置，只设置一个是不行的，我设置的大小是50dp,效果不是太明显。
2.当菜单栏显示的不是图标，而是文字的时候，文字就会显得特别小，效果如下。
想要调整这个字体的大小及颜色也是要在主题里进行设置，我设置的大小更改为20sp,颜色为黑色，代码如下
<!-- 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="actionOverflowMenuStyle">@style/toolbarMenuStyle</item>
<item name="actionMenuTextColor">@android:color/black</item>
<item name="actionMenuTextAppearance">@style/MenuTextStyle</item>
</style>
<style name="MenuTextStyle">
<item name="android:textSize">20sp</item>
</style>跑一下代码，效果图：
暂时遇到的情况就这些，再遇到以后再加以整理。ToolBar 功能确实是比ActionBar强大太多（汗，好像是句废话）。2018年了，22岁了，去年浪了一年，感觉自己基本上没有多大的进步。这是我一生中最好的年纪，不能再挥霍了，提升自己才能有更好的未来，加油！
下一篇： npm使用过程中出现的一些问题