商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)

本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。

上一篇文章《商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)》中已经对 Toolbar 的一些基本属性以及简单使用做了介绍了，这篇文章就开始介绍如何定义属于自己的 Style 的 Toolbar 了。

自定义 Theme

修改 application 的 style —— AppTheme，自己设置 Toolbar 的背景色以及状态栏的颜色，并且设置 windowActionBar 为 false。

自定义 Toolbar 布局

在res文件下面新建 Toolbar 的布局文件 toolbar.xml，在布局文件中我们需要定义一个搜索框、标题以及一个右侧按钮。具体代码如下。

布局文件的定义好之后就可以开始定义 Toolbar 了。

自定义 Toolbar

1. 扩展 Toolbar 的属性

自定义的 Toolbar 中需要一些自定义的属性，将自己需要自定义的属性需要定义在 attrs.xml 文件中，首先要新建 attrs.xml 文件，然后定义所需的属性。

2. 定义 Toolbar

新建 class 文件继承于 Toolbar，命名为 CNiaoToolbar。

首先添加布局并且定义好布局控件。

 mInflater = LayoutInflater.from(getContext());
 mView = mInflater.inflate(R.layout.toolbar, null);
 mTextTitle = (TextView) mView.findViewById(R.id.toolbar_title);
 mSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);
 mRightButton = (Button) mView.findViewById(R.id.toolbar_rightButton);
 LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
 addView(mView, lp);

然后就是获取属性，根据属性值对 Toolbar 的样式和内容进行设置和显示。

if(attrs !=null) {
        final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
                R.styleable.CNiaoToolBar, defStyleAttr, 0);
        final Drawable rightIcon = a.getDrawable(R.styleable.CNiaoToolBar_rightButtonIcon);
        if (rightIcon != null) {
            //setNavigationIcon(navIcon);
            setRightButtonIcon(rightIcon);
        }
        boolean isShowSearchView = a.getBoolean(R.styleable.CNiaoToolBar_isShowSearchView,false);
        if(isShowSearchView){
            showSearchView();
            hideTitleView();
        }
        CharSequence rightButtonText = a.getText(R.styleable.CNiaoToolBar_rightButtonText);
        if(rightButtonText !=null){
            setRightButtonText(rightButtonText);
        }
        a.recycle();
    }

对于 Toolbar 中控件的样式设置以及监听都可以定义，比如对右侧按钮的事件监听。

public  void setRightButtonOnClickListener(OnClickListener li){
    mRightButton.setOnClickListener(li);
}

3. 调用 Toolbar

在布局文件 layout 中可以直接调用自定义的 Toolbar。

最终效果

运行代码，获得最终的效果图。