Material DesignAndroid开发Android知识

Toolbar

2017-04-22  本文已影响165人  amazingokc

Toolbar作为一个常用的控件,功能是很强大的,有些东西不是那么容易记住,所以撸篇文章以便查找。
效果图:

20170424144435.png 20170424144424.png

要使用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

上一篇下一篇

猜你喜欢

热点阅读