Demo1 Meterial Design入门:导航栏(使用ToolBar)

在Holo的时代，导航栏是应用程序的部件，要想修改、设置其属性就变得困难，在新的设计规范下，这种旧的用法已经不再被提倡，取而代之的是用ToolBar这个组件代替导航栏功能。

ToolBar是用户界面组件，只要把这个组件放到导航栏的位置下就可以充当导航栏使用，优点是其灵活性大。使用ToolBar的第一步是设置Application的Theme属性为NoActionBar:
style.xml:

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

 

之后先在layout文件夹下创建toorbar.xml文件:
toolbar.xml:

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2  <android.support.v7.widget.Toolbar
 3      xmlns:android="http://schemas.android.com/apk/res/android"
 4      xmlns:app="http://schemas.android.com/apk/res-auto"
 5      android:id="@+id/toolbar"
 6      android:layout_width="match_parent"
 7      android:layout_height="wrap_content"
 8      android:background="?attr/colorPrimary"
 9      android:minHeight="?attr/actionBarSize"
10      app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >
11  </android.support.v7.widget.Toolbar>

 

这里的ToolBar的theme属性为 @style/ThemeOverlay.AppCompat.ActionBar。在主布局中我们只把toolbar添加进去，然后在onCreate方法中通过setSupportActionBar方法就可以把ToolBar加载到导航栏以之使用:
MainActivity.java:

 1 public class MainActivity extends AppCompatActivity {
 2     private Toolbar toolbar;
 3 
 4     @Override
 5     protected void onCreate(Bundle savedInstanceState) {
 6         super.onCreate(savedInstanceState);
 7         setContentView(R.layout.main_layout);
 8 
 9         toolbar = (Toolbar)findViewById(R.id.toolbar);
10         toolbar.setTitle("I am toolbar");
11         toolbar.setTitleTextColor(Color.WHITE);
12         toolbar.setSubtitle("toolbar"); //对于ToolBar标题一类的设置要在 setSupportActionBar()之前调用才会有效
13         setSupportActionBar(toolbar);
14     }
15 }

 


导航栏已经是新的风格了，但这远远不够，我们接下来还要往上面添加菜单按键，其实ToolBar上的菜单选项类似于Activity的菜单，用法是一样的，区别在于效果不同。现在先创建菜单文件:
toolbar_menu.xml:

<?xml version="1.0" encoding="utf-8"?>
 1 <menu xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:app="http://schemas.android.com/apk/res-auto">
 3     <item
 4         android:id="@+id/mToolBar_Share"
 5         android:title="share"
 6         app:showAsAction="always"
 7         android:icon="@android:drawable/ic_menu_share"/>
 8     <item
 9         android:id="@+id/mToolBar_Message"
10         android:title="message"
11         app:showAsAction="always"
12         android:icon="@android:drawable/ic_dialog_email"/>
13 </menu>

这里有一个属性很关键，就是showAsAction，这个属性决定了这个菜单会不会出现在导航栏上，设置为always表示此菜单栏始终出现在菜单栏下。之后的工作就是在Activity中重写onCreateOptionsMenu方法以加载菜单、重写onOptionsItemSelected方法以响应菜单消息。代码就不粘了，直接上效果图：

最后，我们要往导航栏添加主按键(最左侧的按键，Navigation)，只需要指定其图标然后传入onClickLisener对象就可以实现按键功能:

 1 toolbar = (Toolbar)findViewById(R.id.toolbar);
 2 toolbar.setTitle("I am toolbar");
 3 toolbar.setTitleTextColor(Color.WHITE);
 4 toolbar.setSubtitle("toolbar"); //对于ToolBar标题一类的设置要在 setSupportActionBar()之前调用才会有效
 5 setSupportActionBar(toolbar);
 6 toolbar.setNavigationIcon(android.R.drawable.sym_def_app_icon);
 7 toolbar.setNavigationOnClickListener(new View.OnClickListener() {
 8     @Override
 9     public void onClick(View v) {
10         Toast.makeText(MainActivity.this, "Navigation", Toast.LENGTH_SHORT).show();
11     }
12 });

 

至此，关于全新风格的导航栏已经讲解完毕，效果如下:

下一篇的内容将是配合导航栏Navigation使用的侧滑菜单功能的实现。

Demo源码下载地址:Demo1:ToolBar

 

posted @ 2016-05-09 16:33  magician_Coder  阅读(1267)  评论(0)    收藏  举报