引言
在Android开发中,标题栏我们常常用ToolBar控件,但因为它是原生的标题栏,所以有很多局限性。比如标题居中,标题颜色,标题返回键,标题渐变色等……都难以实现,最让人忍受不了的,其实是它丑!!!
本期就来安利一款TitleBar,让你告别老旧的ToolBar。
介绍
这是一个Github上的控件类库。很多的属性方法都被封装进了库中,往往在原生标题控件ToolBar中需要很多代码才能实现的功能,在它眼里只需要一行代码就能解决。话不多说,请先看效果预览图:
效果预览
用法
第一步:添加依赖(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="默认的标题栏" />
<com.hjq.bar.TitleBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:backButton="false"
app:title="不带箭头的标题栏" />
<com.hjq.bar.TitleBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:lineVisible="false"
app:title="不带分割线的标题栏" />
<com.hjq.bar.TitleBar
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="20dp"
app:title="自定义高度的标题栏" />
<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="带图标的标题栏" />
<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="带文本的标题栏\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="监听左右两边的点击事件" />
<com.hjq.bar.TitleBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:title="支持扩展子 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="设置"
app:title="夜间模式的标题栏" />
<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="设置"
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可以当做FrameLayout使用\n也可以在这里也可以添加自定义布局"
android:textColor="#000000" />
</LinearLayout>
</com.hjq.bar.TitleBar>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
仿QQ渐变色标题布局: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 优先于 backButton -->
<attr name="backButton" format="boolean" /><!-- 返回按钮(默认开) -->
<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" />
<!-- 图标和文字的间距 -->
<attr name="android:drawablePadding" />
</declare-styleable>
千夜零一:"之前总是看各种博客学习东西,现在我想用博客记录下我的学习脚步,好东西也需要分享,索取和给予是相互的。以后会尽量日更的!目标完成1001篇博客哈哈。”
如果觉得对你有所帮助,请不要吝啬你的点赞,有问题也可以在下方评论区留言哦,关注我一起学习吧~