商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)
来源:互联网 发布:与朋友交而不信乎的与 编辑:程序博客网 时间:2024/06/03 13:02
本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
上一篇文章《商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)》中已经对 Toolbar 的一些基本属性以及简单使用做了介绍了,这篇文章就开始介绍如何定义属于自己的 Style 的 Toolbar 了。
自定义 Theme
修改 application 的 style —— AppTheme,自己设置 Toolbar 的背景色以及状态栏的颜色,并且设置 windowActionBar 为 false。
<!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimary</item> <item name="android:windowActionBar">false</item> <item name="android:windowNoTitle">true</item> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item></style>
自定义 Toolbar 布局
在res文件下面新建 Toolbar 的布局文件 toolbar.xml,在布局文件中我们需要定义一个搜索框、标题以及一个右侧按钮。具体代码如下。
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="wrap_content"><EditText android:id="@+id/toolbar_searchview" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_centerVertical="true" android:gravity="center" android:drawableLeft="@mipmap/icon_search" style="@style/search_view" android:hint="请输入搜索内容" android:visibility="gone" /><TextView android:id="@+id/toolbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_gravity="center" android:gravity="center" android:textColor="@color/white" android:textSize="20sp" android:visibility="gone" /><Button android:id="@+id/toolbar_rightButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:textColor="@color/white" android:visibility="gone" style="@android:style/Widget.Material.Toolbar.Button.Navigation" /></RelativeLayout>
布局文件的定义好之后就可以开始定义 Toolbar 了。
自定义 Toolbar
1. 扩展 Toolbar 的属性
自定义的 Toolbar 中需要一些自定义的属性,将自己需要自定义的属性需要定义在 attrs.xml 文件中,首先要新建 attrs.xml 文件,然后定义所需的属性。
<declare-styleable name="CNiaoToolBar"> <attr name="rightButtonIcon" format="reference"/> <attr name="isShowSearchView" format="boolean"/> <attr name="rightButtonText" format="string"/></declare-styleable>
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。
<com.liuting.cniao_shop.widget.CNiaoToolbar android:id="@id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" app:isShowSearchView="true" />
最终效果
运行代码,获得最终的效果图。
1 0
- 商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)
- 商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)
- 商城项目实战 | 1.1 Android 仿京东商城底部布局的选择效果 —— Selector 选择器的实现
- android仿京东商城项目
- 商城项目实战
- web实战(二)— — 商城分类导航
- Android商城项目
- 实战项目商城(第一天)
- 实战项目商城(第二天)
- 实战项目商城(第三天)
- 实战项目商城(第四天)
- 实战项目商城(第五天)
- 实战项目商城(第六天)
- 实战项目商城(第七天)
- 实战项目商城(第八天)
- 商城项目实战28:内容管理
- 商城项目总结(二)
- 黑马商城项目(二)
- threejs系列教程
- C# MQ操作
- 深入浅出LinkedList与ArrayList
- 2018网易游戏校招笔试题
- (superpixel)超像素分割
- 商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)
- POJ 1755-Triathlon(半平面交-铁人三项)
- Greenplum gpdbrestore 全量恢复
- 区分 JSON 字符串与JSON对象
- 柱状图
- Android基础学习,使用Drawable资源之ClipDrawable资源,实现图片在特定位置展开。
- 探讨跨域请求资源的几种方式
- 获取Version 和 Build
- iOS开发-canOpenURL: failed for URL: "mqq://"