将imageViews锚定到折叠工具栏

时间:2015-09-21 20:48:52

标签: android android-toolbar floating-action-button android-collapsingtoolbarlayout

enter image description here

在此图片中,他们实施了一个折叠工具栏,其中包含一个视差ImageView和一个固定在工具栏上的FAB。在我正在制作的应用程序中,我需要锚定一个ImageView而不是一个浮动动作按钮,同时仍然保持所有淡出和动画。我该怎么做呢?

我当前的

  

activity_main.xml中

<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:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/bar"
    android:layout_width="match_parent"
    android:layout_height="252dp"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginBottom="32dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/random"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/anim_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"/>

        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView
    android:id="@+id/scrollableview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<com.example.sudarshan.testapp.MLRoundedImageView
    android:layout_width="152dp"
    android:layout_height="152dp"
    app:layout_anchor="@+id/bar"
    app:layout_anchorGravity="bottom|center"
    android:id="@+id/circularImage"/>
</android.support.design.widget.CoordinatorLayout>

ImageView被锚定,但它不会像FAB那样消失并重新出现。

1 个答案:

答案 0 :(得分:4)

您可以构建一个扩展CoordinatorLayout.Behavior的自定义行为类,然后通过添加ImageView属性将其附加到app:layout_behavior="com.path.to.behavior.class"

或者,在您声明 FAB AppBarLayout.OnOffsetChangedListener的{​​{1}}处添加Activity,并使用AppBarLayout参数确定何时在verticalOffset上开始AlphaAnimation

修改

ImageView

调整public static MainActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener { private static final float THRESHOLD_PERCENTAGE = 0.2F; private AppBarLayout mAppBarLayout; //... @Override protected void onCreate(Bundle savedInstanceState) { //... mAppBarLayout = (AppBarLayout) findViewById(R.id.my_app_bar); mAppBarLayout.addOnOffsetChangedListener(this); } @Override public void onOffsetChanged(AppBarLayout appBarLayout, int offset) { int maxScroll = appBarLayout.getTotalScrollRange(); float progressPercentage = (float) (Math.abs(offset)/maxScroll); if (progressPercentage >= THRESHOLD_PERCENTAGE) { //start an alpha animation on your ImageView here (i.e. fade out) } else { //Add an opposite animation here (i.e. it fades back in again) } } 值将改变动画THRESHOLD_PERCENTAGE开始的点。