1.写toolbar的布局文件 ,toolbar.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:layout_height="45dp">
  6.  
  7. <android.support.v7.widget.AppCompatEditText
  8. android:id="@+id/toolbar_searchview"
  9. android:layout_width="match_parent"
  10. android:layout_height="wrap_content"
  11. android:layout_gravity="center"
  12. android:layout_centerVertical="true"
  13. android:imeOptions="actionSearch"
  14. android:singleLine="true"
  15. style="@style/search_view"
  16. android:drawablePadding="8dp"
  17. android:visibility="gone"
  18. />
  19.  
  20. <android.support.v7.widget.AppCompatTextView
  21. android:id="@+id/toolbar_title"
  22. android:layout_width="wrap_content"
  23. android:layout_height="wrap_content"
  24. android:layout_centerInParent="true"
  25. android:layout_gravity="center"
  26. android:gravity="center"
  27. android:textColor="@color/white"
  28. android:textSize="20sp"
  29. android:visibility="gone"
  30. />
  31.  
  32. <android.support.v7.widget.AppCompatImageView
  33. android:id="@+id/toolbar_rightImage"
  34. android:layout_width="wrap_content"
  35. android:layout_height="wrap_content"
  36. android:layout_alignParentRight="true"
  37. android:layout_centerVertical="true"
  38. android:textColor="@color/white"
  39. android:visibility="gone"
  40. />
  41. </RelativeLayout>

2.新建一个toolbar类,继承原生toolbar

  1. public class MyToolbar extends Toolbar {
  2.  
  3. private LayoutInflater mInflater;
  4.  
  5. private View mView;
  6. private TextView mTextTitle;
  7. private EditText mSearchView;
  8. private ImageView mRightImageView;
  9. private Drawable mEditTextSearchIcon;
  10.  
  11. public MyToolbar(Context context) {
  12. this(context,null);
  13. }
  14.  
  15. public MyToolbar(Context context, AttributeSet attrs) {
  16. this(context, attrs, );
  17. }
  18.  
  19. public MyToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
  20. super(context, attrs, defStyleAttr);
  21.  
  22. initView();
  23.  
  24. setContentInsetsRelative(,);
  25.  
  26. if(attrs!=null){
  27. TypedArray a= context.obtainStyledAttributes(attrs,R.styleable.MyToolbar);
  28. Drawable rightImageIcon = a.getDrawable(R.styleable.MyToolbar_rightImageIcon);
  29.  
  30. //获得右边的图标
  31. if(rightImageIcon!=null){
  32. setRightButtonIcon(rightImageIcon);
  33. }
  34. //获得搜索的图标
  35. Drawable searchIcon = a.getDrawable(R.styleable.MyToolbar_editTextSearchIcon);
  36. if(searchIcon!=null){
  37. searchIcon.setBounds(,,searchIcon.getIntrinsicWidth(), searchIcon.getIntrinsicHeight());
  38. mSearchView.setCompoundDrawables(searchIcon,null,null,null);
  39. }
  40.  
  41. //获得搜索的hint
  42. String hint = a.getString(R.styleable.MyToolbar_searchViewHint);
  43. if(hint!=null){
  44. mSearchView.setHint(hint);
  45. }
  46.  
  47. boolean isShowSearchView =a.getBoolean(R.styleable.MyToolbar_isShowSearchView,false);
  48. if(isShowSearchView){
  49. showSearchView();
  50. hideTitleView();
  51. }else{
  52. hideSearchView();
  53. showTitleView();
  54. }
  55. a.recycle();
  56. }
  57.  
  58. }
  59.  
  60. private void setRightButtonIcon(Drawable drawable){
  61. if(mRightImageView!=null){
  62. mRightImageView.setImageDrawable(drawable);
  63. mRightImageView.setVisibility(VISIBLE);
  64. }
  65. }
  66.  
  67. public void setRightImageViewOnClickListener(OnClickListener listener){
  68. mRightImageView.setOnClickListener(listener);
  69. }
  70.  
  71. private void initView() {
  72.  
  73. if(mView == null) {
  74.  
  75. mInflater = LayoutInflater.from(MyApplication.getContext());
  76. mView = mInflater.inflate(R.layout.toolbar, null);
  77.  
  78. mTextTitle = (TextView) mView.findViewById(R.id.toolbar_title);
  79. mSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);
  80. mRightImageView = (ImageView) mView.findViewById(R.id.toolbar_rightImage);
  81.  
  82. LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
  83.  
  84. addView(mView, lp);
  85. }
  86.  
  87. }
  88.  
  89. @Override
  90. public void setTitle(int resId) {
  91.  
  92. setTitle(getContext().getText(resId));
  93. }
  94.  
  95. @Override
  96. public void setTitle(CharSequence title) {
  97.  
  98. initView();
  99. if(mTextTitle !=null) {
  100. mTextTitle.setText(title);
  101. showTitleView();
  102. }
  103.  
  104. }
  105.  
  106. public void showSearchView(){
  107.  
  108. if(mSearchView !=null)
  109. mSearchView.setVisibility(VISIBLE);
  110.  
  111. }
  112.  
  113. public void hideSearchView(){
  114. if(mSearchView !=null)
  115. mSearchView.setVisibility(GONE);
  116. }
  117.  
  118. public void showTitleView(){
  119. if(mTextTitle !=null)
  120. mTextTitle.setVisibility(VISIBLE);
  121. }
  122.  
  123. public void hideTitleView(){
  124. if(mTextTitle !=null)
  125. mTextTitle.setVisibility(GONE);
  126. }
  127. }

3设置需要自定义的属性,在values下新建attrs.xml文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <declare-styleable name="MyToolbar">
  4. <attr name="rightImageIcon" format="reference"/>
  5. <attr name="editTextSearchIcon" format="reference"/>
  6. <attr name="isShowSearchView" format="boolean"/>
  7. <attr name="searchViewHint" format="string"/>
  8. </declare-styleable>
  9. </resources>

4.搜索框的样式文件 在values->styles.xml

  1. <style name="search_view">
  2. <item name="android:textSize">18sp</item>
  3. <item name="android:textColor">@color/white</item>
  4. <item name="android:textColorHint">@color/white</item>
  5.  
  6. <item name="android:background">@drawable/selector_search_view</item>
  7. <item name="android:paddingTop">6dp</item>
  8. <item name="android:paddingBottom">6dp</item>
  9. <item name="android:paddingLeft">4dp</item>
  10. <item name="android:singleLine">true</item>
  11. </style>

5.样式中有个自己绘制的图片

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <selector
  4. xmlns:android="http://schemas.android.com/apk/res/android">
  5. <item android:state_enabled="false" >
  6. <shape android:shape="rectangle">
  7. <corners android:radius="8dp" />
  8. <solid android:color="#eb4f38" />
  9. </shape>
  10. </item>
  11. <item android:state_pressed="true">
  12. <shape android:shape="rectangle">
  13. <corners android:radius="8dp" />
  14. <solid android:color="#eb4f38" />
  15. </shape>
  16. </item>
  17. <item>
  18. <shape android:shape="rectangle">
  19. <corners android:radius="8dp" />
  20. <solid android:color="#D82917" />
  21. </shape>
  22. </item>
  23. </selector>

6.在布局中正式调用例子

  1. <com.lingdangmao.myapplication.MyToolbar
  2. android:id="@+id/mytoolbar"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. app:isShowSearchView="true"
  5. app:editTextSearchIcon="@mipmap/icon_search"
  6. app:searchViewHint="请输入提示内容啊"
  7. android:minHeight="?attr/actionBarSize"
  8. android:background="?attr/colorPrimary"
  9. android:layout_width="match_parent"
  10. android:layout_height="wrap_content">
  11.  
  12. </com.lingdangmao.myapplication.MyToolbar>
  13.  
  1. <com.lingdangmao.myapplication.MyToolbar
    android:id="@+id/mytoolbar"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:isShowSearchView="false"
    app:title="asdasdad"
    app:navigationIcon="@drawable/icon_back_32px"
    app:rightImageIcon="@drawable/icon_back_32px"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
  2.  
  3. </com.lingdangmao.myapplication.MyToolbar>

实际效果  2种样式,通过参数不同进行配置

自定义toolbar教程的更多相关文章

  1. Android自定义视图教程

    Android自定义视图教程 Android的UI元素都是基于View(屏幕中单个元素)和ViewGroup(元素的集合),Android有许多自带的组件和布局,比如Button.TextView.R ...

  2. 如何解决自定义ToolBar起始位置的空格(左对齐)问题

    最近在做项目的时候,与到自定义toolbar的问题,自定义toolbar布局之类的并不是很难,但是自定义布局完成之后,控件总是无法左对齐,这极大的影响了App的美观. 结果谷歌后在Stack Over ...

  3. 商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)

    本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 上一篇文章<商城项目实战 | 2.1 Android 仿京东商城 ...

  4. 自定义ToolBar

    一.Toolbar的简介 Toolbar 是 android 5.0 引入的一个新控件,Toolbar出现之前,我们很多时候都是使用ActionBar以及ActionActivity实现顶部导航栏的, ...

  5. 去除自定义Toolbar中左边距

    问题 自定义Toolbar之后,发现左侧不能完全填充,总是留一点空白,如下图: 原因 查看Wiget.AppCompat.Toolbar的parent(Toolbar默认的style),如下: < ...

  6. ToolBar教程:AppCompatActivity下用toolbar当actionbar用

    参考: https://developer.android.com/training/appbar/index.html 1,自定义toolbar主题 2,在布局xml中使用toolbar 3,在代码 ...

  7. spring cloud 2.x版本 Gateway自定义过滤器教程

    前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 本文基于前两篇文章eureka-server.eureka-client.eureka ...

  8. Android 自定义ToolBar详细使用

    自定义xml设置ToolBar,通过menu文件扩展选项,通过继承baseactivity使用 1.ToolBar布局 <?xml version="1.0" encodin ...

  9. 自定义ToolBar之一

    其实已经有很多大神写过这方面的文章了,不过我比较蠢吧,老有一些地方看不懂的,翻了很多关于Toolbar方面的文章和视频,这儿总结一下.  参考资料:youtube:slidenerd 阶段一 自定义配 ...

随机推荐

  1. (转)Updates were rejected because the tip of your current branch is behind

    刚创建的github版本库,在push代码时出错: $ git push -u origin masterTo git@github.com:******/Demo.git ! [rejected] ...

  2. Jupyter Notebook里面使用Matplotlib画图 图表中文乱码问题

    可查看以下链接: https://blog.csdn.net/ccblogger/article/details/79613335

  3. node获取头信息数据

    req.fresh req.stale var version = 100; app.get('/test',function(req,res){ res.set('etag',version); i ...

  4. Druid时序数据库升级流程

    目前Druid集群版本为0.11.0,新版本0.12.1已支持Druid SQL和Redis,考虑到Druid新特性以及性能的提升,因此需要将Druid从0.11.0版本升级到0.12.1版本,下面将 ...

  5. MUI:字符串和json数据的相互转换

    JSON.parse()--字符串转换json.JSON.stringify()--json转换成字符串 如:收到Json对象:response,则: {"result":&quo ...

  6. P3527 [POI2011]MET-Meteors

    P3527 [POI2011]MET-Meteors 链接 整体二分! 代码 #include<bits/stdc++.h> using namespace std; typedef lo ...

  7. 【数据库】 SQLite 语法

    [数据库] SQLite 语法 一 . 创建数据库 1. 只需创建数据库,只需创建文件,操作时将连接字符串指向该文件即可 2. 连接字符串 : data source = FilePath; 不能加密 ...

  8. Scala学习笔记(二):运行脚本文件

    在某个目录(如:F:\)下新建一个文本文件,命名为:hello.scala 其内容为: println("Hello World!") 那么这个时候该怎么运行这个脚本文件呢? 通过 ...

  9. 安装 Win10 & Ubuntu 16.04 双系统以及 Ubuntu 配置深度学习环境记录

    0. 前言 坑爹的Ubuntu晚上运行还是好好的,第二天中午的时候打开机器发现屏幕分辨率不正常了:2K屏显示800*600左右的分辨率(无法调节),一个图标一拳头大,窗口和网页显示不全.Google查 ...

  10. hyperledger composer

    hyperledger composer 网站搜集 https://hyperledger.github.io/composer/latest/introduction/introduction.ht ...