2. 程式人生 > >自定義Toolbar實現簡潔標題欄

自定義Toolbar實現簡潔標題欄

阿新 • • 發佈：2019-02-07

專案中,我們會大量的使用到標題欄,使用google推薦的toolbar,可以創造出使用簡便的簡潔標題欄.方便我們使用.
由於我們使用的標題欄大多需要標題居中顯示,而toolbar自帶的標題不是居中顯示,我們可以自定義toolbar佈局,解決這一問題.

自定義toolbar佈局

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar_layout"
    android:layout_width="match_parent"
 

    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    >
    <TextView
        android:id="@+id/toolbar_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:singleLine="true"
 

        android:text="左側文字"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="16dp"
        android:visibility="visible" />

    <TextView
        android:id="@+id/toolbar_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="20dp"
        android:visibility="visible" />

    <TextView
        android:id="@+id/toolbar_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        android:gravity="center"
        android:visibility="visible"
        android:text="右側文字"
        android:textColor="@color/white"
        android:textSize="16dp" />
</android.support.v7.widget.Toolbar>

我們建立一個佈局,裡面包含三個textview,分別在左側,右側和中間.

然後,我們建立自定義toolbar類,繼承自Toolbar.並將佈局載入.

public class CustomToolbar extends Toolbar {

    private TextView lefttext;
    private TextView titletext;
    private TextView righttext;

    private Toolbar toolbar;

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

    public CustomToolbar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        inflate(context, R.layout.view_customtoolbar,this);
    }
  }

這時,最基本的標題欄就已經做好了.在裡面的佈局已經可以顯示出來.我們需要根據自己的需求進去擴充套件.
比如:
可以自由設定背景色
可以只顯示標題欄,不顯示左右文字
可以將文字替換成圖片
可以響應點選事件
…
前面兩項都十分簡單,就略過了.

關於圖片文字自由更換,我的思路是需要設定圖片時,將文字置為空,設定textview的drawableLeft或者drawableRight.

 /**
     * 設定左側文字
     * @param text
     */
    public void setLeftText(String text) {

        lefttext.setVisibility(VISIBLE);
        lefttext.setText(text);

        //設定文字則不顯示圖片
        lefttext.setCompoundDrawables(null,null,null,null);

    }

    /**
     * 設定右邊文字
     * @param text
     */
    public void setRightText(String text) {

        righttext.setVisibility(VISIBLE);
        righttext.setText(text);

        //設定文字則不顯示圖片
        righttext.setCompoundDrawables(null,null,null,null);

    }


    /**
     * 設定左側圖片
     * @param id
     */
    public void setLeftImg(int id) {

        Drawable drawable = getResources().getDrawable(id);

        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

        //設定圖片則不顯示文字
        lefttext.setText("");

        lefttext.setCompoundDrawables(drawable,null,null,null);


    }


    /**
     * 設定右側圖片
     * @param id
     */
    public void setRightIcon(int id) {

        Drawable drawable = getResources().getDrawable(id);

        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

        //設定圖片則不顯示文字
        righttext.setText("");
        righttext.setCompoundDrawables(null,null,drawable,null);

    }

關於響應點選事件,則使用介面和回撥就可以解決.

    private TextView lefttext;
    private TextView titletext;
    private TextView righttext;

    OnLeftTextClickListener leftlistener;
    OnRightTextClickListener rightlistener;

 //左側文本回調介面
    public interface OnLeftTextClickListener {
        void onLeftTextClick();
    }

    /**
     * 設定左側文本回調
     * @param listener
     */
    public void setOnLeftTextClickListener(OnLeftTextClickListener listener) {
        this.leftlistener = listener;
    }

    //右側文本回調介面
    public interface OnRightTextClickListener {
        void onRightTextClick();
    }

    /**
     * 設定右側文本回調
     * @param litener
     */
    public void setOnRightTextClickListener(OnRightTextClickListener litener) {
        this.rightlistener = litener;
    }

.....

     @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        lefttext = (TextView) findViewById(R.id.toolbar_left);
        titletext = (TextView) findViewById(R.id.toolbar_title);
        righttext = (TextView) findViewById(R.id.toolbar_right);
        toolbar = (Toolbar) findViewById(R.id.toolbar_layout);

        lefttext.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                leftlistener.onLeftTextClick();
            }
        });

        righttext.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                rightlistener.onRightTextClick();
            }
        });
    }

使用自定義toolbar,以MainActivity為例,
首先將activity的theme設定為noactionbar,
在佈局中直接加入.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.benhuan.mytoolbardemo.MainActivity">

    <com.benhuan.mytoolbardemo.CustomToolbar
        android:id="@+id/ctoolbar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

可以看到效果了:
這裡寫圖片描述
我們想要改變顏色

 private void initToolbar() {


        customToolbar.setToolbarBackgroundColor(R.color.black);
        customToolbar.setToolbarTitle("標題一");

    }

效果:
這裡寫圖片描述
設定只需要標題

private void initToolbar2() {


        customToolbar.setToolbarBackgroundColor(R.color.green);

        customToolbar.setOnlyTitle();

        customToolbar.setToolbarTitle("標題二");

    }

效果:
這裡寫圖片描述
設定點選事件

private void initToolbar3() {


        customToolbar.setToolbarBackgroundColor(R.color.red);

        customToolbar.setToolbarTitle("標題三");

        customToolbar.setLeftText("返回");

        customToolbar.setRightText("新增");

        customToolbar.setOnLeftTextClickListener(new CustomToolbar.OnLeftTextClickListener() {
            @Override
            public void onLeftTextClick() {
                //響應左側文字點選事件
            }
        });

        customToolbar.setOnRightTextClickListener(new CustomToolbar.OnRightTextClickListener() {
            @Override
            public void onRightTextClick() {
                //響應右側文字點選事件
            }
        });

    }

效果:
這裡寫圖片描述
將文字切換成圖片

 private void initToolbar4() {


        customToolbar.setToolbarBackgroundColor(R.color.colorToolbar);

        customToolbar.setToolbarTitle("標題四");

        customToolbar.setLeftImg(R.drawable.arrow);

        customToolbar.setRightImg(R.drawable.add);

    }

效果:
這裡寫圖片描述
可以看到,使用起來非常簡單,以後遇到特殊情況可以繼續進行擴充套件.
程式碼不多,直接貼出自定義view的原始碼.

package com.benhuan.mytoolbardemo;

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

/**
 * Created by XieMinFeng.
 * Date: 2017-03-05
 * Time: 10:14
 * Desc:
 */

public class CustomToolbar extends Toolbar {

    private TextView lefttext;
    private TextView titletext;
    private TextView righttext;

    private Toolbar toolbar;

    OnLeftTextClickListener leftlistener;
    OnRightTextClickListener rightlistener;

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

    public CustomToolbar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        inflate(context, R.layout.view_customtoolbar,this);
    }


    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        lefttext = (TextView) findViewById(R.id.toolbar_left);
        titletext = (TextView) findViewById(R.id.toolbar_title);
        righttext = (TextView) findViewById(R.id.toolbar_right);
        toolbar = (Toolbar) findViewById(R.id.toolbar_layout);

        lefttext.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                leftlistener.onLeftTextClick();
            }
        });

        righttext.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                rightlistener.onRightTextClick();
            }
        });
    }


    public void setToolbarBackgroundColor(int color) {

        toolbar.setBackgroundResource(color);

    }

    /**
     * 設定只顯示標題
     */
    public void setOnlyTitle() {

        lefttext.setVisibility(INVISIBLE);
        righttext.setVisibility(INVISIBLE);
    }

    /**
     * 設定右側不顯示
     */
    public void setNoRightText() {

        righttext.setVisibility(INVISIBLE);
    }


    /**
     * 設定標題
     * @param text
     */
    public void setToolbarTitle(String text) {

        this.setTitle("");
        titletext.setVisibility(View.VISIBLE);
        titletext.setText(text);


    }

    /**
     * 設定左側文字
     * @param text
     */
    public void setLeftText(String text) {

        lefttext.setVisibility(VISIBLE);
        lefttext.setText(text);

        //設定文字則不顯示圖片
        lefttext.setCompoundDrawables(null,null,null,null);

    }

    /**
     * 設定右邊文字
     * @param text
     */
    public void setRightText(String text) {

        righttext.setVisibility(VISIBLE);
        righttext.setText(text);

        //設定文字則不顯示圖片
        righttext.setCompoundDrawables(null,null,null,null);

    }


    /**
     * 設定左側圖片
     * @param id
     */
    public void setLeftImg(int id) {

        Drawable drawable = getResources().getDrawable(id);

        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

        //設定圖片則不顯示文字
        lefttext.setText("");

        lefttext.setCompoundDrawables(drawable,null,null,null);


    }


    /**
     * 設定右側圖片
     * @param id
     */
    public void setRightImg(int id) {

        Drawable drawable = getResources().getDrawable(id);

        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

        //設定圖片則不顯示文字
        righttext.setText("");
        righttext.setCompoundDrawables(null,null,drawable,null);

    }

    //左側文本回調介面
    public interface OnLeftTextClickListener {
        void onLeftTextClick();
    }

    /**
     * 設定左側文本回調
     * @param listener
     */
    public void setOnLeftTextClickListener(OnLeftTextClickListener listener) {
        this.leftlistener = listener;
    }

    //右側文本回調介面
    public interface OnRightTextClickListener {
        void onRightTextClick();
    }

    /**
     * 設定右側文本回調
     * @param litener
     */
    public void setOnRightTextClickListener(OnRightTextClickListener litener) {
        this.rightlistener = litener;
    }

    /**
     * 設定返回圖片
     * @param id 圖片的id
     */
    public void setbackIcon(int id) {

        this.setNavigationIcon(id);

        lefttext.setVisibility(GONE);
        //左側文字不設定draw
        lefttext.setCompoundDrawables(null,null,null,null);

        this.setNavigationOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

    }

}

相關推薦

自定義Toolbar實現簡潔標題欄

專案中,我們會大量的使用到標題欄,使用google推薦的toolbar,可以創造出使用簡便的簡潔標題欄.方便我們使用. 由於我們使用的標題欄大多需要標題居中顯示,而toolbar自帶的標題不是居中顯示,我們可以自定義toolbar佈局,解決這一問題. 自定義

Android之ToolBar和自定義ToolBar實現沉浸式狀態列

沉浸式狀態列確切的說應該叫做透明狀態列。一般情況下，狀態列的底色都為黑色，而沉浸式狀態列則是把狀態列設定為透明或者半透明。 沉浸式狀態列是從android Kitkat（Android 4.4）開始出

Android自定義View-TitleBar（標題欄）詳細說明

我們在開發Android介面時常常要在許多頁面中共用風格相似的標題欄，為了減少重複性工作我們可以將標題欄做成一個通用的自定義控制元件。 我將通過兩種形式的自定義方式介紹自定義TitleBar 第一種方式（不涉及自定義屬性） 首先通過在Layout中建一個佈局檔案先確定Ti

修改（自定義）視窗的標題欄和圖示

Imports ZwSoft.ZwCAD.Runtime Imports System.Drawing Imports ZwApp = ZwSoft.ZwCAD.ApplicationServices Public Class ZwcadApp     <Comman

資料脫敏——基於Java自定義註解實現日誌欄位脫敏

　　上文說了資料過敏主要有兩個思路：第一個就是在序列化實體之前先把需要脫敏的欄位進行處理，之後正常序列化；第二個就是在實體序列化的時候，對要脫敏的欄位進行處理。 脫敏實現思路 　　這裡探討第一種方法，用基於自定義註解的方式實現日誌脫敏。 　　要對

通過TabLayout自定義tab實現圖文混搭導航欄

國際慣例先看效果 好久不見，最近沉默與需求無法自拔，也根據最近的小需求做出一篇使用性的教程，內容不難。 本效果是使用谷歌提供的design庫中的tabyout來實現的效果 com.android.support:design:25.1.1 如果不

vue中使用vue-quill-editor富文字編輯器，自定義toolbar修改工具欄options

基於webpack和vue 一、npm 安裝 vue-quill-editor 二、在main.js中引入 import VueQuillEditor from 'vue-quill-editor' // require styles 引入樣式 im

android 自定義狀態列和導航欄分析與實現

效果 　　android 4.4之後，系統是支援自定義狀態列和導航欄的，舉個最典型的例子就是bilibili客戶端了（iOS版本和android版本能用兩套完全不一樣符合各自系統的設計ui，良心啊～），頂部狀態列為粉色，底部導航欄為半透明色： 　　 　　接

安卓 實現網易雲音樂底部播放欄效果之使用自定義BaseActivity實現 上

起因： 最近在寫一個音樂專案，發現網易雲音樂的底部播放欄看起來不錯，不同的頁面切換也能做到無縫連線，於是自己打算仿造一個。折磨： 1.一開始我看到知乎有大神說使用Activity+Fragment實現

去除自定義Toolbar中左邊距

分享 roi mar tap ring att blog img pac 問題 自定義Toolbar之後，發現左側不能完全填充，總是留一點空白，如下圖： 原因 查看Wiget.AppCompat.Toolbar的parent（Toolbar默認的style），如下： &l

Android -- 自定義view實現keep歡迎頁倒計時效果

super onfinish -m use new getc awt ttr alt 1，最近打開keep的app的時候，發現它的歡迎頁面的倒計時效果還不錯，所以打算自己來寫寫，然後就有了這篇文章。 2，還是老規矩，先看一下我們今天實現的效果 　　相較於我們常見的倒計時

使用微信JSSDK自定義微信分享標題、描述、和圖標

工具包 on() 包括 images 定義 能力 實現 手機 2.0 最近做一個項目的時候用到微信的分享 ，實現定義分享標題，圖片，了解到微信在發布JSSDK後，把包括自定義分享在內的眾多網頁服務接口進行了統一。如果要想自定義分享自己的網頁信息給好友或朋友圈，就最好使用這個

自定義ToolBar

edr 中標 需要 要點 extc ive 主題 ref 討論 一、Toolbar的簡介 Toolbar 是 android 5.0 引入的一個新控件，Toolbar出現之前，我們很多時候都是使用ActionBar以及ActionActivity實現頂部導航

Android自定義View——實現水波紋效果類似剩余流量球

string 三個點 pre ber block span 初始化 move 理解 最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩，終於功夫不負有心人最後實現了想要的效果，一起來看下吧： 效果圖鎮樓 一：先一步一步來分解一下實現的過程 需要繪制一個正弦曲線(sin

Android自定義processor實現bindView功能

lis dds 定義 java代碼 cli 註冊 文章 type() mage 一、簡介 在現階段的Android開發中，註解越來越流行起來，比如ButterKnife，Retrofit，Dragger，EventBus等等都選擇使用註解來配置。按照處理時期，註解又分為兩

自定義toast實現

web javascript html5 toast ys_toast.css.ys-toast{ position:fixed; left:0; right:0; top:0; bottom:0; z-index: 999999; } .ys-toast>em{ pos

SpringVC 攔截器+自定義註解 實現權限攔截

json.js 加載 bean media tar attr esp 權限 encoding 1.springmvc配置文件中配置 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://w

自定義ScrollView 實現上拉下拉的回彈效果--並且子控件中有Viewpager的情況

是否 AS abs pri tar utils lda animation ted onInterceptTouchEvent就是對子控件中Viewpager的處理：左右滑動應該讓viewpager消費 1 public class MyScrollView ext

[python]RobotFramework自定義庫實現UI自動化

bubuko output source 自動 封裝 9.png 全局變量 詳細 變量 1.安裝教程 環境搭建不多說，網上資料一大堆，可參考https://www.cnblogs.com/puresoul/p/3854963.html，寫的比較詳細，值得推薦。目前pyt

NPOI+反射+自定義特性實現上傳excel轉List及驗證

type set custom pre script private property xssf don 1.自定義特性 [AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited