Material Design之Toolbar的简单使用

    xiaoxiao2021-04-18  59

      Toolbar也是在一个 Material Design 风格的导航控件 ,以此来取代之前的 Actionbar 。与 Actionbar 相比, Toolbar 明显要灵活的多,可以添加导航栏图标 、 App的logo 、 标题和子标题 、 自定义控件 、以及 ActionMenu等,效果图如下:

    那么我们就来学习一下如何使用它吧。

    一、按照惯例,先创建项目,然后添加v7的依赖包

    compile 'com.android.support:appcompat-v7:25.1.1'

    二、添加布局文件

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_home" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.wangguifa.toolbartest.HomeActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#4054B2"> <!--可以任意添加需要的控件--> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="自定义标题" android:textColor="#ffffff" android:textSize="11sp" /> </android.support.v7.widget.Toolbar> </RelativeLayout>

    这样ToolBar就算创建好了,效果如下:

      你会发现怪怪的,没错,那是因为没有隐藏掉actionBar,通过一下方法隐藏actionBar就可以了: 在布局代码中给activity设置theme:

    android:theme="@style/Theme.AppCompat.Light.NoActionBar"

    或者在java代码中给activity设置:

    requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_home);

    他俩效果是一样的。

    你以为到这就完了?其实并没有,下面开始我们学习些ToolBar的其他用法吧:

    package com.wangguifa.toolbartest; import android.graphics.Color; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.MenuItem; import android.view.View; import android.widget.Toast; public class HomeActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home); Toolbar mToolBar = (Toolbar) findViewById(R.id.toolbar); // 左上角按钮图标 mToolBar.setNavigationIcon(R.drawable.back); // 设置logo图标 mToolBar.setLogo(R.mipmap.ic_launcher); // 设置主标题,若不设置,则默认为App的名字 mToolBar.setTitle("主标题"); // 设置主标题颜色 mToolBar.setTitleTextColor(Color.WHITE); // 设置副标题 mToolBar.setSubtitle("副标题"); // 设置副标题颜色 mToolBar.setSubtitleTextColor(Color.RED); // 设置NavigationIcon的点击事件 mToolBar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 执行对应操作,这里使用Toast演示 Toast.makeText(HomeActivity.this, "您点击了返回键", Toast.LENGTH_SHORT).show(); } }); // 加载Menu布局 mToolBar.inflateMenu(R.menu.toolbar_menu); // menu点击事件 mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.menu_1: // 执行对应操作,这里使用Toast演示 Toast.makeText(HomeActivity.this, "您点击了menu_1", Toast.LENGTH_SHORT).show(); return true; case R.id.menu_2: // 执行对应操作,这里使用Toast演示 Toast.makeText(HomeActivity.this, "您点击了menu_2", Toast.LENGTH_SHORT).show(); return true; case R.id.menu_3: // 执行对应操作,这里使用Toast演示 Toast.makeText(HomeActivity.this, "您点击了menu_3", Toast.LENGTH_SHORT).show(); return true; default: return false; } } }); } }

    对应的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" xmlns:tools="http://schemas.android.com/tools" tools:context=".HomeActivity"> <item android:id="@+id/menu_1" android:icon="@drawable/ic_menu_camera" android:title="menu_1" app:showAsAction="ifRoom" /> <item android:id="@+id/menu_2" android:icon="@drawable/ic_menu_gallery" android:title="menu_2" app:showAsAction="never" /> <item android:id="@+id/menu_3" android:icon="@drawable/ic_menu_slideshow" android:title="menu_3" app:showAsAction="never" /> </menu>

      你也许会问app:showAsAction=”ifRoom”这个是什么意思?其实这是跟android:showAsAction属性差不多,showAsAction属性共有五个值:ifRoom、never、always、withText、collapseActionView,可以混合使用。 ifRoom ToolBar如果有位置就显示在ToolBar上,没有则隐藏。 never 永远不会显示在ToolBar上,会存在更多item里面(点击竖向三个点后显示)。 always 无论ToolBar空间是否够,都显示。 withText 该值示意ToolBar要显示文本标题。 collapseActionView 声明了这个操作视窗应该被折叠到一个按钮中,当用户选择这个按钮时,这个操作视窗展开。否则,这个操作视窗在默认的情况下是可见的,并且即便在用于不适用的时候,也要占据操作栏的有效空间。一般要配合ifRoom一起使用才会有效果。 切记这里使用app:showAsAction=”“而不是android:showAsAction。

    最后还可以在ToolBar中添加各种需要的控件,如ImageView、TextView、Button等。

    <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#4054B2"> <!--可以任意添加需要的控件--> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="自定义标题" android:textColor="#ffffff" android:textSize="11sp" /> </android.support.v7.widget.Toolbar>

    以上就是ToolBar的简单使用,若有什么不准备或者错误的地方请及时联系我更正。

    转载请注明原文地址: https://ju.6miu.com/read-674823.html

    最新回复(0)