ToolBar相比ActionBar最大的不同就是ToolBar更加灵活自由,可以说它已经在逐渐取代ActionBar了。
先放图(没认真做样式,有些丑,项目中需要修改)
首先,一般一个ToolBar需要使用到以下3个地方;
style文件
layout布局
java类
接下来,手把手教你如何使用:
要使用ToolBar,首先要引入appcompat-v7支持,而且Activity必须继承
AppCompatActivity
才可以,可能是因为Activity没有ToolBar的方法吧
compile 'com.android.support:appcompat-v7:23.4.0'
//此处根据不同的Gradle版本做出相应的调整
并设置主题为NoActionBar,。接着,在style文件中使用以下代码控制:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- ToolBar颜色 -->
<item name="colorPrimary">@color/colorPrimary</item>
<!-- 此处修改状态栏的颜色 -->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!-- 窗口的背景颜色,这里是指,,整个窗体的背景色 -->
<item name="android:windowBackground">@android:color/white</item>
<!-- 添加一个搜索的View -->
<item name="searchViewStyle">@style/MySearchView</item>
</style>
<style name="MySearchView" parent="Widget.AppCompat.SearchView"></style>
</resources>
接下来,要在布局文件里引入
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
菜单配置与ActionBar基本类似:
<?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=".MainActivity">
<item
android:id="@+id/action_item1"
android:icon="@mipmap/ic_launcher"
android:title="1"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_item2"
android:icon="@mipmap/ic_launcher"
android:title="2"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_item3"
android:title="3"
app:showAsAction="never"/>
<item
android:id="@+id/action_item4"
android:title="4"
app:showAsAction="never"/>
</menu>
其中showAsAction:
1、always:这个值会使菜单项一直显示在Action Bar上。 2、ifRoom:如果有足够的空间,这个值会使菜单项显示在Action Bar上。 3、never:这个值使菜单项永远都不出现在Action Bar上。 4、withText:这个值使菜单项和它的图标,菜单文本一起显示。
好了,到此为止,布局基本是完成了,接下来我们看看类里需要写那些内容:
public class MainActivity extends AppCompatActivity
{
private Toolbar mToolBar;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView()
{
mToolBar = (Toolbar) findViewById(R.id.toolbar);
mToolBar.setLogo(R.mipmap.ic_launcher);//APP LOGO
mToolBar.setTitle("主标题");
mToolBar.setSubtitle("副标题");
mToolBar.inflateMenu(R.menu.main_menu); //加载菜单
mToolBar.setNavigationIcon(R.mipmap.ic_launcher); // 导航图标
setSupportActionBar(mToolBar); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main_menu, menu); return true; }
onCreateOptionsMenu:将菜单item加载到ToolBar中
ToolBar中包含Nav Icon , Logo , Title , Sub Title , Menu Items
在代码里注释写的很详细,这里不重复了。
当然ToolBar的某些属性也可以在XML里定义 if you like:
<code class="language-xml hljs has-numbering"><span class="hljs-tag"></span></code><pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'Consolas';font-size:13.5pt;"><span style="color:#e8bf6a;"><android.support.v7.widget.Toolbar
</span><span style="color:#e8bf6a;"> </span><span style="color:#9876aa;">android</span><span style="color:#bababa;">:id=</span><span style="color:#6a8759;">"@+id/id_toolbar"
</span><span style="color:#6a8759;"> </span><span style="color:#9876aa;">app</span><span style="color:#bababa;">:title=</span><span style="color:#6a8759;">"App Title"
</span><span style="color:#6a8759;"> </span><span style="color:#9876aa;">app</span><span style="color:#bababa;">:subtitle=</span><span style="color:#6a8759;">"Sub Title"
</span><span style="color:#6a8759;"> </span><span style="color:#9876aa;">app</span><span style="color:#bababa;">:navigationIcon=</span><span style="color:#6a8759;">"@drawable/ic_toc_white_24dp"
</span><span style="color:#6a8759;"> </span><span style="color:#9876aa;">android</span><span style="color:#bababa;">:layout_height=</span><span style="color:#6a8759;">"wrap_content"
</span><span style="color:#6a8759;"> </span><span style="color:#9876aa;">android</span><span style="color:#bababa;">:minHeight=</span><span style="color:#6a8759;">"?attr/actionBarSize"
</span><span style="color:#6a8759;"> </span><span style="color:#9876aa;">android</span><span style="color:#bababa;">:layout_width=</span><span style="color:#6a8759;">"match_parent"
</span><span style="color:#6a8759;"> </span><span style="color:#9876aa;">android</span><span style="color:#bababa;">:background=</span><span style="color:#6a8759;">"?attr/colorPrimary"</span><span style="color:#e8bf6a;">/></span>
到此,一个ToolBar已经完成了,接下来,要实现它的点击事件:
先说一下导航图标
setNavigationIcon
这个方法的点击事件,因为它是独立的一个事件,因此请看代码:
private void setAction()
{
mToolBar.setNavigationOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v)
{
Toast.makeText(MainActivity.this, "退出了", Toast.LENGTH_SHORT).show();
finish();
}
});
}
要在setNavigationOnClickListener当中实现。
至于Mune中的菜单:
mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener()
{
@Override
public boolean onMenuItemClick(MenuItem item)
{
switch (item.getItemId())
{
case R.id.action_item1:
Toast.makeText(MainActivity.this, "1", Toast.LENGTH_SHORT).show();
break;
case R.id.action_item2:
Toast.makeText(MainActivity.this, "2", Toast.LENGTH_SHORT).show();
break;
case R.id.action_item3:
Toast.makeText(MainActivity.this, "3", Toast.LENGTH_SHORT).show();
break;
case R.id.action_item4:
Toast.makeText(MainActivity.this, "4", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
APPLOGO喝标题
mToolBar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Logo,title&subTitle", Toast.LENGTH_SHORT).show();
}
});
//OnClickListener 接管了App Logo,title&subTitle这三个点击事件,暂时没找到分开的点击事件
到此为止,ToolBar基本就是成型了,在下一章,我将动手,做一个类似于网易邮箱的效果的Demo,敬请期待。
免费资源,样子丑陋,实践中需要调整。