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

Posted 2020-09-13

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

上一篇文章《商城项目实战 | 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
 6     android:id="@+id/toolbar_searchview"
 7     android:layout_width="match_parent"
 8     android:layout_height="wrap_content"
 9     android:layout_gravity="center"
10     android:layout_centerVertical="true"
11     android:gravity="center"
12     android:drawableLeft="@mipmap/icon_search"
13     style="@style/search_view"
14     android:hint="请输入搜索内容"
15     android:visibility="gone"
16     />
17 
18 <TextView
19     android:id="@+id/toolbar_title"
20     android:layout_width="wrap_content"
21     android:layout_height="wrap_content"
22     android:layout_centerInParent="true"
23     android:layout_gravity="center"
24     android:gravity="center"
25     android:textColor="@color/white"
26     android:textSize="20sp"
27     android:visibility="gone"
28     />
29 
30 <Button
31     android:id="@+id/toolbar_rightButton"
32     android:layout_width="wrap_content"
33     android:layout_height="wrap_content"
34     android:layout_alignParentRight="true"
35     android:layout_centerVertical="true"
36     android:textColor="@color/white"
37     android:visibility="gone"
38     style="@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());
2  mView = mInflater.inflate(R.layout.toolbar, null);
3  mTextTitle = (TextView) mView.findViewById(R.id.toolbar_title);
4  mSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);
5  mRightButton = (Button) mView.findViewById(R.id.toolbar_rightButton);
6  LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
7  addView(mView, lp);

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

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

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

 

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

3. 调用 Toolbar

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

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

最终效果

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