在CollapsingToolbarLayout中添加带有标题的图标 [英] Add icon with title in CollapsingToolbarLayout
本文介绍了在CollapsingToolbarLayout中添加带有标题的图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用CoordinatorLayout来获得这种效果:
这是布局代码:
<?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:id="@+id/coordinatorRootLayout"
android:background="@android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/android_appbar_layout"
android:layout_width="match_parent"
android:layout_height="220dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayoutAndroidExample"
android:layout_width="match_parent"
android:background="#fff"
app:collapsedTitleGravity="left"
app:expandedTitleTextAppearance="@color/card_outline"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:expandedTitleGravity="center_horizontal"
app:contentScrim="?attr/colorPrimary"
app:statusBarScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="32dp"
app:expandedTitleMarginEnd="48dp">
<ImageView
android:id="@+id/parallax_header_imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/orange_triangle"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8"/>
<ImageView
app:expandedTitleGravity="center_horizontal"
android:id="@+id/someImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/circle"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="-1"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="none"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="@+id/linear_layout_android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"
android:background="@color/off_white"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="vertical">
<GridView
android:id="@+id/gridview_parallax_header"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="100dp"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
这是我得到的输出 如何在标题文字上使用图标?
解决方案
您可以尝试以下
现在进入MainActivity.java
private void handleToolbarTitleVisibility(float percentage) {
if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {
if(!mIsTheTitleVisible) {
startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.VISIBLE);
toolbar.setAlpha(0.9f);
toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.Primary)));
mIsTheTitleVisible = true;
}
}
else {
if (mIsTheTitleVisible) {
startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE);
toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(android.R.color.transparent)));
mIsTheTitleVisible = false;
}
}
}
注意:展开时，使工具栏背景保持透明.
I am using CoordinatorLayout to get this effect :
Here is the layout code:
<?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:id="@+id/coordinatorRootLayout"
android:background="@android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/android_appbar_layout"
android:layout_width="match_parent"
android:layout_height="220dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayoutAndroidExample"
android:layout_width="match_parent"
android:background="#fff"
app:collapsedTitleGravity="left"
app:expandedTitleTextAppearance="@color/card_outline"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:expandedTitleGravity="center_horizontal"
app:contentScrim="?attr/colorPrimary"
app:statusBarScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="32dp"
app:expandedTitleMarginEnd="48dp">
<ImageView
android:id="@+id/parallax_header_imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/orange_triangle"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8"/>
<ImageView
app:expandedTitleGravity="center_horizontal"
android:id="@+id/someImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/circle"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="-1"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="none"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="@+id/linear_layout_android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"
android:background="@color/off_white"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="vertical">
<GridView
android:id="@+id/gridview_parallax_header"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="100dp"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
and here is what I am getting as output How can use an icon with the title text?
解决方案
You may try the following
Reference for Co-Ordinator Layout
Now inside your MainActivity.java
private void handleToolbarTitleVisibility(float percentage) {
if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {
if(!mIsTheTitleVisible) {
startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.VISIBLE);
toolbar.setAlpha(0.9f);
toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.Primary)));
mIsTheTitleVisible = true;
}
}
else {
if (mIsTheTitleVisible) {
startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE);
toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(android.R.color.transparent)));
mIsTheTitleVisible = false;
}
}
}
Note: Keep the toolbars background transparent when expanded.
这篇关于在CollapsingToolbarLayout中添加带有标题的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
