[英]CollapsingToolbarLayout - Hide ImageView when Expanded, show when Collapsed
I would like to hide an ImageView (logo) when CollapsingToolbarLayout is expanded and only show the ImageView when the CollapsingToolbarLayout is collapsed.我想在展开 CollapsingToolbarLayout 时隐藏 ImageView(徽标),并且仅在折叠 CollapsingToolbarLayout 时显示 ImageView。 (I know how to do the reverse of this question). (我知道如何做这个问题的反面)。
As you can see from the screenshot below.正如您从下面的屏幕截图中看到的那样。 The big mast head is actually one big logo, image on left and then company name on right.大桅杆头实际上是一个大标志,左边是图像,右边是公司名称。 In collapsed mode I only want to show a small thumbnail of the logo.在折叠模式下,我只想显示徽标的小缩略图。
How can I accomplish this in XML or code please?请问如何用 XML 或代码完成此操作? Code & screenshots below:代码和截图如下:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:adjustViewBounds="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbarlayout_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="@color/colorPrimary">
<ImageView
android:id="@+id/mast_logo_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9"
android:src="@drawable/uj_logo_rectangle_orange_background" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="100dp"
app:contentInsetStart="40dp"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:orientation="horizontal"
app:layout_collapseMode="pin">
<ImageView
android:id="@+id/thumbnail_logo_main"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_marginTop="50dp"
android:layout_marginLeft="10dp"
android:src="@drawable/uj_rgb_logo_01" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="4">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingTop="20dp"
android:layout_marginLeft="10dp"
android:textSize="20sp"
android:textColor="#fff"
android:textStyle="bold"
android:text="Courses & Programmes"/>
<android.support.v7.widget.SearchView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="57dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_marginTop="50dp"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="@drawable/empty_avatar" />
</LinearLayout>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/fragment_all_faculties"/>
Follow the below code: 请遵循以下代码:
AppBarLayout appBarLayout = (AppBarLayout) view.findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
// If collapsed, then do this
imageViewBigLogo.setVisibility(View.GONE);
imageViewSmallLogo.setVisibility(View.VISIBLE);
} else if (verticalOffset == 0) {
// If expanded, then do this
imageViewBigLogo.setVisibility(View.VISIBLE);
imageViewSmallLogo.setVisibility(View.GONE);
} else {
// Somewhere in between
// Do according to your requirement
}
}
}););
In My code I will try this: 在我的代码中,我将尝试以下操作:
AppBarLayout appBarLayout = findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShow;
int scrollRange = -1;
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
if (scrollRange + verticalOffset == 0) {
//visible image view
isShow = true;
} else if (isShow) {
//invisible image view
isShow = false;
}
}
});
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
YOUR0VIEW.setAlpha((float) Math.abs(verticalOffset) / appBarLayout.getTotalScrollRange());
YOUR0VIEW.setAlpha(1f - (float) Math.abs(verticalOffset) / appBarLayout.getTotalScrollRange());
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.