关于Toolbar的折腾（结合Fragment使用）

最新推荐文章于 2024-05-01 12:09:35 发布

枯木行者

最新推荐文章于 2024-05-01 12:09:35 发布

阅读量1.5w

点赞数 5

分类专栏： Android 移动开发文章标签： android studio 导航 android UI

本文链接：https://blog.youkuaiyun.com/u013984533/article/details/51596941

版权

Android 同时被 2 个专栏收录

7 篇文章

订阅专栏

移动开发

7 篇文章

订阅专栏

在Android Studio 2.0环境下，使用Toolbar作为导航栏在Activity间跳转相对简单。但当尝试在同一个Activity内使用Toolbar和Fragment时，可能会遇到显示问题。解决这个问题的关键在于，当Fragment被添加到默认的ConstraintLayout或RelativeLayout下时，会被Toolbar覆盖。通过将默认布局改为LinearLayout并设置方向为垂直，可以避免这种叠加现象，使得Toolbar和Fragment能正常显示且互不干涉。此外，使用NoActionBar主题、单独定义Toolbar布局以及参考官方Fragment文档，都是提高效率的有效方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Toolbar 是谷歌推出在 android 5.0 版本以后取代 ActionBar 的一个东西

先说我折腾的环境：

我用的是android Studio 2.0

如果你的app 是在activity之间来回跳转的话，使用Toolbar作为一个导航栏，那么是很简单就能实现的

Manifest.xml配置为

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.xuexi.zhaoyun.test">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <!--activity主题需设置为NoActionBar-->
        <activity
            android:name=".MainActivity"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

theme是在Style里定义的

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- 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.NoActionBar">
        <!--隐藏ActionBar-->
        <item name="windowActionBar">false</item>
        <!--不显示标题-->
        <item name="windowNoTitle">true</item>
    </style>
</resources>

准备好之后就可以在MainActivity的布局文件中添加Toolbar进去了

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.xuexi.zhaoyun.test.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary">

        <TextView
            android:id="@+id/toolbarTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"

            android:textColor="@android:color/white"
            android:textSize="20sp" />
    </android.support.v7.widget.Toolbar>
</LinearLayout>

Toolbar里面包含了一个TextView 是实现 Title居中用的，后面说

在activity里通过id查找到Toolbar，就可以set.xxx了

<span style="white-space:pre">	</span>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        //不显示标题，该设置放在setSupportActionBar(toolbar);后面时无效
        toolbar.setTitle("");
        //设置导航图标
        toolbar.setNavigationIcon(R.drawable.menu_icon);
        //设置Logo
        toolbar.setLogo(R.drawable.android_icon);
        //用Toolbar里包含的TextView显示标题达到居中效果
        TextView toolbarTitle = (TextView) findViewById(R.id.toolbarTv);
        toolbarTitle.setText("首页");

        setSupportActionBar(toolbar);

初步效果是这样的：

菜单也可以放在Toolbar上的，其实是依附在ActionBar上的，这得回到开始时设置的theme那里说起了，注意app的theme使用的是带有ActionBar的theme

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

activity使用的是没有ActionBar的theme，此时ActionBar只是隐藏了，先定义一个menuzi'yuan

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.xuexi.zhaoyun.toolbar.MainActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="setting"
        app:showAsAction="never" />
    <item
        android:id="@+id/search"
        android:icon="@drawable/search_icon"
        android:orderInCategory="90"
        android:title="setting"
        app:showAsAction="ifRoom" />
</menu>
然后在代码里解析menu

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.action_settings:
                Toast.makeText(this, "selected setting", Toast.LENGTH_SHORT).show();
                break;
            case R.id.search:
                Toast.makeText(this, "selected search", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
效果是这样的

到这里，可能你已经明白了，如果你不需要munu在toolbar上，更简单粗暴的使用toolbar的方法是直接给app一个NoactionBar的theme，然后在activity布局里添加toolbar，就可以在代码里取到toolbar进行操作了，这样的话没有actionbar存在，上面俩个方法添加munu就失效了

由于activity是重量级View，在app内部实现界面跳转建议使用Fragment，比较省资源，我想实现的是一个activity里面，顶部是一个toolbar导航，下面是Fragment，可以来回跳转，有几个问题，如果使用一个

生成的代码模板是有一个Fragment，然后从这个Fragment跳转到一个自定义的Fragment时，跳过去你可能看到的效果是这样的

即使我要的是替换效果。出来的却是上面的叠加效果

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.fragment_main, container, false);
        root.findViewById(R.id.btnGo).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getFragmentManager().beginTransaction()
                        .addToBackStack(null)
                        .replace(R.id.container, new LoginFragment())
                        .commit();
            }
        });

        return root;
    }

我猜测可能是自动生成的那个Fragment和自定义使用的不是一个ViewGroup,如果你想完全自定义来实现想要的结果

新建一个工程，只用一个空的activity，添加一个toolbar进去，再添加一个Fragment进去，在代码中操作toolbar，运行之后会发现,Fragment是不会显示的，被覆盖在toolbar底下了，此时你心里一定有一万只草泥马奔腾而过，怎么会这样的，折腾了好久之后偶然间我把默认布局改成LinearLauoyt并设置走向为竖直时，添加进去的toolbar和Fragment终于能正常显示了，互不干涉，再操作Fragment跳转就正常了，不会出现叠加现象

总结一下上面说到的问题

1.不需要toolbar上使用menu时，最简单直接的方式是给app一个NoActionBar的theme就行了

2.同时使用toolbar和Fragment时，出现覆盖时，要修改默认布局

3.想高效率使用toolbar，可以将toolbar单独定义成一个xml布局，在activity布局里include进去即可，不必创建多个toolbar

4.关于Fragment的使用，可以参考官方详细说明 Fragment官方说明

以上是我自己的摸索过程中遇到的一些问题，实现方法也比较简陋，欢迎各位朋友指正