Toolbar
2017-04-22 本文已影响165人
amazingokc
Toolbar作为一个常用的控件,功能是很强大的,有些东西不是那么容易记住,所以撸篇文章以便查找。
效果图:
要使用Toolbar,你的Activity一般都是要继承AppCompatActivity
public class Main2Activity extends AppCompatActivity {}
还得为Main2Activity 定义一个theme,常用的讲解都在这里了,以后还会补充,颜色值随意设置的
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="android:windowActionBar">false</item>
<!--<item name="android:windowNoTitle">true</item>-->
<!-- 使用 API Level 22 以上编译的话,要拿掉前缀字 -->
<item name="windowNoTitle">true</item>
<!--App bar 上的标题与更多菜单中的文字颜色。(如果在java也设置了字体颜色,这里设置的将无效)-->
<item name="android:textColorPrimary">#fbba03</item>
<!--toolbar返回键的按钮,以及其右变用三个圆点表示的菜单按钮颜色-->
<item name="colorControlNormal">#ffffff</item>
<!--colorPrimaryDark对应状态栏的颜色-->
<item name="colorPrimaryDark">#655321</item>
<!--colorPrimary 对应ToolBar的颜色-->
<item name="colorPrimary">#fbba03</item>
<!--各控制元件(如:check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色。-->
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="ToolbarTheme" parent="AppTheme.Base">
然后在Manifest设置一下这个主题
<activity android:name=".MainActivity"
android:theme="@style/ToolbarTheme"></activity>
创建一个Toolbar的XML文件custom_toolbar:
<?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="?attr/actionBarSize"
>
<!--在toolbar自定义控件,比较灵活,可以控制位置(前提是有剩余的位置给你占用)-->
<TextView
android:textSize="19sp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="自定义"/>
</android.support.v7.widget.Toolbar>
然后在activity_main2这个XML中引用进去就可以了
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.toolbardemo.Main2Activity">
<include layout="@layout/custom_toolbar"/>
</RelativeLayout>
Toolbar右边的位置是放置一些菜单按钮的,先写个xml,在res/menu创建一个menu_main.xml
<!-
1、always:使菜单项一直显示在ToolBar上。
2、ifRoom:如果有足够的空间,这个值会使菜单项显示在ToolBar上。
3、never:使菜单项永远都不出现在ToolBar上,在…的子项中显示。
4、withText:使菜单项和它的图标,菜单文本一起显示。-->
<item
android:id="@+id/action_edit"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="80"
android:title="edit"
app:showAsAction="ifRoom" />
<!--点击这个图标展开搜索-->
<item
android:id="@+id/action_search"
android:title="dd"
android:orderInCategory="90"
app:showAsAction="collapseActionView|ifRoom"
app:actionViewClass="android.support.v7.widget.SearchView"
android:icon="@mipmap/ic_launcher"
/>
<!--这两item是隐藏在右上角三个圆点里面的-->
<item
android:id="@+id/item1"
android:title="overflow"
app:showAsAction="never" />
<item
android:id="@+id/item2"
android:title="overflow"
app:showAsAction="never" />
</menu>
再看JAVA代码对Toolbar的一些设置
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
toolbar = (Toolbar) findViewById(R.id.toolbar);
/**经过验证,这些Title、Subtitle、NavigationIcon等如果需要占用的位置过大,则自定义的view在toolbar上显示就会很难达到想要的效果,
例如我想让自定义的一个view在toolbar居中显示,在由于Title占用的位置过多,导致自定义的view显示位置偏右。*/
// 设置 Title(要放在setSupportActionBar(toolbar)前面才生效)
toolbar.setTitle("Title");
//设置Title的字体颜色
toolbar.setTitleTextColor(Color.WHITE);
//设置Subtitle
toolbar.setSubtitle("Subtitle");
//设置Subtitle字体颜色
toolbar.setSubtitleTextColor(Color.RED);
//设置toolbar的背景颜色
toolbar.setBackgroundColor(Color.BLUE);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//设置Logo
//toolbar.setLogo(R.mipmap.ic_launcher);
//设置一个导航栏的图标
//toolbar.setNavigationIcon(R.mipmap.ic_launcher);
//需要设置在setSupportActionBar(toolbar)后才生效
/**返回按钮的点击事件也是这个*/
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(Main2Activity.this, "clickNavigationIcon",Toast.LENGTH_SHORT).show();
}
});
/**菜单控件的一些点击事件*/
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_edit:
Toast.makeText(Main2Activity.this, "action_edit",Toast.LENGTH_SHORT).show();
break;
case R.id.action_search:
Toast.makeText(Main2Activity.this, "action_search",Toast.LENGTH_SHORT).show();
break;
case R.id.item1:
Toast.makeText(Main2Activity.this, "item1",Toast.LENGTH_SHORT).show();
break;
case R.id.item2:
Toast.makeText(Main2Activity.this, "item2",Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
}
//如果有Menu,创建完后,系统会自动添加到ToolBar上
@Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
getMenuInflater().inflate(R.menu.menu_main, menu);
/**搜索按钮的相关逻辑*/
MenuItem menuItem=menu.findItem(R.id.action_search);//
searchView= (SearchView) MenuItemCompat.getActionView(menuItem);//加载searchview
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
@Override
public boolean onQueryTextSubmit(String query) {
Toast.makeText(Main2Activity.this, query,Toast.LENGTH_SHORT).show();
return true;
}
@Override
public boolean onQueryTextChange(String newText) {
if (TextUtils.isEmpty((newText))){
Toast.makeText(Main2Activity.this,"isEmpty",Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(Main2Activity.this, newText,Toast.LENGTH_SHORT).show();
}
return true;}
});//为搜索框设置监听事件
searchView.setSubmitButtonEnabled(true);//设置是否显示搜索按钮
searchView.setQueryHint("查找");//设置提示信息
searchView.setIconifiedByDefault(true);//设置搜索默认为图标
return true;
}
后面会补充结合抽屉的使用,也是相对简单的
参考文献:
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0925/1713.html
http://blog.csdn.net/mchenys/article/details/51533689
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html
https://developer.android.com/training/implementing-navigation/nav-drawer.html
http://www.jianshu.com/p/b3a40a55826e