TitleBar標(biāo)題欄告別老套的ToolBar

引言

??在Android開發(fā)中，標(biāo)題欄我們常常用ToolBar控件，但因為它是原生的標(biāo)題欄，所以有很多局限性。比如標(biāo)題居中，標(biāo)題顏色，標(biāo)題返回鍵，標(biāo)題漸變色等……都難以實現(xiàn)，最讓人忍受不了的，其實是它丑?。?！

??本期就來安利一款TitleBar，讓你告別老舊的ToolBar。

介紹

??這是一個Github上的控件類庫。很多的屬性方法都被封裝進了庫中，往往在原生標(biāo)題控件ToolBar中需要很多代碼才能實現(xiàn)的功能，在它眼里只需要一行代碼就能解決。話不多說，請先看效果預(yù)覽圖：

效果預(yù)覽

TitleBar標(biāo)題欄1.jpeg
TitleBar標(biāo)題欄2.jpeg

用法

第一步：添加依賴（mudule下build.gradle）

dependencies {
    implementation 'com.hjq:titlebar:6.5'
}

第二步：布局文件（多種樣式的TitleBar演示）

主布局：activity_case27.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F4F4F4"
    tools:context=".show.Case27"
    tools:ignore="MissingConstraints">

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical">

            <com.hjq.bar.TitleBar
                android:id="@+id/default_TitleBar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="300dp"
                app:title="默認(rèn)的標(biāo)題欄" />

            <com.hjq.bar.TitleBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:backButton="false"
                app:title="不帶箭頭的標(biāo)題欄" />

            <com.hjq.bar.TitleBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:lineVisible="false"
                app:title="不帶分割線的標(biāo)題欄" />

            <com.hjq.bar.TitleBar
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginTop="20dp"
                app:title="自定義高度的標(biāo)題欄" />

            <com.hjq.bar.TitleBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:leftIcon="@mipmap/ic_launcher"
                app:rightIcon="@mipmap/ic_launcher"
                app:title="帶圖標(biāo)的標(biāo)題欄" />

            <com.hjq.bar.TitleBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:backButton="false"
                app:leftTitle="左邊"
                app:rightTitle="右邊"
                app:title="帶文本的標(biāo)題欄\n12345" />

            <com.hjq.bar.TitleBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:backButton="false"
                app:leftColor="#FF3300"
                app:leftSize="18sp"
                app:leftTitle="左邊"
                app:rightColor="#0033FF"
                app:rightSize="18sp"
                app:rightTitle="右邊"
                app:title="文字大小和顏色"
                app:titleSize="20sp" />

            <com.hjq.bar.TitleBar
                android:id="@+id/tb_main_bar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:leftIcon="@mipmap/ic_launcher"
                app:leftTitle="左邊"
                app:rightIcon="@mipmap/ic_launcher"
                app:rightTitle="右邊"
                app:title="監(jiān)聽左右兩邊的點擊事件" />

            <com.hjq.bar.TitleBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:title="支持?jǐn)U展子 View" />

            <com.hjq.bar.TitleBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:barStyle="night"
                app:leftTitle="返回"
                app:rightTitle="設(shè)置"
                app:title="夜間模式的標(biāo)題欄" />

            <com.hjq.bar.TitleBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:background="@drawable/shape_gradient"
                app:barStyle="transparent"
                app:leftBackground="@null"
                app:leftTitle="返回"
                app:rightBackground="@null"
                app:rightTitle="設(shè)置"
                app:title="仿QQ漸變樣式"
                app:titleColor="@null" />

            <com.hjq.bar.TitleBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:title="自定義TitleBar">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="50dp"
                    android:layout_marginBottom="30dp"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="20dp"
                        android:text="TitleBar可以當(dāng)做FrameLayout使用\n也可以在這里也可以添加自定義布局"
                        android:textColor="#000000" />
                </LinearLayout>

            </com.hjq.bar.TitleBar>

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

仿QQ漸變色標(biāo)題布局：shape_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="180"
        android:endColor="#387cfd"
        android:startColor="#26c4fd"
        android:type="linear" />
</shape>

第三步：點擊事件處理

public class Case27 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_case27);
        TitleBar tb = findViewById(R.id.default_TitleBar);
        tb.setOnTitleBarListener(new OnTitleBarListener() {
            @Override
            public void onLeftClick(View v) {
                //左邊
                finish();
            }

            @Override
            public void onTitleClick(View v) {
                //中間
            }

            @Override
            public void onRightClick(View v) {
                //右邊
            }
        });
    }
}

屬性大全

<declare-styleable name="TitleBar">
    <!-- 整體樣式 -->
    <attr name="barStyle">
        <enum name="light" value="0x10" />
        <enum name="night" value="0x20" />
        <enum name="transparent" value="0x30" />
        <enum name="ripple" value="0x40" />
    </attr>
    <!-- 中間 -->
    <attr name="title" format="string" />
    <attr name="titleColor" format="color" />
    <attr name="titleSize" format="dimension" />
    <attr name="titleGravity">
        <flag name="top" value="0x30" />
        <flag name="bottom" value="0x50" />
        <flag name="left" value="0x03" />
        <flag name="right" value="0x05" />
        <flag name="center_vertical" value="0x10" />
        <flag name="center_horizontal" value="0x01" />
        <flag name="center" value="0x11" />
        <flag name="start" value="0x00800003" />
        <flag name="end" value="0x00800005" />
    </attr>
    <!-- 左邊 -->
    <attr name="leftTitle" format="string"/>
    <attr name="leftIcon" format="reference" /><!-- leftIcon 優(yōu)先于 backButton -->
    <attr name="backButton" format="boolean" /><!-- 返回按鈕（默認(rèn)開） -->
    <attr name="leftColor" format="color" />
    <attr name="leftSize" format="dimension" />
    <attr name="leftBackground" format="reference|color" />
    <!-- 右邊 -->
    <attr name="rightTitle" format="string" />
    <attr name="rightIcon" format="reference" />
    <attr name="rightColor" format="color" />
    <attr name="rightSize" format="dimension" />
    <attr name="rightBackground" format="reference|color" />
    <!-- 分割線 -->
    <attr name="lineVisible" format="boolean" />
    <attr name="lineColor" format="reference|color" />
    <attr name="lineSize" format="dimension" />
    <!-- 圖標(biāo)和文字的間距 -->
    <attr name="android:drawablePadding" />
</declare-styleable>

千夜零一："之前總是看各種博客學(xué)習(xí)東西，現(xiàn)在我想用博客記錄下我的學(xué)習(xí)腳步，好東西也需要分享，索取和給予是相互的。以后會盡量日更的！目標(biāo)完成1001篇博客哈哈?！?br> ??如果覺得對你有所幫助，請不要吝嗇你的點贊，有問題也可以在下方評論區(qū)留言哦，關(guān)注我一起學(xué)習(xí)吧～

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容