展开的 CollapsingToolbarLayout 中的标题显示不正确
Title in expanded CollapsingToolbarLayout not displayed correctly
所以,我的 CollapsingToolbarLayout
在我的项目中遇到了一个奇怪的问题。在我的 activity 启动后,我的工具栏标题是这样显示的:
折叠后的布局是这样的:
示例中的原始标题文本为:“UPC VONALKODOS TERMEK”
我认为展开状态下的标题应该比折叠状态下的标题更长(有足够的空间)。这是我的 activity 的 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。
Phone:连结 5
Android 版本:6.0.1(库存)
我的问题: 为什么标题在展开状态的末尾有点,而不是填充 space 以显示更多内容?
[编辑 1] 问题仍然存在于支持库版本 25.3.0
您可以关闭椭圆化。将此添加到您的 TextAppearance 样式:
<item name="android:ellipsize">none</item>
如果有必要,您还可以通过向样式添加宽度来手动更改创建的文本视图的宽度
<item name="android:width">300dp</item>
我编辑你的代码看看这可能是你喜欢的
<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>
这是 Activity Class
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>
CollapsingToolbarLayout
使用助手 class - CollapsingTextHelper
- 绘制标题并为其设置动画。在撰写本文时,此 class 的最新版本将展开标题的可用宽度限制为基于折叠状态下可用宽度的大小,并按状态文本大小的比例缩放。
相关出处评论:
// 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.
上的注释中所述
Fix CollapsingToolbarLayout displaying over icons
CTL scales it title which works in most situations.
There are edge cases though where the title can be
drawn on the Toolbars contents, namely icons.
This CL fixes the edge cases where the collapsed
and expanded text sizes are similar in size, which
means that there is limited/no scaling happening
while scrolling. In this instance we need to cap
any available width when expanded, so that it
'scales' to match the collapsed width when collapsed.
通常情况下,我都是在撕裂 View
classes 以通过反射和其他技巧修改它们的行为,但在这种情况下,给定的设置是这样的,这需要一些时间真的很繁重。助手 class 通常无法在库包外访问,它的实例在 CollapsingToolbarLayout
中是私有的,并且大小计算是在私有的辅助方法中执行的,主要是局部变量。
如果可能的话,最简单的解决方案是恢复到此修复之前发布的库版本。我还没有确定带来这个变化的确切版本,不幸的是 support library revision history 似乎没有提到它。然而,该提交是在去年年中(2016 年)进行的,因此可能在版本 24.0.0 左右或稍晚一些。我可以验证 23.4.0 中不存在该行为。
您当然可以 file a bug report for this, if you like, though no guarantees that they'd consider this a bug. I didn't find any previously filed issues regarding this specifically, other than this tangentially-related one 抱怨该更改的副作用是省略。
所以,我的 CollapsingToolbarLayout
在我的项目中遇到了一个奇怪的问题。在我的 activity 启动后,我的工具栏标题是这样显示的:
折叠后的布局是这样的:
示例中的原始标题文本为:“UPC VONALKODOS TERMEK”
我认为展开状态下的标题应该比折叠状态下的标题更长(有足够的空间)。这是我的 activity 的 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。 Phone:连结 5 Android 版本:6.0.1(库存)
我的问题: 为什么标题在展开状态的末尾有点,而不是填充 space 以显示更多内容?
[编辑 1] 问题仍然存在于支持库版本 25.3.0
您可以关闭椭圆化。将此添加到您的 TextAppearance 样式:
<item name="android:ellipsize">none</item>
如果有必要,您还可以通过向样式添加宽度来手动更改创建的文本视图的宽度
<item name="android:width">300dp</item>
我编辑你的代码看看这可能是你喜欢的
<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>
这是 Activity Class
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>
CollapsingToolbarLayout
使用助手 class - CollapsingTextHelper
- 绘制标题并为其设置动画。在撰写本文时,此 class 的最新版本将展开标题的可用宽度限制为基于折叠状态下可用宽度的大小,并按状态文本大小的比例缩放。
相关出处评论:
// 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.
Fix CollapsingToolbarLayout displaying over icons
CTL scales it title which works in most situations. There are edge cases though where the title can be drawn on the Toolbars contents, namely icons.
This CL fixes the edge cases where the collapsed and expanded text sizes are similar in size, which means that there is limited/no scaling happening while scrolling. In this instance we need to cap any available width when expanded, so that it 'scales' to match the collapsed width when collapsed.
通常情况下,我都是在撕裂 View
classes 以通过反射和其他技巧修改它们的行为,但在这种情况下,给定的设置是这样的,这需要一些时间真的很繁重。助手 class 通常无法在库包外访问,它的实例在 CollapsingToolbarLayout
中是私有的,并且大小计算是在私有的辅助方法中执行的,主要是局部变量。
如果可能的话,最简单的解决方案是恢复到此修复之前发布的库版本。我还没有确定带来这个变化的确切版本,不幸的是 support library revision history 似乎没有提到它。然而,该提交是在去年年中(2016 年)进行的,因此可能在版本 24.0.0 左右或稍晚一些。我可以验证 23.4.0 中不存在该行为。
您当然可以 file a bug report for this, if you like, though no guarantees that they'd consider this a bug. I didn't find any previously filed issues regarding this specifically, other than this tangentially-related one 抱怨该更改的副作用是省略。