Android-TitleBar自定义标题居中的ToolBar
在Android应用开发中,TitleBar通常作为界面顶部的导航元素,显示应用的名称或操作按钮。自定义TitleBar可以提供更个性化的用户界面,并增强应用的用户体验。本教程将聚焦于如何创建一个自定义的标题居中并且可以添加自定义View到ToolBar的左右两侧的布局。 我们需要在Android项目中引入ToolBar。在`res/layout`目录下创建一个新的XML布局文件,例如`activity_main.xml`,然后在其中添加ToolBar: ```xml <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp" android:theme="@style/ThemeOverlay.AppCompat.ActionBar" /> ``` 接着,我们可以在Activity的Java或Kotlin代码中设置ToolBar为Activity的Action Bar: ```java Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(false); // 隐藏返回箭头 getSupportActionBar().setTitle("自定义标题"); // 设置默认标题 ``` 为了实现标题居中,我们需要覆盖ToolBar的默认样式。在`styles.xml`中添加一个新的主题: ```xml <style name="CustomToolBarTheme" parent="ThemeOverlay.AppCompat.ActionBar"> <item name="android:titleTextAppearance">@style/ToolBarTitle</item> </style> <style name="ToolBarTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"> <item name="android:textAlignment">center</item> </style> ``` 然后修改布局文件中ToolBar的主题引用: ```xml <androidx.appcompat.widget.Toolbar ... android:theme="@style/CustomToolBarTheme" /> ``` 现在,我们已经实现了标题居中。接下来,我们要添加自定义View到ToolBar的左侧和右侧。这可以通过在布局文件中使用`android.support.v7.widget.ActionMenuView`来实现,或者在代码中动态添加。 对于布局文件方式,可以这样添加: ```xml <androidx.appcompat.widget.Toolbar ... app:menu="@menu/tool_bar_menu" /> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/custom_view_left" android:actionLayout="@layout/custom_view_left" android:showAsAction="always" /> <item android:id="@+id/custom_view_right" android:actionLayout="@layout/custom_view_right" android:showAsAction="always" /> </menu> ``` `custom_view_left.xml`和`custom_view_right.xml`是自定义视图的布局文件。 如果选择在代码中动态添加,可以在Activity中这样操作: ```java View customViewLeft = getLayoutInflater().inflate(R.layout.custom_view_left, null); View customViewRight = getLayoutInflater().inflate(R.layout.custom_view_right, null); toolbar.addView(customViewLeft); toolbar.addView(customViewRight); ``` 可能需要处理自定义View的点击事件。这可以通过给自定义View添加OnClickListener或者在菜单项中设置OnMenuItemClickListener来完成。 通过以上步骤,我们就成功地创建了一个自定义的TitleBar,它可以居中显示标题,并且允许在左右两侧添加自定义View。这样的TitleBar不仅提高了应用的可定制性,还能使UI设计更加符合用户的交互习惯。在实际项目中,可以根据具体需求调整样式和功能,打造出独特的应用头部导航栏。
- 1
- 粉丝: 512
- 资源: 1万+
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助