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

家资是何物，积帙列梁梠。这篇文章主要讲述商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar 相关的知识，希望能为你提供帮助。
本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
上一篇文章《商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)》中已经对 Toolbar 的一些基本属性以及简单使用做了介绍了，这篇文章就开始介绍如何定义属于自己的 Style 的 Toolbar 了。
自定义 Theme
修改 application 的 style —— AppTheme，自己设置 Toolbar 的背景色以及状态栏的颜色，并且设置 windowActionBar 为 false。

1 < !-- Base application theme. --> 2 < style name="AppTheme" parent="Theme.AppCompat"> 3< item name="colorPrimary"> @color/colorPrimary< /item> 4< item name="colorPrimaryDark"> @color/colorPrimary< /item> 5< item name="android:windowActionBar"> false< /item> 6< item name="android:windowNoTitle"> true< /item> 7< item name="windowActionBar"> false< /item> 8< item name="windowNoTitle"> true< /item> 9 < /style>

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

1 < RelativeLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="wrap_content"> 5 < EditText 6android:id="@+id/toolbar_searchview" 7android:layout_width="match_parent" 8android:layout_height="wrap_content" 9android:layout_gravity="center" 10android:layout_centerVertical="true" 11android:gravity="center" 12android:drawableLeft="@mipmap/icon_search" 13style="@style/search_view" 14android:hint="请输入搜索内容" 15android:visibility="gone" 16/> 17 18 < TextView 19android:id="@+id/toolbar_title" 20android:layout_width="wrap_content" 21android:layout_height="wrap_content" 22android:layout_centerInParent="true" 23android:layout_gravity="center" 24android:gravity="center" 25android:textColor="@color/white" 26android:textSize="20sp" 27android:visibility="gone" 28/> 29 30 < Button 31android:id="@+id/toolbar_rightButton" 32android:layout_width="wrap_content" 33android:layout_height="wrap_content" 34android:layout_alignParentRight="true" 35android:layout_centerVertical="true" 36android:textColor="@color/white" 37android:visibility="gone" 38style="@android:style/Widget.Material.Toolbar.Button.Navigation" 39/> < /RelativeLayout>

布局文件的定义好之后就可以开始定义 Toolbar 了。
自定义 Toolbar
1. 扩展 Toolbar 的属性自定义的 Toolbar 中需要一些自定义的属性，将自己需要自定义的属性需要定义在 attrs.xml 文件中，首先要新建 attrs.xml 文件，然后定义所需的属性。

1 < declare-styleable name="CNiaoToolBar"> 2< attr name="rightButtonIcon" format="reference"/> 3< attr name="isShowSearchView" format="boolean"/> 4< attr name="rightButtonText" format="string"/> 5 < /declare-styleable>

2. 定义 Toolbar新建 class 文件继承于 Toolbar，命名为 CNiaoToolbar。
首先添加布局并且定义好布局控件。

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

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

1 if(attrs !=null) { 2final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs, 3R.styleable.CNiaoToolBar, defStyleAttr, 0); 4final Drawable rightIcon = a.getDrawable(R.styleable.CNiaoToolBar_rightButtonIcon); 5if (rightIcon != null) { 6//setNavigationIcon(navIcon); 7setRightButtonIcon(rightIcon); 8} 9boolean isShowSearchView = a.getBoolean(R.styleable.CNiaoToolBar_isShowSearchView,false); 10if(isShowSearchView){ 11showSearchView(); 12hideTitleView(); 13} 14CharSequence rightButtonText = a.getText(R.styleable.CNiaoToolBar_rightButtonText); 15if(rightButtonText !=null){ 16setRightButtonText(rightButtonText); 17} 18a.recycle(); 19}

【商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar】对于 Toolbar 中控件的样式设置以及监听都可以定义，比如对右侧按钮的事件监听。

1 publicvoid setRightButtonOnClickListener(OnClickListener li) { 2 3mRightButton.setOnClickListener(li); 4 5 }

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

1 < com.liuting.cniao_shop.widget.CNiaoToolbar 2android:id="@id/toolbar" 3android:layout_width="match_parent" 4android:layout_height="wrap_content" 5android:background="?attr/colorPrimary" 6android:minHeight="?attr/actionBarSize" 7app:isShowSearchView="true" />

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