Android Toolbar使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Gary__123456/article/details/77604190

Toolbar是support:design包下的,顾名思义是工具栏。与以前的ActionBar的作用相似,功能却更加强大。

一、Toolbar的简单接入

1.添加依赖

   compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:24.1.1'
    compile 'com.android.support:design:24.1.1'
    compile 'com.android.support:cardview-v7:24.1.1'

2.将MainActivity的主题修改,去掉原来的ActionBar

 <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>

3.MainActivity的布局文件,activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.huang.toolbar.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            ></android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

在MainActivity添加以下代码:

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        //主标题
        toolbar.setTitle(R.string.app_name);
        //设置颜色
        toolbar.setTitleTextColor(Color.WHITE);
        toolbar.setSubtitle("副标题");
        toolbar.setSubtitleTextColor(Color.WHITE);

        toolbar.setNavigationIcon(R.mipmap.ic_launcher);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showToast("我是左边的菜单");
            }
        });
        //填充菜单
        toolbar.inflateMenu(R.menu.toolbar_menu);
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.menu_main_search:
                        showToast("搜索");
                        break;
                    case R.id.menu_main_refresh:
                        showToast("刷新");
                        break;
                }
                return false;
            }
        });
    }

    private void showToast(String msg) {
        Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
    }}

4、菜单toolbar_menu.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/menu_main_search"
        android:icon="@drawable/ic_search_white_24dp"
        android:title="@string/search"
        app:showAsAction="ifRoom" />


        <item
            android:id="@+id/menu_main_refresh"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/refresh"
            app:showAsAction="never" />

        <item
            android:id="@+id/menu_main_add"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/place"
            app:showAsAction="withText" />

</menu>

效果图:
这里写图片描述

二、实现向下滑动隐藏,向上显示toolbar效果,如:简书的文章页效果

1.首先,为toolbar设置style,ToolBar

  <style name="ToolBar">
        <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.MaterialSheetFab.ActionBar</item>
        <!--弹出框样式-->
        <item name="popupTheme">@style/ThemeOverlay.MaterialSheetFab.ActionBar.Popup</item>
        <item name="android:elevation" tools:ignore="NewApi">4dp</item>
        <!--设置滑动时toolbar可显示或隐藏,默认为显示-->
        <item name="layout_scrollFlags">scroll|enterAlways</item>
    </style>
    <style name="ThemeOverlay.MaterialSheetFab.ActionBar.Popup" parent="ThemeOverlay.AppCompat.Light" />
    <style name="ThemeOverlay.MaterialSheetFab.ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <!--默认白色主题-->
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="colorControlNormal">@android:color/white</item>
        <item name="colorControlHighlight">#8fff</item>
    </style>

2.修改布局,activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.huang.toolbar.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="CardView"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="fdsafsdafsadfasdfsdafasdfsdafasdfasdfsdafsadfasdfsadfasdf" />

                </LinearLayout>


            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="CardView"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/test" />

                </LinearLayout>


            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="CardView"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/test" />

                </LinearLayout>


            </android.support.v7.widget.CardView>
        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

3.修改代码:

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        setupActionBar();
    }

    private void initView() {
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        //主标题
        toolbar.setTitle(R.string.app_name);
        //设置颜色
        toolbar.setTitleTextColor(Color.WHITE);
        toolbar.setSubtitle("副标题");
        toolbar.setSubtitleTextColor(Color.WHITE);

    }

    private void showToast(String msg) {
        Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
    }

    private void setupActionBar() {
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.toolbar_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
//                toggleDrawer();
                showToast("返回");
                return true;
            case R.id.menu_main_search:
                showToast("搜索");
                return true;
            case R.id.menu_main_add:
                showToast("添加");
                return true;
            case R.id.menu_main_refresh:
                showToast("刷新");
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

运行效果这里写图片描述

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页