Android ToolBar自定义图标,关联DrawerLayout

Android5.0出现了一个可以代替ActionBar的控件ToolBar,使用更加灵活,一般我们使用ToolBar来和DrawerLayout配合使用,官方提供了一个开关类ActionBarDrawerToggle,来实现ToolBar和DrawerLayout的关联,但是 有时根据我们的需求需要更改左侧的图标,不在需要系统默认的三条杠的图标同时点击图标还想要DrawerLayout的侧拉页面出来,下面讲解两种不同的方式 
一:通过代码来实现改变ToolBar的图标

public class TempActivity extends AppCompatActivity {
    ActionBarDrawerToggle toggle;
    private DrawerLayout mDrawerLayout;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.text_tool_bar);
        initToolBar();
    }
    private void initToolBar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        //设置图标
        toolbar.setNavigationIcon(R.drawable.ic_launcher);
        // 标题
        toolbar.setTitle("Title");

        //把ToolBar的设置的ActionBar的位置
        setSupportActionBar(toolbar);
        //获取开关同时让开关和DrawerLayout关联在一起
        toggle = new ActionBarDrawerToggle(this, mDrawerLayout, 0, 0);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //设置点击事件,点击弹出menu界面
        mDrawerLayout.setDrawerListener(toggle);
    }
    //覆写方法让系统判断点击的图标后是否弹出侧拉页面
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        toggle.onOptionsItemSelected(item);
        return super.onOptionsItemSelected(item);
    }
}

这样就把左侧的图标设置成了我们需要的图标,同时点击图标也可以弹出DrawerLayout的侧拉页面,但是注意:在以上的代码中少了一行代码toggle.syncState();作用是将左侧小图标和侧拉页面的状态同步,只有当去掉这一行代码的时候,这个方法自定义的图标才会显示

弊端:1.使用代码来放置图标没有XML灵活, 
2.这种方式不能给图标是指背景选择器

二:通过XML来实现自定义图标(好处是,可以灵活的放置控件在ToolBar的位置) 
使用XML来自定义图标也有两种方式 
方式1:在ToolBar的根节点设置属性

<android.support.v7.widget.Toolbar
        app:navigationIcon="@drawable/ic_add_follow"
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/holo_green_light">
 </android.support.v7.widget.Toolbar>

以上的布局中添加了app:navigationIcon=”@drawable/ic_add_follow” 这一行代码,用来展示图标,注意命名空间不一样 
同样在代码中和DrawerLayout关联覆写onOptionsItemSelected方法即可完成和侧拉页面的关联

public class TextActivity extends AppCompatActivity {
    private ActionBarDrawerToggle toggle;
    private ImageView toolBarIcon;
    private DrawerLayout mDrawerLayout;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.text_tool_bar);

        initToolBar();
    }
    private void initToolBar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        //不显示标题
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        //把开关和DrawerLayout关联
        toggle = new ActionBarDrawerToggle(this, mDrawerLayout, 0, 0);
    }
     //覆写方法让系统判断点击的图标后是否弹出侧拉页面
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                toggle.onOptionsItemSelected(item);
        }
        return super.onOptionsItemSelected(item);
     }

弊端:一:这种方式虽然可以在布局文件中来设置图标,但是无法给图标设置选择器 
二:由于是在ToolBar的根节点来设置图片,所以不能只当图片摆放的位置 
优点:直接在XML中指定图片,而且一行代码搞定

方式2:通过查看ToolBar发现它继承了ViewGroup,所以我们可以在ToolBar的里面来设置子控件来自定义图标 
布局:

<android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp"          android:background="@android:color/holo_green_light">
        <ImageView
            android:layout_gravity="left"
            android:id="@+id/tool_bar_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"                                                                                             android:background="@drawable/selector_infodetail_back_bg"/>
</android.support.v7.widget.Toolbar>

我们可以设置ImageView的layout_gravity的属性来指定图标的位置,同时可以给ImageView来设置背景选择器 
代码逻辑:

public class TextActivity extends AppCompatActivity {
    private ActionBarDrawerToggle toggle;
    private DrawerLayout mDrawerLayout;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.text_tool_bar);

        initToolBar();
    }
    private void initToolBar() {
        //找到图标的id
        ImageView  toolBarIcon = (ImageView) findViewById(R.id.tool_bar_icon);
        Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        //设置监听
        toolBarIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                toggle();
            }
        });
    }

}
private void toggle() {
        int drawerLockMode = mDrawerLayout.getDrawerLockMode(GravityCompat.START);
        if (mDrawerLayout.isDrawerVisible(GravityCompat.START)
                && (drawerLockMode != DrawerLayout.LOCK_MODE_LOCKED_OPEN)) {
            mDrawerLayout.closeDrawer(GravityCompat.START);
        } else if (drawerLockMode != DrawerLayout.LOCK_MODE_LOCKED_CLOSED) {
            mDrawerLayout.openDrawer(GravityCompat.START);
        }
    }

通过这种方式设置的图标就不能通过覆写onOptionsItemSelected方法的方式来实现侧拉页面的打开和关闭了,因为图标的id已经不是android.R.id.home,所以只能写监听事件来完成侧拉页面的打开和关闭。

通过查看onOptionsItemSelected的源码发现系统内部实现方式最终调用的是toggle方法,但是这个方法是私有的我们不能通过对象调用到,发现这个方法中只用到了DrawerLayout的对象,所以就直接将这个方法拷贝到自己的类中来使用,完成了这个效果

弊端:XML中代码比较多 
优点:可以给图标设置状态选择器,图标的摆放位置比较灵活,还可以放其他的控件

以上几种方式都可以实现更改ToolBar图标的需求,根据具体需求选择最方便的一种

时间: 2024-10-25 13:19:22

Android ToolBar自定义图标,关联DrawerLayout的相关文章

Delphi 7使用自定义图标关联文件类型

Delphi 7使用自定义图标关联文件类型

android ToolBar与DrawerLayout笔记

通过Android Studio 生成的Nagvition DrawerLayout Activity 自带的布局中的NagvitionView会覆盖ToolBar直接通到statusBar. 但是自己想把NagvationView控制到TooBar下边,从网上找到的答案是把ToolBar从CoordinatorLayout里边移出来,然后 主布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearL

Android:自定义PopupMenu的样式(显示图标/设置RadioButton图标)

PopupMenu是Android中一个十分轻量级的组件.与PopupWindow相比,PopupMenu的可自定义的能力较小,但使用更加方便. 先上效果图: 本例要实现的功能如下: 1.强制显示菜单项的图标. 默认状态下,PopupMenu的图标是不显示的,并且Android没有为我们开放任何API去设置它的显示状态.为了显示菜单项的图标,可以自己重写PopupMenu并修改相关属性,也可以直接使用反射: try { Field field = popupMenu.getClass().get

Android开发app如何设定应用图标下的应用名称为汉字以及自定义图标

一.应用名称为汉字 二.自定义图标

Android ToolBar 的简单封装

使用过 ToolBar 的朋友肯定对其使用方法不陌生,因为其用法很简单,如果对 ActionBar 使用比较熟练的人来说,ToolBar 就更容易了!不过,相信大家在使用的过程中都遇到过这样一个问题,需要在每一个我们要使用的 xml 中添加 ToolBar 这个控件,比如我需要在 MainActivity中使用 ToolBar,则他的 xml 文件需要这样写, <RelativeLayout xmlns:android="http://schemas.android.com/apk/res

自定义ActionProvider ToolBar 自定义Menu小红点

自定义ActionProvider ToolBar 自定义Menu小红点 版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 今天的几个目标: 1. 自定义ActionProvider 2. Toolbar ActionBar自定义Menu 3. Toolbar ActionBar 右侧Menu添加角标(Toolbar ActionBar Menu添加小红点) 源代码在文章末尾. 效果预览 自定义Menu后不影响原生MD的任何效果

Android进阶——自定义View之自己绘制彩虹圆环调色板

引言 前面几篇文章都是关于通过继承系统View和组合现有View来实现自定义View的,刚好由于项目需要实现一个滑动切换LED彩灯颜色的功能,所以需要一个类似调色板的功能,随着手在调色板有效区域滑动,LED彩灯随即显示相应的颜色,也可以通过左右的按钮,按顺序切换显示一组颜色,同时都随着亮度的改变LED彩灯的亮度随即变化,这篇基本上把继承View重绘实现自定义控件的大部分知识总结了下(当然还有蛮多没有涉及到,比如说自适应布局等),源码在Github上 一.继承View绘制自定义控件的通用步骤 自定

【Android】Android实现自定义带文字和图片的Button

在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就是利用系统自带的Button来实现,这种方式代码量最小.在Button的属性中有一个是drawableLeft,这个属性可以把图片设置在文字的左边,但是这种方式必须让icon的背景色是透明的,如果icon的背景色不是透明的话,会导致点击按钮时icon部分的背景色不会发生变化. 主要代码: <Button android:id="@+id/bt3

Android UI- PullToRrefresh自定义下拉刷新动画

Android UI- PullToRrefresh自定义下拉刷新动画 如果觉得本文不错,麻烦投一票,2014年博客之星投票地址:http://vote.blog.csdn.net/blogstar2014/details?username=wwj_748#content 本篇博文要给大家分享的是如何使用修改开源项目PullToRrefresh下拉刷新的动画,来满足我们开发当中特定的需求,我们比较常见的一种下拉刷新样式可能是以下这种: 就是下拉列表的时候两个箭头上下翻转,更改日期文本和刷新状态,