Android笔记——Toolbar

于 2017-09-27 20:54:39 发布
阅读量276 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 其它
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gislaozhang/article/details/78117113
本文详细介绍如何在Android应用中使用Toolbar替代Actionbar，包括Activity与Fragment场景下的具体实现步骤及代码示例。

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

前言

每个活动最顶部的标题栏是一个Actionbar，由于Actionbar设计的原因，被限定只能位于活动的顶部，不能实现一些Material Design的效果，google官方已经不建议使用Actionbar；而Toolbar不仅继承了Actionbar的所有功能，而且更加灵活，可以配合其它控件来完成一些Material Design的效果。
以下详细介绍了使用Toolbar的两种情景，具体如下：

情景一：Activity使用Toolbar

效果图：

（1）指定一个不带Actionbar的主题（修改res/values/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>
    </style>

</resources>
（2）设置Toolbar控件相关属性（修改res/layout/toolbar.xml文件）；
<?xml version="1.0" encoding="utf-8"?>
<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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
    <TextView
        android:id="@+id/toolbar_title"
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorWhite"
        android:layout_gravity="center" />
</android.support.v7.widget.Toolbar>
其中android:theme属性是为了让Toolbar单独使用深色主题，而app:popupTheme中设置的属性单独将菜单项指定成淡色主题，同时app:popupTheme可以兼容5.0以下系统。
（3）在活动布局中调用toolbar.xml文件（res/layout/activity_main.xml）；
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
>
   <include layout="@layout/toolbar"/>
</FrameLayout>
（4）给Toolbar添加一些action按钮让Toolbar更加丰富
（准备几张图片作为按钮图标，并将这些图片拷贝到drawable-xxhdpi目录下；此外，在res目录创建一个menu文件夹，在menu文件夹中新建一个toolbar.xml文件）；
<?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/backup"
        android:icon="@drawable/ic_backup"
        android:title="Backup"
        app:showAsAction="always"/>
    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete"
        android:title="Delete"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:showAsAction="never"/>
</menu>
其中app:showAsAction用来指定按钮的显示位置，主要有以下几种值:always——>永远显示在Toolbar中，如果屏幕空间不够则不显示；ifroom——>表示屏幕空间足够的情况下显示在Toolbar中，不够的话显示在菜单中；never——>则表示永远显示在菜单中。注意：Toolbar中的action只会显示图标，菜单中的action只会显示文字。
（5）完善活动中的功能编码,在基类（BaseActivity.java）中初始化Toolbar控件，如果有多个活动界面用到Toolbar，可以直接继承基类，减少代码量，提高复用性；
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.widget.TextView;


public class BaseActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    public Toolbar initToolbar(int title) {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);//将toolBar实例传入
        if (toolbar != null) {
            toolbar.setTitle("");
            TextView toolbaTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
            toolbaTitle.setText(title);
        }
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setDisplayShowTitleEnabled(false);//禁用系统的title显示
        }
        return toolbar;
    }
    public Toolbar initToolbar(CharSequence title) {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        if (toolbar != null) {
            toolbar.setTitle("");
            TextView toolbaTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
            toolbaTitle.setText(title);
        }
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setDisplayShowTitleEnabled(false);//禁用系统的title显示
        }
        return toolbar;
    }
}
主活动继承基类，并且在onCreateOptionsMenu()方法中加载了toolbar.xml菜单文件，然后在onOptionsItemSelected()方法中处理各个按钮的点击事件。
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends BaseActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initToolbar("测试demo");
    }

    /**加载了toolbar.xml菜单文件
     * @param menu
     * @return
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);//加载toolbar.xml这个菜单文件
        return true;
    }

    /**
     * 处理各个按钮的点击事件
     * @param item
     * @return
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.backup:
                Toast.makeText(this, "You clicked Backup", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "You clicked Delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this, "You clicked Settings", Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }
}

情景二：Fragment使用Toolbar不与ActionBar关联

如果与ActionBar不进行关联也可以使用，那么Menu的操作也不用onCreateOptionsMenu方法，直接使用ToolBar的inflateMenu方法加载Toolbar的菜单文件，Menu的事件也是独立的，需要通过设置ToolBar的setOnMenuItemClickListener来监听各个按钮点击事件。
案例：一个activity+多个fragment，其中每个fragment的标题栏和菜单栏不同。
实现思路：底部导航按钮采用第三方开源库BottomNavigationBar，在基类中进行Toolbar初始化，减少代码量，提高复用性。
效果图如下：
    
（1）布局文件
activity_main.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"
    >
   <FrameLayout
       android:id="@+id/fragment"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1" />

   <com.ashokvarma.bottomnavigation.BottomNavigationBar
       android:id="@+id/bottom_navigation_bar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom" />
</LinearLayout>
fragment_addressbook.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/plantinvestigate"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <include  layout="@layout/title" />
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="通讯录"
    android:layout_centerInParent="true"
    android:gravity="center_horizontal"
    android:textSize="20sp"
    android:id="@+id/tv_plant"/>
</RelativeLayout>
其它两个fragment布局，同理（略）
title.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
    <TextView
        android:id="@+id/toolbar_title"
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorWhite"
        android:layout_gravity="center" />
</android.support.v7.widget.Toolbar>
（2）基类文件，单独使用Toolbar而不与Actionbar关联
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import android.view.MenuItem;
import com.example.toolbardemo.R;

/**
 * 基类
 */
public class BaseFragment extends Fragment  implements  Toolbar.OnMenuItemClickListener{
    Activity mActivity;
    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        mActivity = getActivity();
    }

    /**初始化Toolbar
     * @param view 视图
     * @param menu 菜单文件
     * @param title 标题栏名称
     */
    public void init(View view,int menu,String title){
        Toolbar toolbar = (Toolbar)view.findViewById(R.id.toolbar);
        toolbar.inflateMenu(menu);
        if(toolbar!=null){
            toolbar.setTitle("");
            TextView toolbaTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
            toolbaTitle.setText(title);
        }
        // Navigation Icon 要設定在 setSupoortActionBar后才有作用
        // 否則會出現 back button
        toolbar.setNavigationIcon(R.drawable.ic_menu);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mActivity, "you clicked button01", Toast.LENGTH_SHORT).show();
            }
        });
        // Menu item click 设定在 setSupportActionBar 之后才有作用
        toolbar.setOnMenuItemClickListener(this);
    }

    @Override
    public boolean onMenuItemClick(MenuItem item) {
        return false;
    }
}
其中BaseFragment基类文件继承Fragment和Toolbar.OnMenuItemClickListener，并且重写其onMenuItemClick()方法。
（3）Fragment文件继承BaseFragment文件，并且实现其onMenuItemClick()方法，执行具体的菜单按钮点击事件。
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import com.example.toolbardemo.R;

public class AddressbookFragment extends BaseFragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_addressbook, container, false);
        TextView textView=(TextView)view.findViewById(R.id.tv_plant);
        init(view,R.menu.menu_addressbook,"通讯录");
        return view;
    }

    @Override
    public boolean onMenuItemClick(MenuItem menuItem) {
            switch (menuItem.getItemId()){
                case R.id.backup:
                    Toast.makeText(mActivity, "You clicked Backup", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.delete:
                    Toast.makeText(mActivity, "You clicked Delete", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.settings:
                    Toast.makeText(mActivity, "You clicked Settings", Toast.LENGTH_SHORT).show();
                    break;
                default:
            }
            return true;
        }
}
其它Fragment继承BaseFragment基类文件，步骤同理（略）。
（4）主活动实现底部按钮切换功能实现，具体编码如下：
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;
import com.example.toolbardemo.fragment.WeixinFragment;
import com.example.toolbardemo.fragment.MeFragment;
import com.example.toolbardemo.fragment.AddressbookFragment;

public class MainActivity extends AppCompatActivity {
    private BottomNavigationBar mBottomNavigationBar;
    private FragmentManager fm;
    private Fragment mapFragment;
    private Fragment plantInvestigateFragment;
    private Fragment meFragment;

    private static final String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        setListener();
    }
    /**
     * 界面初始化
     */
    private void initView() {
        mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
        mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC
        );
        mBottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "微信").setActiveColorResource(R.color.blue))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "通讯录").setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "我").setActiveColorResource(R.color.puple))
                .setFirstSelectedPosition(1)
                .initialise();
        fm = getSupportFragmentManager();

        setDefaultFragment();
    }

    /**
     * 设置默认启动界面，例如：通讯录功能模块
     */
    private void setDefaultFragment() {
        FragmentTransaction transaction = fm.beginTransaction();
        hideAllFragments(transaction);//隐藏所有fragment
        if (plantInvestigateFragment == null) {
            plantInvestigateFragment = new AddressbookFragment();
            transaction.add(R.id.fragment, plantInvestigateFragment).commit();
        } else {
            transaction.show(plantInvestigateFragment).commit();
        }
    }

    /**
     * 设置监听
     */
    private void setListener() {
        mBottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int position) {
                Log.i(TAG, "onTabSelected" + position);
                FragmentTransaction transaction = fm.beginTransaction();
                hideAllFragments(transaction);
                switch (position) {
                    case 0:
                        if (mapFragment == null) {
                            mapFragment = new WeixinFragment();
                            transaction.add(R.id.fragment, mapFragment);
                        } else {
                            transaction.show(mapFragment);
                        }
                        break;
                    case 1:
                        if (plantInvestigateFragment == null) {
                            plantInvestigateFragment = new AddressbookFragment();
                            transaction.add(R.id.fragment, plantInvestigateFragment);
                        } else {
                            transaction.show(plantInvestigateFragment);
                        }
                        break;
                    case 2:
                        if (meFragment == null) {
                            meFragment = new MeFragment();
                            transaction.add(R.id.fragment, meFragment);
                        } else {
                            transaction.show(meFragment);
                        }
                        break;
                    default:
                        break;
                }
                transaction.commit();
            }

            @Override
            public void onTabUnselected(int position) {

            }

            @Override
            public void onTabReselected(int position) {

            }
        });
    }

    /**
     * 防止fragment重叠：
     * 重写onAttachFragment，重新让新的Fragment指向了原本未被销毁的fragment，
     * 它就是onAttach方法对应的Fragment对象
     */
    public void onAttachFragment(Fragment fragment) {
        if (mapFragment == null && fragment instanceof WeixinFragment)
            mapFragment = fragment;
        if (plantInvestigateFragment == null && fragment instanceof AddressbookFragment)
            plantInvestigateFragment = fragment;
        if (meFragment == null && fragment instanceof MeFragment)
            meFragment = fragment;
    }

    /**
     * 隐藏所有fragment
     */
    private void hideAllFragments(FragmentTransaction transaction) {
        if (mapFragment != null) {
            transaction.hide(mapFragment);
        }
        if (plantInvestigateFragment != null) {
            transaction.hide(plantInvestigateFragment);
        }
        if (meFragment != null) {
            transaction.hide(meFragment);
        }
    }
}

参考文献

http://wuxiaolong.me/2015/12/21/fragmentToolbar/
http://wuxiaolong.me/2015/11/10/toolbar/

源码下载：

链接：http://pan.baidu.com/s/1o8SLbb8 密码：grix





评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值