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

最近做项目中遇到ToolBar因为不同的界面toobar不同为了描述统一的风格。相信大家也非常清楚,大多数ToolBar包括以下几个方面

  • 左标题 左边题颜色 左标题图标等
  • 标题 标题颜色
  • 右标题 右标题颜色 右标题图标
  • ToolBar标题 ToolBar颜色 ToolBar图标
  • ToolBar子标题 ToolBar子标题 ToolBar子标题颜色

再看一下淘宝以及其他appToolBar样式界面

下面看下我自定义的CustomeToolBar继承原生ToolBar

package com.ldm.imitatewx;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;
import android.widget.TextView;
import android.widget.Toolbar;

/**
 * Created by John on 2017/2/16.
 */

public class CustomeToolBar extends Toolbar {
 private TextView mTvMainTitleLeft;
 private TextView mTvMainTitle;
 private TextView mTvMainRight;
 public CustomeToolBar(Context context) {
 super(context);
 }

 public CustomeToolBar(Context context, AttributeSet attrs) {
 super(context, attrs);
 }

 public CustomeToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 }

 @Override
 protected void onFinishInflate() {
 super.onFinishInflate();
 mTvMainTitleLeft= (TextView) findViewById(R.id.lt_main_title_left);
 mTvMainTitle= (TextView) findViewById(R.id.lt_main_title);
 mTvMainRight= (TextView) findViewById(R.id.lt_main_title_right);
 }
 //设置主title内容
 public void setMainTitle( String text )
 {
 this.setTitle(" ");
 mTvMainTitle.setVisibility(View.VISIBLE);
 mTvMainTitle.setText(text);
 }
 //设置主title的内容文字的颜色
 public void setTitleColor(int color )
 {
 mTvMainTitle.setTextColor(color);
 }
 //设置左边title内容
 public void setMainTitleLeft(String text )
 {
 mTvMainTitleLeft.setVisibility(View.VISIBLE);
 mTvMainTitleLeft.setText(text);
 }
 //设置左边的title颜色
 public void setMainTitleLeftColor(int color )
 {
 mTvMainTitleLeft.setTextColor(color);
 }
 //设置左边icon
 public void setMainTitleLeftDrawable(int res )
 {
 Drawable left= ContextCompat.getDrawable(getContext(),res);
 left.setBounds(0,0,left.getMinimumWidth(),left.getMinimumHeight());
 mTvMainTitleLeft.setCompoundDrawables(left,null,null,null);
 }
 //设置右边的title
 public void setTvMainRightText(String text )
 {
 mTvMainRight.setVisibility(View.VISIBLE);
 mTvMainRight.setText(text);
 }
 //设置右边标题的颜色
 public void setMainTitleRightColor(int color )
 {
 mTvMainRight.setTextColor(color);
 }
 //设置右边icon
 public void setMainTitleRightDrawable(int res )
 {
 Drawable right= ContextCompat.getDrawable(getContext(),res);
 right.setBounds(0,0,right.getMinimumWidth(),right.getMinimumHeight());
 mTvMainTitleLeft.setCompoundDrawables(right,null,null,null);
 }
 //设置toolbar颜色
 public void setToolBarBackground(int res )
 {
 this.setBackgroundResource(res);
 }
 //设置ToolBar左边的图标
 public void setToolbarLeftBackImageRes(int res )
 {
 this.setNavigationIcon(res);
 }
 //设置toolbar左边文字
 public void setToolbarLeftText(String text ){
 this.setNavigationContentDescription(text);
 }
 //设置toolbar标题
 public void setToolbarTitle(String text )
 {
 this.setTitle(text);
 }
 //设置toolbar颜色
 public void setToolbarTitleColor(int color )
 {
 this.setTitleTextColor(color);
 }
 //设置ToolBar子标题
 public void setToolbarSubTitleText(String text )
 {
 this.setSubtitle(text);
 }
 //设置toolbar子标题的颜色
 public void setToolbarSubTitleTextColor(int color )
 {
 this.setSubtitleTextColor(color);
 }

}

然后布局引用activity_custome_toolbar
因为其实toolbar说白也是view也可以说是一个布局
所以我们只要根据自己需求往里面丢东西就ok,这里可能不全面,希望大家一起完善谢谢!

<?xml version="1.0" encoding="utf-8"?>
<com.ldm.imitatewx.CustomeToolBar xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="?attr/label_textSize"
 android:background="@android:color/holo_green_light"
 android:fitsSystemWindows="true"
 app:contentInsetLeft="0dp"
 app:contentInsetStart="0dp"
 app:popupTheme="@style/MyPopStyle"
 >
 <TextView
 android:id="@+id/lt_main_title_left"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="10dp"
 android:text="返回"
 android:gravity="center"
 android:drawableLeft="@drawable/ic_back_u"
 android:textColor="@android:color/white"
 android:singleLine="true"
 android:textSize="16sp"
 android:visibility="visible"/>
 <TextView
 android:id="@+id/lt_main_title"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:singleLine="true"
 android:textColor="@android:color/white"
 android:text="标题"
 android:textSize="20sp"
 android:visibility="visible"
 />
 <TextView
 android:id="@+id/lt_main_title_right"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="right"
 android:layout_marginRight="10dp"
 android:text="返回"
 android:gravity="center"
 android:drawableRight="@drawable/ic_add"
 android:textColor="@android:color/white"
 android:singleLine="true"
 android:textSize="16sp"
 android:visibility="visible"/>

</com.ldm.imitatewx.CustomeToolBar>

到这里基本结束了!大家可以继续完善!谢谢!

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

(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 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; 自定义Toolbar; 先来看一看效果,了解一下toolbar: 布局文件: <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@co

  • 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使用完全解析(CollapsingToolbarLayout)

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

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

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

  • 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中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)

随机推荐