• 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图标的需求,根据具体需求选择最方便的一种

  • 相关阅读:
    Quick Start WCF 4.0 RESTful Service Setup
    (面向c#开发人员) 编写javascript的好习惯六 for 表达式
    复习HTTP 14.4 HTTP Header AcceptLanguage
    visual studio 2010 中的 javascript 智能提示
    NewSlot and ReuseSlot
    复习HTTP 14.1 HTTP Header Accept (RFC 2616)
    (面向c#开发人员) 编写javascript的好习惯九 匿名自执行函数
    JQuery Template Engine 简介 1
    jquery 教程
    微博划词转发
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/7530930.html
Copyright © 2020-2023  润新知