文档章节

Android ToolBar 的简单封装

丁佳辉
 丁佳辉
发布于 2015/09/24 09:32
字数 1343
阅读 560
收藏 5

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <android.support.v7.widget.Toolbar
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:id="@+id/id_tool_bar"
        android:background="?attr/colorPrimary"
        app:navigationIcon="?attr/homeAsUpIndicator"
        >
    </android.support.v7.widget.Toolbar>
    <TextView
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="asdfasf"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>

同理其他 Activity 中需要用页都需要在 xml添加

<android.support.v7.widget.Toolbar
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:id="@+id/id_tool_bar"
        android:background="?attr/colorPrimary"
        app:navigationIcon="?attr/homeAsUpIndicator"
        >
 </android.support.v7.widget.Toolbar>

这样一段代码,虽然不多,但是我们最烦的就是写重复代码,也不符合我们的编程思想;所以就有了以下写法

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <include layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        />
    <TextView        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="asdfasf"
        android:layout_alignParentBottom="true"/></RelativeLayout>

toolbar.xml的代码如下

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:id="@+id/id_tool_bar"
        android:background="?attr/colorPrimary"
        app:navigationIcon="?attr/homeAsUpIndicator"
        >
    </android.support.v7.widget.Toolbar></FrameLayout>

这样我们只需要在每个我们要使用 toolbar 的 xml 中通过 include 嵌入 toolbar.xml布局就行,感觉和之前的比,确实是少了几行代码!但是意义不大。而我这里要实现的封装,是可以不需要在 xml 中写一行关于 toolbar 的代码,也就是跟平时不用 toolbar 一样的写法即可!请接着往下看。 
前提是准备好toolbar.xml,ToolBarActivity.java,ToolBarHelper.java 
toolbar.xml中配置 toolbar 的基本属性: 
toolbar 的宽高,toolbar 的背景颜色等其他样式 
ToolBarActivity.java是所以需要使用 toolbar Activity 的父类,这里我把他定义为抽象类,因为单独的这个类不能完成任何功能 
ToolBarHelper.java 是 Activity 和 toolbar 的关联类

先来看 toolbar.xml的代码

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar        设置高度为 ActionBar 的高度        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:id="@+id/id_tool_bar"
        背景颜色为 ActionBar 的背景颜色        android:background="?attr/colorPrimary"
        返回按钮的图标        app:navigationIcon="?attr/homeAsUpIndicator"
        >
    </android.support.v7.widget.Toolbar></FrameLayout>

ToolBarActivity.java的内容:主要代码是在setContentView(int id) 实现

package toolbar.toolbar;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.MenuItem;/**
 * Created by moon.zhong on 2015/6/12.
 * time : 10:26
 */public abstract class ToolBarActivity extends AppCompatActivity {
    private ToolBarHelper mToolBarHelper ;    public Toolbar toolbar ;    @Override
    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);
    }    @Override
    public void setContentView(int layoutResID) {

        mToolBarHelper = new ToolBarHelper(this,layoutResID) ;
        toolbar = mToolBarHelper.getToolBar() ;
        setContentView(mToolBarHelper.getContentView());        /*把 toolbar 设置到Activity 中*/
        setSupportActionBar(toolbar);        /*自定义的一些操作*/
        onCreateCustomToolBar(toolbar) ;
    }    public void onCreateCustomToolBar(Toolbar toolbar){
        toolbar.setContentInsetsRelative(0,0);
    }    @Override
    public boolean onOptionsItemSelected(MenuItem item) {        if (item.getItemId() == android.R.id.home){
            finish();            return true ;
        }        return super.onOptionsItemSelected(item);
    }
}

ToolBarHelper.java 
这个类的功能是:先创建一个 ViewGroup 来作为视图的父 View,把用户定义的 View,和 toolBar 依次 Add 到 ViewGroup 中;

package toolbar.toolbar;import android.content.Context;import android.content.res.TypedArray;import android.support.v7.widget.Toolbar;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.FrameLayout;/**
 * Created by moon.zhong on 2015/6/12.
 * time : 10:45
 */public class ToolBarHelper {

    /*上下文,创建view的时候需要用到*/
    private Context mContext;    /*base view*/
    private FrameLayout mContentView;    /*用户定义的view*/
    private View mUserView;    /*toolbar*/
    private Toolbar mToolBar;    /*视图构造器*/
    private LayoutInflater mInflater;    /*
    * 两个属性
    * 1、toolbar是否悬浮在窗口之上
    * 2、toolbar的高度获取
    * */
    private static int[] ATTRS = {
            R.attr.windowActionBarOverlay,
            R.attr.actionBarSize
    };    public ToolBarHelper(Context context, int layoutId) {        this.mContext = context;
        mInflater = LayoutInflater.from(mContext);        /*初始化整个内容*/
        initContentView();        /*初始化用户定义的布局*/
        initUserView(layoutId);        /*初始化toolbar*/
        initToolBar();
    }    private void initContentView() {        /*直接创建一个帧布局,作为视图容器的父容器*/
        mContentView = new FrameLayout(mContext);
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);
        mContentView.setLayoutParams(params);

    }    private void initToolBar() {        /*通过inflater获取toolbar的布局文件*/
        View toolbar = mInflater.inflate(R.layout.toolbar, mContentView);
        mToolBar = (Toolbar) toolbar.findViewById(R.id.id_tool_bar);
    }    private void initUserView(int id) {
        mUserView = mInflater.inflate(id, null);
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        TypedArray typedArray = mContext.getTheme().obtainStyledAttributes(ATTRS);        /*获取主题中定义的悬浮标志*/
        boolean overly = typedArray.getBoolean(0, false);        /*获取主题中定义的toolbar的高度*/
        int toolBarSize = (int) typedArray.getDimension(1,(int) mContext.getResources().getDimension(R.dimen.abc_action_bar_default_height_material));
        typedArray.recycle();        /*如果是悬浮状态,则不需要设置间距*/
        params.topMargin = overly ? 0 : toolBarSize;
        mContentView.addView(mUserView, params);

    }    public FrameLayout getContentView() {        return mContentView;
    }    public Toolbar getToolBar() {        return mToolBar;
    }
}

到这里,toolbar 的简单封装就算完成了,一起来看看封装之后的效果吧

MainActivity.java

package toolbar.toolbar;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;public class MainActivity extends ToolBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }    @Override
    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);       return true;
    }

}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">
    <TextView        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="asdfasf"
        android:layout_alignParentBottom="true"/></RelativeLayout>

到这里我们不管是 MainActivity 还是 activity_main中都没有出现 ToolBar,只是 MainActivity 不再继承 AppCompatActivity,而是继承我们 ToolBarActivity,运行效果看看: 

ToolBar 的其他用法这里就不讲了,跟 ActionBar 用法几乎一样,

最后: 
在使用 ToolBar 的时候,需要使用无 ActionBar 的主题,

    <!-- Base application theme. -->
    <style name="AppThemeParent" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@android:color/holo_red_light</item>

    </style>

再上一张自定义 View 的 ToolBar 效果图: 
标题居中,右侧可以添加按钮 

源码下载


© 著作权归作者所有

共有 人打赏支持
丁佳辉
粉丝 19
博文 412
码字总数 197400
作品 0
浦东
程序员
私信 提问
我一行代码都不写实现Toolbar!你却还在封装BaseActivity?

原文地址: http://www.jianshu.com/p/75a5c24174b2 qq群:301733278 前言 距离 上篇文章 的发表时间已经过去两个多月了,这两个月时间里我没写文章但一直在更新着我的 MVPArms 框架,让他逐渐朝...

JessYan
2017/05/07
0
0
【React Native开发】React Native控件之ToolbarAndroid工具栏控件讲解以及使用(15)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jiangqq781931404/article/details/50612786 return ( )},onActionSelected:function(position) {if (positio......

江清清
2016/01/30
0
0
基于 MVP 架构使用Android通用开发框架快速开发微博项目实战

课程目标: 基于 MVP 架构使用Android通用开发框架快速开发微博项目实战 适应人群: 适合大学生和初中级android开发工程师,可以系统化的微博类APP的开发,系统化掌握商业化项目的开发。* 不...

13122542396
05/25
0
0
解决android:background背景图片被拉伸问题

ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸。src是图片内容(前景),bg是背景,可以同时使用...

JayPark不作死
2014/09/29
0
0
declare-styleable:自定义控件的属性

做Android布局是件很享受的事,这得益于他良好的xml方式。使用xml可以快速有效的为软件定义界面。可是有时候我们总感觉官方定义的一些基本组件不够用,自定义组件就不可避免了。那么如何才能...

Jonson
2015/01/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用any-loader封装jQuery的XHR —— 随便写着玩系列

哎,都说没人用JQuery啦,叫你别写这个。 其实我也是好高骛远使用过npm上某个和某个很出名的XHR库,嗯,认识我的人都知道我喜欢喷JQ,以前天天喷,见面第一句,你还用JQ,赶紧丢了吧。但我也...

曾建凯
今天
4
0
聊聊storm的AggregateProcessor的execute及finishBatch方法

序 本文主要研究一下storm的AggregateProcessor的execute及finishBatch方法 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout......

go4it
今天
3
0
大数据教程(7.5)hadoop中内置rpc框架的使用教程

博主上一篇博客分享了hadoop客户端java API的使用,本章节带领小伙伴们一起来体验下hadoop的内置rpc框架。首先,由于hadoop的内置rpc框架的设计目的是为了内部的组件提供rpc访问的功能,并不...

em_aaron
今天
5
0
CentOS7+git+github创建Python开发环境

1.准备CentOS7 (1)下载VMware Workstation https://pan.baidu.com/s/1miFU8mk (2)下载CentOS7镜像 https://mirrors.aliyun.com/centos/ (3)安装CentOS7系统 http://blog.51cto.com/fengyuns......

枫叶云
昨天
3
0
利用ibeetl 实现selectpicker 的三级联动

1. js 直接写在html页面上面,ibeetl 就可以动态地利用后台传上来的model List ,不需要每次点击都要ajax请求后台 2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还需要 $("#...

donald121
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部