本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
上一篇文章《商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)》中已经对 Toolbar 的一些基本属性以及简单使用做了介绍了,这篇文章就开始介绍如何定义属于自己的 Style 的 Toolbar 了。
修改 application 的 style —— AppTheme,自己设置 Toolbar 的背景色以及状态栏的颜色,并且设置 windowActionBar 为 false。
在res文件下面新建 Toolbar 的布局文件 toolbar.xml,在布局文件中我们需要定义一个搜索框、标题以及一个右侧按钮。具体代码如下。
布局文件的定义好之后就可以开始定义 Toolbar 了。
自定义的 Toolbar 中需要一些自定义的属性,将自己需要自定义的属性需要定义在 attrs.xml 文件中,首先要新建 attrs.xml 文件,然后定义所需的属性。
新建 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);
}
在布局文件 layout 中可以直接调用自定义的 Toolbar。
运行代码,获得最终的效果图。