如何在 CollapsingToolbarLayout 内的工具栏中固定标题
how to pin title in Toolbar inside CollapsingToolbarLayout
这是我的布局:
<android.support.design.widget.AppBarLayout
<android.support.design.widget.CollapsingToolbarLayout
...
<android.support.v7.widget.Toolbar
...
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
我希望标题保留在工具栏中,而不是在 CollapsingToolbarLayout 中。所以我改变了我的代码:
mCollapsingToolbar = ...
mCollapsingToolbar.setTitle(title);
至:
mTitleBar = ...
setSupportActionBar(mTitleBar);
getSupportActionBar().setTitle(title);
但是标题不可见。我的设备是 Nexus 6 5.1.0
提前致谢。
更新 1:我已将代码更改为此,但仍然无法正常工作:(
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle(title);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
更新 2:这是这三个视图的代码片段:
private void setUpAppBarLayout() {
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
appBarLayout.setBackgroundColor(extractBackgroundColor());
}
private void setUpCollapsingToolbarLayout() {
if (null == mCollapsingToolbar) {
mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
}
}
private void setUpToolbar(String title) {
mToolbar = (Toolbar) findViewById(R.id.tb_main);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
supportFinishAfterTransition();
}
});
mToolbar.inflateMenu(R.menu.menu_group_activity);
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
if (R.id.action_settings == item.getItemId()) {
...
return true;
} else {
return false;
}
}
});
mToolbar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mRecyclerView.smoothScrollToPosition(0);
}
});
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle(title);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
调用setSupportActionBar(mToolbar)后,标题和菜单都不可见
您需要在代码中启用 actionBar.setDisplayHomeAsUpEnabled(true);
实际上,当您将工具栏的标题包装在 CollapsingToolBarLayout 中时,它看起来好像消失了,所以我针对此问题得到的唯一解决方案是创建一个新的 TextView 并将其添加到工具栏,请记住工具栏是一个 ViewGroup,因此您可以向其中添加小部件。它没有我想要的那么干净,但现在可以用了。
TextView text = new TextView(this);
text.setText(title);
text.setTextAppearance(this, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse);
toolbar.addView(text);
希望我也能尽快找到 xml-friendly 解决方案。
为了使工具栏标题与 CollapsingToolbarLayout 一起使用,您需要将 ctl 的标题启用设置为 false
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitleEnabled(false);
解决方法很简单。正如 Daniel Persson 所说,您只需设置 collapsingToolbarLayout.setTitleEnabled(false);
或使用 XML 属性 app:titleEnabled="false"
并使用内部工具栏而不是 CollapsingToolbarLayout 设置标题,即:toolbar.setTitle(title);
它非常简单,不需要解决方法。
这里的技巧是设置CollapsingToolbarLayout的titleEnabled = false
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Message"
app:titleMarginTop="13dp"
app:titleTextColor="@android:color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
或通过代码:
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
collapsingToolbarLayout.setTitleEnabled(false);
也许是这个?只需将 android:fitsSystemWindows="true"
添加到 AppBarLayout
<android.support.design.widget.CoordinatorLayout
...
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
...
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="My Title"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>
This is what you get
这是我的布局:
<android.support.design.widget.AppBarLayout
<android.support.design.widget.CollapsingToolbarLayout
...
<android.support.v7.widget.Toolbar
...
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
我希望标题保留在工具栏中,而不是在 CollapsingToolbarLayout 中。所以我改变了我的代码:
mCollapsingToolbar = ...
mCollapsingToolbar.setTitle(title);
至:
mTitleBar = ...
setSupportActionBar(mTitleBar);
getSupportActionBar().setTitle(title);
但是标题不可见。我的设备是 Nexus 6 5.1.0
提前致谢。
更新 1:我已将代码更改为此,但仍然无法正常工作:(
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle(title);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
更新 2:这是这三个视图的代码片段:
private void setUpAppBarLayout() {
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
appBarLayout.setBackgroundColor(extractBackgroundColor());
}
private void setUpCollapsingToolbarLayout() {
if (null == mCollapsingToolbar) {
mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
}
}
private void setUpToolbar(String title) {
mToolbar = (Toolbar) findViewById(R.id.tb_main);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
supportFinishAfterTransition();
}
});
mToolbar.inflateMenu(R.menu.menu_group_activity);
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
if (R.id.action_settings == item.getItemId()) {
...
return true;
} else {
return false;
}
}
});
mToolbar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mRecyclerView.smoothScrollToPosition(0);
}
});
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle(title);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
调用setSupportActionBar(mToolbar)后,标题和菜单都不可见
您需要在代码中启用 actionBar.setDisplayHomeAsUpEnabled(true);
实际上,当您将工具栏的标题包装在 CollapsingToolBarLayout 中时,它看起来好像消失了,所以我针对此问题得到的唯一解决方案是创建一个新的 TextView 并将其添加到工具栏,请记住工具栏是一个 ViewGroup,因此您可以向其中添加小部件。它没有我想要的那么干净,但现在可以用了。
TextView text = new TextView(this);
text.setText(title);
text.setTextAppearance(this, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse);
toolbar.addView(text);
希望我也能尽快找到 xml-friendly 解决方案。
为了使工具栏标题与 CollapsingToolbarLayout 一起使用,您需要将 ctl 的标题启用设置为 false
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitleEnabled(false);
解决方法很简单。正如 Daniel Persson 所说,您只需设置 collapsingToolbarLayout.setTitleEnabled(false);
或使用 XML 属性 app:titleEnabled="false"
并使用内部工具栏而不是 CollapsingToolbarLayout 设置标题,即:toolbar.setTitle(title);
它非常简单,不需要解决方法。
这里的技巧是设置CollapsingToolbarLayout的titleEnabled = false
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Message"
app:titleMarginTop="13dp"
app:titleTextColor="@android:color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
或通过代码:
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
collapsingToolbarLayout.setTitleEnabled(false);
也许是这个?只需将 android:fitsSystemWindows="true"
添加到 AppBarLayout
<android.support.design.widget.CoordinatorLayout
...
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
...
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="My Title"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>
This is what you get