android 仿京东toolbar,仿京东商城系列2------自定义toolbar
前言
这篇文章，我们来介绍一个自定义toolbar(建造自己的轮子，才能跑得更快)，废话少说。上效果
toolbar
内容
1.建立自己的toolbar，首先你需要一个布局。老规矩先上代码！
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar_view"
android:background="@color/red">
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:textColor="@color/white"
android:id="@+id/tb_title"
android:text="测试数据"
android:textSize="20sp"
android:visibility="gone"
android:layout_centerVertical="true"
/>
android:id="@+id/tb_Search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:layout_marginRight="30dp"
android:hint="请输入搜索的商品"
android:textColorHint="@color/white"
android:textColor="@color/white"
android:drawableLeft="@android:drawable/ic_menu_search"
android:visibility="gone"
android:layout_centerVertical="true"
/>
android:id="@+id/tb_right_button"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:paddingRight="20dp"
android:textSize="15sp"
android:gravity="center_vertical|right"
android:textColor="@color/white"
android:text="编辑"
android:background="?attr/colorPrimary"
android:visibility="gone"
/>
android:id="@+id/tb_right_imagebutton"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:gravity="center_vertical|right"
android:textColor="@color/white"
android:background="?attr/colorPrimary"
android:src="@drawable/icon_grid_32"
android:paddingRight="10dp"
android:visibility="gone"
/>
android:id="@+id/tb_left_ImageButton"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_gravity="center"
android:paddingLeft="10dp"
android:background="?attr/colorPrimary"
android:layout_centerVertical="true"
android:src="@drawable/icon_back_32px"
android:visibility="gone"
/>
android:paddingTop="20dp"
android:paddingBottom="5dp"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:visibility="gone"
android:id="@+id/tb_user_photo"/>
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tb_user_name"
android:layout_centerHorizontal="false"
android:layout_below="@+id/tb_user_photo"
android:textColor="@color/white"
android:gravity="center_horizontal|center_vertical"
android:text="点击登录"
android:visibility="gone"
android:paddingBottom="10dp"/>
这里我采用了RelativeLayout布局，利用控件的android:visibility属性控制控件的显示和隐藏。以达到适应各种要求的目的.
2.建立自定义属性 代码代码：
在value文件夹下，新建attrs文件。添加如下代码。
上述代码定义了一些自定义属性，这些属性将会在后续得到使用。
3.自定义控件的建立以及自定义属性的读取
public class CnToolbar extends Toolbar {
private LayoutInflater inflater ;
private View mView ;
private TextView mTextTitle ;
private Button mRightButton ;
private ImageButton mLeftImageButton ;
private EditText mSearchView ;
private ImageButton mRightImageButton ;
private ImageView userPhoto ;
private TextView userName ;
private TintTypedArray b ;
public CnToolbar(Context context) {
this(context , null);
}
public CnToolbar(Context context, @Nullable AttributeSet attrs) {
this(context, attrs , 0);
}
public CnToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
b = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.CnToolbar, defStyleAttr, 0);
initView() ;
if(getIsShowSearchView()){
showSearchView();
return;
}
setRightButton(attrs, defStyleAttr) ;
setLeftButton(attrs , defStyleAttr) ;
setRightImageButton(attrs ,defStyleAttr );
setUserName(attrs , defStyleAttr);
setUserPhoto(attrs , defStyleAttr);
b.recycle();
}
//将mview布局加入toolBar中
private void initView() {
if (mView == null) {
inflater = LayoutInflater.from(this.getContext());
mView = inflater.inflate(R.layout.cntoolbar_view, null);
mSearchView = (EditText) mView.findViewById(R.id.tb_Search_view);
mTextTitle = (TextView) mView.findViewById(R.id.tb_title);
mRightButton = (Button) mView.findViewById(R.id.tb_right_button);
mLeftImageButton = (ImageButton) mView.findViewById(R.id.tb_left_ImageButton) ;
mRightImageButton = (ImageButton) mView.findViewById(R.id.tb_right_imagebutton) ;
userPhoto = (ImageView) mView.findViewById(R.id.tb_user_photo) ;
userName = (TextView) mView.findViewById(R.id.tb_user_name) ;
mSearchView.setSelected(false);
mSearchView.setClickable(false);
LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
this.addView(mView, lp);
}
}
@Override
public void setTitle(@StringRes int resId) {
setTitle(getContext().getText(resId));
}
@Override
public void setTitle(CharSequence title) {
initView();
if(title != null){
if(mTextTitle == null){
mTextTitle = (TextView) mView.findViewById(R.id.tab_title);
}
mTextTitle.setText(title);
mTextTitle.setVisibility(VISIBLE);
mTextTitle.setSelected(false);
mTextTitle.setFocusable(false);
}
}
private void setUserName(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final String rightIcon = b.getString( R.styleable.CnToolbar_userName );
if (rightIcon != null && rightIcon.length()>0) {
setUserNameText(rightIcon);
}
}
}
public void setUserNameText(String s){
userName.setText(s);
userName.setVisibility(VISIBLE);
userName.setEnabled(true);
}
private void setUserPhoto(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final Drawable leftIcon = b.getDrawable(R.styleable.CnToolbar_userPhotoIcon);
if (leftIcon != null) {
setUserPhotoIcon(leftIcon);
}
}
}
public void setUserClickable(boolean enable){
userPhoto.setClickable(enable);
}
private void setUserPhotoIcon(Drawable drawable) {
if( drawable != null ){
userPhoto.setImageDrawable(drawable);
userPhoto.setVisibility(VISIBLE);
userPhoto.setEnabled(true);
}
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void setUserPhotoIcon(Context context , String resId , int defResId){
if( resId != null && resId.length() > 0){
Glide.with(context).load(resId).transform(new GlideCircleTransform(context)).into(this.userPhoto);
}else {
setUserPhotoIcon(context , defResId) ;
}
userPhoto.setVisibility(VISIBLE);
userPhoto.setEnabled(true);
}
public void setUserPhotoIcon(Context context , int resId){
Glide.with(context).load(resId).transform(new GlideCircleTransform(context)).into(this.userPhoto);
userPhoto.setVisibility(VISIBLE);
userPhoto.setEnabled(true);
}
public void setUserPhotoClickListener (OnClickListener listener) {
userPhoto.setOnClickListener(listener);
}
public void setRightButton(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final String rightIcon = b.getString( R.styleable.CnToolbar_rightButtonText );
if (rightIcon != null && rightIcon.length()>0) {
setRightButtonText(rightIcon);
}
}
}
public void setRightButtonText (String s) {
Log.d("----" , "----------------s---------------" + s) ;
mRightButton.setText(s);
mRightButton.setVisibility(VISIBLE);
mRightButton.setEnabled(true);
}
public void setRightButtonIcOnClickListener (OnClickListener listener) {
mRightButton.setOnClickListener(listener);
}
public void setLeftButton(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final Drawable leftIcon = b.getDrawable(R.styleable.CnToolbar_leftButtonIcon);
if (leftIcon != null) {
setLeftButtonIcon(leftIcon);
}
}
}
public void setLeftButtonIcon (Drawable drawable) {
if( drawable != null ){
mLeftImageButton.setImageDrawable(drawable);
mLeftImageButton.setVisibility(VISIBLE);
userPhoto.setVisibility(GONE);
userName.setVisibility(GONE);
mLeftImageButton.setEnabled(true);
}
}
public void setLeftButtonIcOnClickListener (OnClickListener listener) {
mLeftImageButton.setOnClickListener(listener);
}
public void setRightImageButton(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final Drawable rightImage = b.getDrawable(R.styleable.CnToolbar_rightImageButtonIcon);
if (rightImage != null) {
setRightButtonIcon(rightImage);
}
}
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void setRightButtonIcon(int resId){
this.setRightButtonIcon(getResources().getDrawable(resId , null));
}
public void setRightButtonIcon (Drawable drawable) {
if( drawable != null ){
mRightImageButton.setImageDrawable(drawable);
mRightImageButton.setVisibility(VISIBLE);
mRightImageButton.setEnabled(true);
}
}
public void setRightImgeButtonIcOnClickListener (OnClickListener listener) {
mRightImageButton.setOnClickListener(listener);
}
public boolean getIsShowSearchView(){
final boolean isShowSearchView = b.getBoolean(R.styleable.CnToolbar_isShowSearchView , false) ;
return isShowSearchView ;
}
public void showSearchView(){
mRightButton.setVisibility(GONE);
mLeftImageButton.setVisibility(GONE);
mTextTitle.setVisibility(GONE);
mSearchView.setVisibility(VISIBLE);
}
public void notShowSearchView(){
mRightButton.setVisibility(VISIBLE);
mLeftImageButton.setVisibility(VISIBLE);
mTextTitle.setVisibility(VISIBLE);
mSearchView.setVisibility(GONE);
}
public void setSearchViewOnClicklistener( OnClickListener listener ){
mSearchView.setOnClickListener(listener);
}
}
代码有些长。大概操作分为以下几步：
继承ToolBar类，重写构造方法。
得到一个TintTypedArray 对象，通过b = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.CnToolbar, defStyleAttr, 0)获得。其中R.styleable.CnToolbar为你自定义的类型。使用完后通过b.recycle()进行回收。
随后可以获得自定义的属性值，对之前自定义的view进行数据填充和设置，设置完毕后。使用 this.addView(mView, lp);
将View添加入toolbar中。
使用自定义ToolBar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:minWidth="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="分类"
android:titleTextColor="@color/white"
app:isShowSearchView="false"
>
注意，自定义属性要使用app:引用。
求助：
我在使用时，会遇到toolbar在不设置右按钮，不显示操作框时，显示长度会跟随下方text框的内容长度。求大神解答。
android 仿京东toolbar,仿京东商城系列2------自定义toolbar相关推荐
- Android仿淘宝、京东Banner滑动查看图文详情
文章目录 写在前面 效果图 原理分析 核心代码 源码地址 写在前面 本文基于 ViewPager2 实现的 Banner 效果,进而实现了仿淘宝.京东Banner滑动至最后一页时继续滑动来查看图文详情 ...
- 微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）
分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例 下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文 微信小程 ...
- 微信小程序开源源码，仿淘宝、京东、今日头条等
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- Android应用源码仿暴风影音安卓客户端源码
Android应用源码仿暴风影音安卓客户端源码 本项目是一个模仿暴风影音的UI项目源码,仿照的界面有菜单页,主页,分类页等,项目内的所有数据都使用的本地模拟数据,仿照度一般在大分辨设备上布局显示会有问 ...
- android sdk build-tools_从零开始仿写一个抖音App——视频编辑SDK开发(一)
本文首发于微信公众号--世界上有意思的事,搬运转载请注明出处,否则将追究版权责任.交流qq群:859640274. 大家好久不见,又有一个多月没有发文章了.不知道还有哪些读者记得我的 从零开始仿写抖音 ...
- 【Android】RecycleView简单仿漫画APP图片相关样式
真的真的想不到起什么标题好了,这次的内容真的是太简单了,没有什么挑战性,一天以内就完成了.最近在学kotlin,也会有一份kotlin的代码,鉴于很多人都是从java开始进行android开发的,ko ...
- android仿疯狂猜图源码,Android开发实现高仿优酷的客户端图片左右滑动切换功能实例【附源码下载】...
本文实例讲述了Android开发实现高仿优酷的客户端图片左右滑动切换功能.分享给大家供大家参考,具体如下: 本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和 ...
- Java项目:仿小米电子产品售卖商城系统(java+SpringBoot+Vue+MySQL+Redis+ElementUI)
源码获取:博客首页 "资源" 里下载! 项目描述:这是一个基于SpringBoot+Vue框架开发的仿小米电子产品售卖商城系统.首先,这是一个前后端分离的项目,代码简洁规范,注释说 ...
- 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框
上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...
最新文章
- 12,缓冲运动。匀速运动停止条件
- 原生YII2 增删改查的一些操作（非ActiveRecord）
- 如何强制除法为浮点数？ 除数一直舍入到0？
- python做电脑软件-作为一个Python程序员，电脑上应该具备哪些软件？
- 在linux学习中遇到的问题
- 【STM32】待机唤醒程序示例
- 史上最全Redis总结，你想知道的都在这里啦
- 上海大学计算机获奖上央视新闻,央视获奖新闻照片竟是电脑合成
- NR接入过程中鉴权失败问题
- Hbase最新官方文档中文翻译与注解1-10|hbase简介与配置信息等
- 访问服务器本地端口/网址
- HCIA~以太网链路聚合与交换机堆叠、集群
- pikachu——验证码绕过(on client)python脚本解法
- 关于word页眉页码不连续，页脚页码连续的办法
- 我的世界服务器无限漏斗,我的世界漏斗bug 我的世界怎么刷东西
- java中abstract详解
- LinuX合成软件,Natron 0.92发布，视频合成软件
- php视频播放地址,视频网站播放地址获取方法
- MySQL的下载和配置
- oracle 8103错误,【数据恢复】详解ORA-8103错误
热门文章
- 风变编程的python课程怎么样-风变编程的Python这么火，零基础可以自学吗?
- python是什么编程教程-一个新手，什么编程都没学过怎么学好Python？
- python在线课程-《Python程序设计与应用》在线课程使用说明
- python编程从入门到精通pdf-终于晓得python编程从入门到精通
- python类装饰器详解-Python 装饰器详解
- python处理流程-python流程处理
- python处理流程-在python异步协程中处理流程分析(一)
- python的用途实例-Python基础之函数原理与应用实例详解
- python基础包括什么-Python基础教程 模块包含什么
- python菜鸟教程h-Python for 循环语句