Toolbar

作者: amazingokc | 来源:发表于2017-04-22 21:04 被阅读165次

    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

    相关文章

      网友评论

        本文标题:Toolbar

        本文链接:https://www.haomeiwen.com/subject/mwtezttx.html