我已经实现了CollapsingToolbarLayout
来自 Chris Banes 的新示例代码。
但是,背景图像视图的图像都具有白色背景。工具栏主题也是ThemeOverlay.AppCompat.Dark.ActionBar
白色的,因此当 CollapsingToolbarLayout 完全展开时我看不到主页按钮。
我app:expandedTitleTextAppearance
可以设置标题字段的颜色。是否也可以设置主页按钮和菜单图标的颜色?
我已经实现了CollapsingToolbarLayout
来自 Chris Banes 的新示例代码。
但是,背景图像视图的图像都具有白色背景。工具栏主题也是ThemeOverlay.AppCompat.Dark.ActionBar
白色的,因此当 CollapsingToolbarLayout 完全展开时我看不到主页按钮。
我app:expandedTitleTextAppearance
可以设置标题字段的颜色。是否也可以设置主页按钮和菜单图标的颜色?
这是我在展开和折叠布局时如何更改抽屉和选项图标颜色的示例:
protected void onCreate(Bundle savedInstanceState) {
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset)
{
Drawable upArrow = ResourcesCompat.getDrawable(getResources(), R.drawable.drawer_icon, null);
if (offset < -200)
{
upArrow.setColorFilter(Color.parseColor("#000000"), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);
Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.option_menu_icon);
drawable.setColorFilter(Color.parseColor("#000000"), PorterDuff.Mode.SRC_ATOP);
toolbar.setOverflowIcon(drawable);
}
else
{
upArrow.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.option_menu_icon);
drawable.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP);
toolbar.setOverflowIcon(drawable);
}
}
});
最好在工具栏中使用2 个不同的图像。其他可能会导致一些不必要的问题:
因此,您的工具栏将如下所示:
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways|snap">
<ImageView
android:id="@+id/imageViewBack"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:scaleType="center"
android:src="@drawable/button_back_white" />
</android.support.v7.widget.Toolbar>
您将imageViewBack
在工具栏折叠时设置可绘制:
appBarLayout.addOnOffsetChangedListener((appBarLayout, offset) -> {
final boolean isCollapsed = (offset == (-1 * appBarLayout.getTotalScrollRange()));
imageViewBack.setImageDrawable(ContextCompat.getDrawable(context,
isCollapsed ?
R.drawable.button_back_red :
R.drawable.button_back_white));
});
使用 ColorFilter 使用以下方法滚动时,您可以获得漂亮的颜色过渡。希望你喜欢Kotlin
app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout: AppBarLayout, offset: Int ->
val colorComponent = Math.max(0.3f,offset.toFloat() / -appBarLayout.totalScrollRange)
toolbar.navigationIcon?.colorFilter =
PorterDuffColorFilter(Color.rgb(colorComponent, colorComponent, colorComponent), PorterDuff.Mode.SRC_ATOP)
})
这将在 CollapsingToolbarLayout 展开时为您提供一个深色导航图标,并在折叠状态下为您提供一个白色图标。
在我看来,这只有在您更改主页按钮、菜单图标和溢出按钮的可绘制对象时才有可能。幸运的是,Google 为我们提供了一个名为Tinted Drawables的新 API ,它允许我们设置可绘制或九个补丁图像的颜色。下面是它的工作原理:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@android:drawable/ic_menu_camera"
android:tint="@color/menu_icon_color"/>
现在,您可以Drawable
像在布局中使用任何其他定义一样使用这个新定义。对于主页按钮和溢出按钮,您还必须像这样覆盖样式定义:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:homeAsUpIndicator">@drawable/tinted_home_button</item>
<item name="android:actionOverflowButtonStyle">@style/OverFlowButton</item>
</style>
<style name="OverFlowButton" parent="AppTheme">
<item name="android:src">@drawable/tinted_overflow_button</item>
</style>
不幸的是,所有这些东西(样式定义除外)仅在 API 级别 21+ 上可用,并且不包含在支持库中。如果您必须支持低于 Lollipop 的设备,我认为最好的方法是使用Android Assets Studio,您可以在其中自行着色图标并将它们下载为 png 文件。
sdk 中的主页按钮、溢出按钮和一些精选股票图标受以下因素影响colorControlNormal
:
<style name="ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">@color/accent</item>
</style>
如果您有其他图标,则需要循环并手动过滤它们:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.sample_actions, menu);
for(int i = 0; i < menu.size(); i++){
Drawable drawable = menu.getItem(i).getIcon();
if(drawable != null) {
drawable.mutate();
drawable.setColorFilter(getResources().getColor(R.color.accent), PorterDuff.Mode.SRC_ATOP);
}
}
return true;
}