首页 > 代码库 > Toolbar的使用.md

Toolbar的使用.md

2024-11-05 04:11:39   204人阅读

1.什么是Toolbar

Toolbar是在Android5.0时出现的一个新控件，其目的用于取代Actionbar，它与Actionbar最大的差别就是Toolbar使用更加灵活、自由，而且Toolbar遵循Material Design规范。

想要使用Toolbar必须引用appcompat-v7库。当然另一种方法。就是将API改动为21以上，这样的方法的Toolbar不支持API21下面的系统，所以用的不多。

2.Toolbar的使用

2.1 加入V7支持库

这里使用appcompat-v7库中的Toolbar，这个库的Toolbar能够兼容5.0下面的系统。
首先在AndroidStudio的build.gradle文件里加入上这行代码

dependencies {
    compile fileTree(dir: ‘libs‘, include: [‘*.jar‘])
    testCompile ‘junit:junit:4.12‘
    // 加入V7支持库
    compile ‘com.android.support:appcompat-v7:23.2.1‘
}

2.2 自己定义Toolbar

在styles文件里改动主题样式，使其继承Theme.AppCompat.Light.NoActionBar。这个主题样式没有ActionBar。所以我们一会自己定义一个。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 顶部状态栏的颜色 -->
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <!-- actionbar 的颜色 -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <!-- actionbar 文字的颜色 -->
    <item name="android:textColorPrimary">@color/body_text_1</item>
    <!-- 改动默认颜色和menu文字颜色 -->
    <item name="android:textColor">@color/body_text_2</item>
    <!-- 文字选中时的高亮 -->
    <item name="android:textColorHighlight">@color/colorPrimary</item>
    <!-- 各种控件的颜色 -->
    <item name="colorAccent">@color/colorPrimary</item>
</style>

OK，之后在layout中创建一个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="@color/colorPrimary"
    android:minHeight="56dp" />

Toolbar定义完毕。假设想使用它。仅仅要在其它的xml布局中通过include标签引入它即可了。

2.3 使用Toolbar

在文章的开头说了。Toolbar主要使用于替换Actionbar的，所以Toolbar的使用方法事实上跟Actionbar的使用方法相似，但也有些不一样。
假设想要在Activity中使用Toolbar，那么该Activity必须继承AppCompatActivity，并通过setSupportActionBar()方法替换掉Actionbar。

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

    // 获得Toolbar。替换Actionbar
    mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);
}

能够通过例如以下代码来加入Toolbar的标题和图标。

mToolbar.setTitle("标题");
mToolbar.setSubtitle("子标题");
mToolbar.setLogo(R.mipmap.ic_launcher);

OK。效果例如以下
技术分享

2.4 加入Menu菜单

Menu配置也与Actionbar相似，首先在menu目录中定义menu配置文件

<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.torment.toolbardemo.MainActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/str_setting"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_add"
        android:icon="@mipmap/ic_search_white"
        android:orderInCategory="100"
        android:title="@string/str_add"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_delete"
        android:icon="@mipmap/ic_notifications_white"
        android:orderInCategory="100"
        android:title="@string/str_delete"
        app:showAsAction="ifRoom" />
</menu>

这里须要注意app:showAsAction这个属性。不能使用android:showAsAction。这是由于使用Toolbar来自V7包，所以使用android:showAsAction设置完是无效的。这是一个坑须要注意一下（下面还有好多坑）。

当配置完menu文件之后。仅仅须要在Activity的onCreateOptionsMenu()中载入这个menu文件即可。

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

假设想要监听menu的话。须要重写onOptionsItemSelected()方法。

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // 监听指定的button
        switch (item.getItemId()) {
            case R.id.action_settings:
                return true;
            case R.id.action_add:
                return true;
            case R.id.action_delete:
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

OK。效果是这样的。
技术分享

2.5 加入向上导航button

加入向上导航button与直接加入button的方式有些不一样。通过getSupportActionBar()的setDisplayHomeAsUpEnabled()方法设置。

// 开启向上导航button
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

假设想要监听这个button的点击事件。仅仅须要匹配android.R.id.home即可

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

OK，效果就是这样，多了一个返回button
技术分享

2.6 加入搜索功能

给Toolbar加入搜索功能很easy，仅仅须要在menu文件里配置一下即可。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:icon="@mipmap/ic_search_white"
        android:orderInCategory="100"
        android:title="@string/str_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom" />
</menu>

通过app:actionViewClass="android.support.v7.widget.SearchView"设置搜索视图。然后在代码中处理一下监听即可了。

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_search, menu);
    // 获得SearchView
    final MenuItem item = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);
    searchView.setQueryHint("请输入搜索内容");
    // 设置弹出键盘类型
    searchView.setInputType(InputType.TYPE_CLASS_NUMBER);
    searchView.setIconified(true);
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextSubmit(String query) { // 提交时触发
            return false;
        }

        @Override
        public boolean onQueryTextChange(String newText) { // 当字符串变化时触发
            return false;
        }
    });
    return true;
}

OK，效果例如以下
技术分享
技术分享

2.7 加入分享功能

分享功能与搜素功能相似。通过配置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/action_share"
        android:icon="@mipmap/ic_search_white"
        android:orderInCategory="100"
        android:title="@string/str_share"
        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
        app:showAsAction="ifRoom" />
</menu>

相同在代码中处理一下分享逻辑即可了。

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_share, menu);
    MenuItem item = menu.findItem(R.id.action_share);
    mShareActionProvider = (ShareActionProvider) MenuItemCompat.getActionProvider(item);
    // 设置分享内容以及类型
    mShareActionProvider.setShareIntent(getDefaultIntent());
    return true;
}
private Intent getDefaultIntent() {
    Intent intent = new Intent(Intent.ACTION_SEND);
    intent.putExtra(Intent.EXTRA_TEXT, "測试分享文本");
    intent.setType("text/plain");
    return intent;
}

OK。效果例如以下
技术分享

除了这样的分享之外，还有另一种更简单的分享方式，直接定义一个普通的menu，然后通过startActivity调用系统的分享功能。

<?
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/action_share2"
        android:icon="@mipmap/ic_search_white"
        android:orderInCategory="100"
        android:title="@string/str_share"
        app:showAsAction="ifRoom" />
</menu>
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_share2:
            Intent shareIntent = new Intent();
            shareIntent.setAction(Intent.ACTION_SEND);
            shareIntent.putExtra(Intent.EXTRA_TEXT, "測试分享文本");
            shareIntent.setType("text/plain");

            // 设置分享列表的标题
            startActivity(Intent.createChooser(shareIntent, "分享到"));
            return true;
    }
    return super.onOptionsItemSelected(item);
}

OK。效果例如以下
技术分享
另外一种眼下使用的比較多，写起来也比較简单。

眼下先写这么多，等有时间继续完好。

源代码地址

http://download.csdn.net/detail/m_irror/9479870

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

Toolbar的使用.md


联系
我们