美文网首页
ToolBar的使用实践

ToolBar的使用实践

作者: 李俊的博客 | 来源:发表于2016-06-26 16:45 被阅读441次

    activity_main

    <LinearLayout
        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.app3.MainActivity">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:background="?attr/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>
    </LinearLayout>
    

    res/menu/menu_main.xml

    <menu xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/action_settings"
            android:title="@string/action_settings"
            app:showAsAction="never"/>
        <item
            android:id="@+id/action_search"
            android:icon="@android:drawable/ic_menu_search"
            android:title="@string/action_search"
            app:showAsAction="always"/>
        <item
            android:id="@+id/action_share"
            android:icon="@android:drawable/ic_menu_share"
            android:title="@string/action_share"
            app:showAsAction="ifRoom"/>
    </menu>
    

    MainActivity.java

    public class MainActivity extends AppCompatActivity {
    
        private Toolbar toolbar;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            // 初始化视图
            initView();
    
            // 设置Toolbar
            setToolbar();
        }
    
        private void initView() {
            toolbar = (Toolbar) findViewById(R.id.toolBar);
        }
    
        private void setToolbar(){
            // 设置标题
            toolbar.setTitle(R.string.title_text);
            // 设置子标题
            toolbar.setSubtitle(R.string.subtitle_text);
            // 设置导航图标
            toolbar.setNavigationIcon(R.mipmap.ic_launcher);
            // 设置导航点击事件监听器
            toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "Navigation", Toast.LENGTH_SHORT).show();
                }
            });
            // 加载菜单
            toolbar.inflateMenu(R.menu.menu_main);
            // 设置点击菜单条目监听器
            toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
                    return true;
                }
            });
        }
    }
    

    还可以直接在XML中设置

    <android.support.v7.widget.Toolbar
        android:id="@+id/t_title"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:navigationIcon="@mipmap/ic_list"
        app:title="首页"
        app:titleTextColor="#ecf0f1"/>
    
    效果图

    与ActionBar结合使用
    MainActivity.java

    public class MainActivity extends AppCompatActivity {
    
        private static final String TAG = "MainActivity";
    
        private Toolbar toolbar;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            // 初始化视图
            initView();
    
            // 设置Toolbar
            setToolbar();
    
            // 将Toolbar加入到ActionBar
            setSupportActionBar(toolbar);
            // 不显示导航图标
            getSupportActionBar().setDisplayHomeAsUpEnabled(false);
            /*// 不显示标题
            getSupportActionBar().setDisplayShowTitleEnabled(false);*/
            // 重新设置标题覆盖之前的
            getSupportActionBar().setTitle("newTitle");
        }
    
        private void initView() {
            toolbar = (Toolbar) findViewById(R.id.toolBar);
        }
    
        private void setToolbar() {
            // 设置标题
            toolbar.setTitle(R.string.title_text);
            // 设置子标题
            toolbar.setSubtitle(R.string.subtitle_text);
            // 设置导航图标
            toolbar.setNavigationIcon(R.mipmap.ic_launcher);
            // 设置导航点击事件监听器
            toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "Navigation", Toast.LENGTH_SHORT).show();
                }
            });
    
            // 将Toolbar加入到ActionBar后这些菜单设置就无效了
            /*// 加载菜单
            toolbar.inflateMenu(R.menu.menu_main);
            // 设置点击菜单条目监听器
            toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
                    return true;
                }
            });*/
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.menu_main,menu);
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
            return super.onOptionsItemSelected(item);
        }
    }
    

    填坑

    单独使用Toolbar屏蔽掉ActionBar

    如果Activity继承的是AppCompatActivity

    supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
    
    换掉原有主题的黑色ActionButton

    1)
    Toolbar一般是使用如下主题

    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    

    2)修改一下主题

    <!--在原有的主题上加上ActionButton替换-->
    <style name="Theme.ToolBar.ZhiHu" parent="ThemeOverlay.AppCompat.Light">
        <item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.ZhiHu</item>
    </style>
    <!--知乎Toolbar的ActionButton替换-->
    <style name="ActionButton.Overflow.ZhiHu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
        <item name="android:src">@mipmap/ic_list1</item>
    </style>
    

    替换成ic_list1图标
    3)为Toolbar添加上修改后的主题

    <android.support.v7.widget.Toolbar
        android:id="@+id/t_title"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/Theme.ToolBar.ZhiHu"
        app:navigationIcon="@mipmap/ic_list"
        app:title="首页"
        app:titleTextColor="#ecf0f1"/>
    

    注意:

    android:theme="@style/Theme.ToolBar.ZhiHu"
    
    与ActionBar结合使用
    // 将Toolbar加入到ActionBar 
    setSupportActionBar(toolbar);
    

    1)

    tTitle.inflateMenu(R.menu.home_menu);
    // 设置点击Toolbar的Item的监听器
    tTitle.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            ToastUtil.showToast(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT);
            return true;
        }
    });
    

    Toolbar的Menu设置将失效,采用OptionsMenu替代。

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.home_menu, menu);
        return true;
    }
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        ToastUtil.showToast(this, item.getTitle(), Toast.LENGTH_SHORT);
        return super.onOptionsItemSelected(item);
    }
    

    2)Toolbar的设置要在加入ActionBar之后,否则有可能失效。

    // 设置点击Toolbar导航图标的监听器
    tTitle.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 打开抽屉导航栏
            dlLayout.openDrawer(nvLeft);
        }
    });
    

    参考

    Android开发:最详细的 Toolbar 开发实践总结

    相关文章

      网友评论

          本文标题:ToolBar的使用实践

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