扩展的CollapsingToolbarLayout中的标题未正确显示

时间:2017-03-10 13:32:52

标签: android android-design-library android-collapsingtoolbarlayout

所以,我的项目中CollapsingToolbarLayout遇到了一个奇怪的问题。我的活动开始后,这就是我的工具栏标题出现的方式:

the expanded title has dots at the end

折叠后布局如下:

collapsed title with dots at the end

示例中的原始标题文字是:" UPC VONALKODOS TERMEK "

我认为扩展状态下的标题应该比折叠状态更长(有足够的空间)。这就是我的活动xml的样子:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:theme="@style/PolarThemeNoActionBar">
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_below="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="142dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="20dp"
            app:expandedTitleTextAppearance="@style/ExpandedText">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
            </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_below="@+id/toolbar"
            android:minHeight="?attr/actionBarSize"
            android:gravity="bottom"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:tabIndicatorColor="?attr/colorPrimaryDark"/>
        </android.support.design.widget.AppBarLayout>
    </android.support.design.widget.CoordinatorLayout>

我的res / style / ExpandedText看起来像:

<style name="ExpandedText" parent="android:TextAppearance">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textSize">20sp</item>
    </style>

支持库版本:25.1.1。 电话:Nexus 5 Android版:6.0.1(股票)

我的问题:为什么标题在展开状态下的末尾有点,而没有填充空格以显示更多内容?

[编辑1] 问题仍然存在于支持库版本25.3.0

3 个答案:

答案 0 :(得分:6)

CollapsingToolbarLayout使用辅助类 - CollapsingTextHelper - 来绘制和标注其标题。在撰写本文时,此类的最新版本将扩展标题的可用宽度限制为基于折叠状态下可用宽度的大小,并按状态文本大小的比例缩放。

相关来源评论:

// If the scaled down size is larger than the actual collapsed width, we need to
// cap the available width so that when the expanded text scales down, it matches
// the collapsed width

这显然是为了解决一些边缘情况,其中标题会与其他Toolbar内容重叠,如the relevant commit上的说明所述。

  

修复在图标上显示的CollapsingToolbarLayout

     

CTL缩放标题,适用于大多数情况。   虽然标题可以在哪里但有边缘情况   在工具栏内容上绘制,即图标。

     

此CL修复了折叠的边缘情况   和扩展的文本大小在大小上相似   意味着有限/无缩放发生   滚动时。在这种情况下,我们需要限制   展开时任何可用的宽度,以便它   “缩放”以匹配折叠时的折叠宽度。

通常情况下,我都是要撕毁View类,用反射和其他技巧来修改它们的行为,但在这种情况下,给定的设置是这样的,这将需要一些非常繁重的工作。辅助类通常不能在库包外部访问,它的实例在CollapsingToolbarLayout中是私有的,并且大小计算是在私有的辅助方法中执行的,主要是局部变量。

如果有可能,最简单的解决方案是恢复到此修复之前发布的库版本。我还没有确定带来这种变化的确切版本,遗憾的是support library revision history似乎没有提到它。但是,这个提交是在去年年中(2016年)进行的,所以可能在版本24.0.0左右,或者稍晚一些。我可以验证23.4.0中是否存在该行为。

如果你愿意,你当然可以file a bug report,但不能保证他们认为这是一个错误。我没有找到任何先前提出的有关此问题的问题,除了this tangentially-related one抱怨椭圆化是这种变化的副作用。

答案 1 :(得分:0)

您可以关闭椭圆机。将其添加到TextAppearance样式:

<item name="android:ellipsize">none</item>

如果有必要,您还可以手动更改通过向样式添加宽度而创建的文本视图的宽度

<item name="android:width">300dp</item>

答案 2 :(得分:0)

我编辑你的代码,看看你可能喜欢这个

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/tablayout"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="142dp"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginBottom="20dp"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleTextAppearance="@style/ExpandedText"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:layout_collapseMode="pin" />
    </android.support.design.widget.CollapsingToolbarLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_below="@+id/toolbar"
        android:background="?attr/colorPrimary"
        android:gravity="bottom"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:tabIndicatorColor="?attr/colorPrimaryDark" />
</android.support.design.widget.AppBarLayout>

这是活动类

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;
private CollapsingToolbarLayout collapsingToolbar;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.answer2);

    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle("UPC VONALKODOS TERMEK");
    collapsingToolbar.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
    collapsingToolbar.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);
}

}

这是res / style /:

<style name="CollapsedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">normal</item>
</style>
<style name="ExpandedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">20sp</item>
    <item name="android:textStyle">bold</item>
</style>