ToolBar的title的精确居中!

本文介绍了一种在Android应用中使Toolbar标题精确居中的方法。通过调整Toolbar的contentInsetStart属性值为0dp,可以确保Toolbar内的TextView标题与界面元素完美对齐。

今天做一个项目:需要用到ToolBar的Title居中,

网上的流行的解决办法是在ToolBar里面嵌套一个TextView,布局如下:

<span style="font-size:18px;"><android.support.v7.widget.Toolbar
        android:id="@+id/recommand_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/colorWhite"
        android:layout_gravity="center">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/app_name"
            android:textSize="22sp" />

    </android.support.v7.widget.Toolbar></span>
最后的效果如下:

很明显:这样“壁纸精选”和“热门”的中轴线是不重合的!
那么有没有办法能使得它真正的居中呢?

方法很简单:只需要在ToolBar的属性设置中添加如下语句:

app:contentInsetStart="0dp"
最终的布局是这样的:
<android.support.v7.widget.Toolbar
        android:id="@+id/recommand_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/colorWhite"
        app:contentInsetStart="0dp"
        android:layout_gravity="center">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/app_name"
            android:textSize="22sp" />

    </android.support.v7.widget.Toolbar>

最终的效果是这样的:

我们看到:这样就准确的居中了。

心情瞬间舒畅了!有木有!!

<?xml version="1.0" encoding="utf-8"?> <FrameLayout 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:id="@+id/dialog_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="@dimen/dimen_84dp" android:orientation="vertical"> <com.google.android.material.appbar.COUIDividerAppBarLayout android:id="@+id/appbar" style="@style/CommonAppBarStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_transparent" android:clickable="true" android:focusable="true" android:paddingLeft="@dimen/dimen_0dp" android:paddingRight="@dimen/dimen_0dp" app:elevation="@dimen/toolbar_elevation"> <com.coui.appcompat.toolbar.COUIToolbar android:id="@+id/toolbar" style="@style/COUIToolBarInAppBarLayoutStyle" android:layout_width="match_parent" android:background="@null" app:supportTitleTextAppearance="@style/textAppearanceSecondTitle" app:titleCenter="false" /> <com.coui.appcompat.tablayout.COUITabLayout android:id="@+id/tab_layout" android:background="@color/color_transparent" style="@style/COUISmallTabLayoutStyle" /> </com.google.android.material.appbar.COUIDividerAppBarLayout> <RelativeLayout android:id="@+id/content_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <com.filemanager.common.view.ViewPagerWrapperForPC android:id="@+id/view_pager_wrapper" android:layout_width="match_parent" android:layout_height="match_parent"> <com.filemanager.common.view.viewpager.RTLViewPager android:id="@+id/viewPager" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_below="@+id/appbar" android:clipChildren="false" android:clipToPadding="false" android:orientation="horizontal" /> </com.filemanager.common.view.ViewPagerWrapperForPC> </RelativeLayout> </LinearLayout> <!-- 其他布局保持不变... --> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="?attr/couiColorBackgroundElevatedWithCard" android:minHeight="@dimen/operation_btn_background_height"> <View android:id="@+id/button_divider" android:layout_width="match_parent" android:layout_height="@dimen/divider_background_height" android:layout_gravity="top" android:alpha="0" android:background="?attr/couiColorDivider" android:forceDarkAllowed="false" /> <!-- 修改后的底部操作栏布局 --> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 文本区域添加约束和最大宽度 --> <LinearLayout android:id="@+id/select_root_view" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="@dimen/dimen_16dp" android:orientation="vertical" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@id/btn_add_file" app:layout_constraintHorizontal_bias="0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintWidth_max="wrap" app:layout_constraintWidth_percent="0.7"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <!-- 添加最大行数和省略号处理 --> <TextView android:id="@+id/select_title_content" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:ellipsize="end" android:maxLines="2" android:text="@string/not_selected_file" android:textSize="16sp" android:lineHeight="22dp" android:textColor="?attr/couiColorLabelPrimary" android:textAppearance="@style/couiTextHeadlineXS" android:visibility="visible" tools:ignore="SpUsage" /> <ImageView android:id="@+id/select_arraw_up" android:layout_width="18dp" android:layout_height="18dp" android:src="@drawable/arrow_up" android:layout_marginLeft="@dimen/dimen_6dp" android:visibility="gone" android:layout_gravity="center"/> </LinearLayout> <!-- 添加最大行数和省略号处理 --> <TextView android:id="@+id/select_body_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:lineHeight="20dp" android:textSize="14sp" android:textAppearance="?attr/couiTextBodyXS" android:textColor="?attr/couiColorLabelSecondary" android:visibility="gone" android:ellipsize="end" android:maxLines="1" android:text="@string/selected_size"/> </LinearLayout> <!-- 按钮添加约束 --> <com.coui.appcompat.button.COUIButton android:id="@+id/btn_add_file" style="@style/Widget.COUI.Button.Large" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="@dimen/dimen_16dp" android:minWidth="@dimen/dimen_96dp" android:text="@string/label_add_recent_file" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> </FrameLayout> </FrameLayout>这一版在文字长的时候会显示两行,能不能让文字居中显示在所在组件中
07-29
CollapsingToolbarLayout 是 Android 设计支持库(Design Support Library)中的一个布局组件,它常用于Material Design风格的应用中,尤其是配合 AppBarLayout 和 CoordinatorLayout 使用,可以创建出类似 Google Now 栏目的效果。当 Toolbar 高度折叠时,标题会被压缩到状态栏的高度,并保持居中显示。 然而,有时候 Toolbar 的标题可能会出现不居中的情况,这可能是由于以下几个原因: 1. **高度设置错误**:检查 CollapsingToolbarLayout 是否设置了正确的最小高度,如果标题折叠后的高度过小,可能导致标题溢出或不居中。 2. **视口约束**:如果你设置了 `app:layout_collapseMode="pin"`,确保你的视口约束(`android:fitsSystemWindows="true"`)配置正确,因为不当的视口管理会影响标题的布局。 3. **自定义View影响**:如果有其他控件(如 ImageView 或 TextView)在 Toolbar 上方,并设置了权重导致偏移,需检查这些控件的 layout_weight 参数是否合理。 4. **布局嵌套**:确认 Toolbar 内部的布局结构是否有复杂的嵌套层级,某些属性可能会干扰标题的位置。 5. **主题或样式问题**:检查你的应用主题是否影响了标题的样式,比如字体大小、颜色等可能导致标题看起来不居中。 要解决这个问题,你可以尝试调整布局属性,例如: ```xml <androidx.appcompat.widget.CollapsingToolbarLayout app:titleEnabled="true" app:titleTextAppearance="@style/YourTitleStyle" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/backdrop_view" android:scaleType="centerCrop" /> <TextView android:id="@+id/toolbar_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="标题" android:gravity="center" app:layout_collapseMode="parallax"> </androidx.appcompat.widget.CollapsingToolbarLayout> ``` 在上面的示例中,我们添加了 `android:gravity="center"` 来确保标题始终居中。如果你的问题依然存在,建议检查上述问题并逐一排查。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值