Android自定义Toolbar使用方法详解

本篇文章介绍:

如何使用Toolbar;

自定义Toolbar;

先来看一看效果,了解一下toolbar;

布局文件:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"/>

Actvity中设置属性:

Toolbar toolBar= (Toolbar) findViewById(R.id.toolbar);
toolBar.setLogo(R.mipmap.ic_launcher);//设置图标
toolBar.setTitle("Title");//设置主标题
toolBar.setSubtitle("smalltitle");//设置子标题

这样就可以实现上面的效果。

接下来是自定义的Toolbar:

布局文件:

<com.example.cjj.test.bean.MyToolBar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:layout_centerInParent="true"
    android:layout_gravity="center"
  >
  </com.example.cjj.test.bean.MyToolBar>

toolbar.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <ImageButton
    android:id="@+id/mLeftButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:background="?attr/colorPrimary"
    />
  <TextView
    android:id="@+id/toolbar_title"
    android:text="title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_gravity="center"
    android:gravity="center"
    android:textColor="@color/white"
    android:textSize="20sp"
    />
  <ImageButton
    android:id="@+id/mRightButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:background="?attr/colorPrimary"/>
</RelativeLayout>

新建一个MyToolbar:

public class MyToolBar extends Toolbar {
  //布局
  private LayoutInflater mInflater;
  //右边按钮
  private ImageButton mRightButton;
  //左边按钮
  private ImageButton mLeftButton;
  //标题
  private TextView mTextTitle;

  private View view;

  public MyToolBar(Context context) {
    this(context,null);
  }

  public MyToolBar(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }
  public MyToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    //初始化函数
    initView();
    setContentInsetsRelative(10, 10);
    if (attrs != null) {
       setLeftButtonIcon(R.mipmap.back_icon);//设置左图标
        //设置点击事件
        setLeftButtonOnClickLinster(new OnClickListener() {
          @Override
          public void onClick(View v) {
            Toast.makeText(getContext(),"left",Toast.LENGTH_SHORT).show();
          }
        });
        setRightButtonIcon(R.mipmap.nav_more);//设置右图标
         //设置点击事件
        setRightButtonOnClickLinster(new OnClickListener() {
          @Override
          public void onClick(View v) {
            Toast.makeText(getContext(), "right", Toast.LENGTH_SHORT).show();
          }
        });
    }
  }
 private void initView() {
    if(view==null){
      //初始化
      mInflater= LayoutInflater.from(getContext());
      //添加布局文件
      view=mInflater.inflate(R.layout.toolbar,null);
      //绑定控件
      mEditSearchView= (EditText) view.findViewById(R.id.toolbar_searchview);
      mTextTitle= (TextView) view.findViewById(R.id.toolbar_title);
      mLeftButton= (ImageButton) view.findViewById(R.id.mLeftButton);
      mRightButton= (ImageButton) view.findViewById(R.id.mRightButton);

      LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
      addView(view, layoutParams);
    }
  }
   public void setRightButtonIcon(int icon){

    if(mRightButton !=null){

      mRightButton.setImageResource(icon);
      // mRightButton.setVisibility(VISIBLE);
    }

  }
  public void setLeftButtonIcon(int icon){

    if(mLeftButton !=null){

      mLeftButton.setImageResource(icon);
      //mLeftButton.setVisibility(VISIBLE);
    }

  }

  //设置右侧按钮监听事件
  public void setRightButtonOnClickLinster(OnClickListener linster) {
    mRightButton.setOnClickListener(linster);
  }

  //设置左侧按钮监听事件
  public void setLeftButtonOnClickLinster(OnClickListener linster) {
    mLeftButton.setOnClickListener(linster);
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android Support Library 标题栏(Toolbar)滚动效果实现方法

    首先来个效果图  布局文件代码 在布局文件中,CoordinatorLayout作为布局文件根节点,AppBarLayout包含在CoordinatorLayout中,toolbar在AppBarLayout节点下include进来. <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="

  • Android中Toolbar随着ScrollView滑动透明度渐变效果实现

    Android中Toolbar随着ScrollView滑动透明度渐变效果实现 一.思路:监听ScrollView的滑动事件 不断的修改Toolbar的透明度 二.注意 1.ScrollView 6.0以前没有scrollView.setOnScrollChangeListener(l)方法  所以要自定义ScrollView 在onScrollChanged()中监听 2.ScrollView 6.0(23)以前没有scrollView.setOnScrollChangeListener()方法

  • ToolBar中menu无法同时显示图标和文字问题的解决方法

    在使用ToolBar时,虽然在menu.xml文件的 item中 设置了 icon 属性,但是当设置 showAsAction="never"时,默认只显示文字的 title,而不会显示图标 icon.可以在 Activity 中重写onMenuOpened()方法,通过反射使 icon 和 title 同时可见. 将如下代码复制到Activity 中即可: @Override public boolean onMenuOpened(int featureId, Menu menu)

  • Android折叠式Toolbar使用完全解析(CollapsingToolbarLayout)

    简介 在各种不同的应用中,大家可能会经常见到这样一个效果:Toolbar是透明的,有着一个背景图片以及大标题,随着页面向上滑动,其标题逐渐缩放到Toolbar上,而背景图片则在滑动到一定程度后变成了Toolbar的颜色,这种效果也即是折叠式效果.其实这种效果在GitHub上面已经有很多开源库实现了,但是Google在其推出的Design Library库中也给出了一个这种控件,让我们很方便地实现了这种效果.这个控件是CollapsingToolbarLayout,它是一个增强型的FrameLay

  • Android动态修改ToolBar的Menu菜单示例

    Android动态修改ToolBar的Menu菜单 效果图 实现 实现很简单,就是一个具有3个Action的Menu,在我们滑动到不同状态的时候,把对应的Action隐藏了. 开始上货 Menu Menu下添加3个Item <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xml

  • Android5.0+ CollapsingToolbarLayout使用详解

    CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView.Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端). 使用CollapsingToolbarLayout: <android.support.design.wid

  • Android自定义ActionProvider ToolBar实现Menu小红点

    今天的几个目标: 1. 自定义ActionProvider 2. Toolbar ActionBar自定义Menu 3. Toolbar ActionBar 右侧Menu添加角标(Toolbar ActionBar Menu添加小红点) 源代码在文章末尾. -------------------------------------------------------------------------------- 效果预览 自定义Menu后不影响原生MD的任何效果.可以通过外部来控制显示的文字

  • 解决Android V7后自定义Toolbar、ActionBar左侧有空白问题

    如图所示: 1.查看Wiget.AppCompat.Toolbar的parent主题,如下所示: <style name="Base.Widget.AppCompat.Toolbar" parent="android:Widget"> <item name="titleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Title</item&

  • Android ToolBar控件详解及实例

    ToolBar控件详解 在Activity中添加ToolBar 1.添加库 dependencies { ... compile "com.android.support:appcompat-v7:18.0.+" } 2.Activity要继承AppCompatActivity 3.设置主题 使用ToolBar,要将系统默认的ActionBar隐藏掉 <application android:theme="@style/Theme.AppCompat.Light.NoA

  • Android ToolBar整合实例使用方法详解

    最近做项目中遇到ToolBar因为不同的界面toobar不同为了描述统一的风格.相信大家也非常清楚,大多数ToolBar包括以下几个方面 左标题 左边题颜色 左标题图标等 标题 标题颜色 右标题 右标题颜色 右标题图标 ToolBar标题 ToolBar颜色 ToolBar图标 ToolBar子标题 ToolBar子标题 ToolBar子标题颜色 再看一下淘宝以及其他appToolBar样式界面 下面看下我自定义的CustomeToolBar继承原生ToolBar package com.ldm

随机推荐