如何在上下晃动时隐藏和取消文本视图

时间:2016-01-05 11:30:31

标签: android textview android-coordinatorlayout floating-action-button onscrolllistener

我正在制作一个应用程序,其中我正在使用协调器布局,我正在使用两个textview和两个浮动按钮。当我向上滚动时,当一个浮动按钮不在视图中时,两个按钮都会隐藏,但是文本视图不会隐藏。

下面显示的示例图像,我已经解释过了。 View when the floating action button is inside the view

View when both textivew and floatingactionbuttons are out of view

这是布局的mycode

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.trueblueoperator.samplescrolling.ScrollingActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="192dp"
            android:scaleType="centerCrop"
            android:src="@drawable/image"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<include layout="@layout/content_scrolling" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/dislike"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="right|center_vertical" />

<TextView
    android:id="@+id/dislikes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dp"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    android:paddingRight="70dp"
    android:textSize="20dp"
    android:background="@drawable/rounded_corner"
    android:text="10"
    android:focusable="true"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="right|center_vertical"
    />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/like"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="right|bottom" />

<TextView
    android:id="@+id/likes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dp"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    android:paddingRight="70dp"
    android:textSize="20dp"
    android:focusable="true"
    android:background="@drawable/rounded_corner"
    android:text="100"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="right|bottom"
    />


</android.support.design.widget.CoordinatorLayout>

3 个答案:

答案 0 :(得分:1)

AppBarLayout

上添加Offset Changed Listener
mAppBarLayout.addOnOffsetChangedListener(this);

覆盖方法enter code here

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {

    if (Math.abs(i) >= (appBarLayout.getTotalScrollRange())) {
        // Make your TextView Visible here
    } else {
        // Make your TextView Invisible here
    }

}

答案 1 :(得分:0)

我不确定你能不能这样做。我这样解决了: 在活动中添加此侦听器。

mAppBarLayout = (AppBarLayout)findViewById(R.id.appbar);
        mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                if (state == State.COLLAPSED) {
                    hideTextView();
                } else {
                    showTextView();
                }
            }
        });

AppBarStateChangeListener

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {

public enum State {
    EXPANDED,
    COLLAPSED,
    IDLE
}


private State mCurrentState = State.IDLE;

@Override
public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
    if (i == 0) {
        if (mCurrentState != State.EXPANDED) {
            onStateChanged(appBarLayout, State.EXPANDED);
        }
        mCurrentState = State.EXPANDED;
    } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
        if (mCurrentState != State.COLLAPSED) {
            onStateChanged(appBarLayout, State.COLLAPSED);
        }
        mCurrentState = State.COLLAPSED;
    } else {
        if (mCurrentState != State.IDLE) {
            onStateChanged(appBarLayout, State.IDLE);
        }
        mCurrentState = State.IDLE;
    }
}

public abstract void onStateChanged(AppBarLayout appBarLayout, State state);

}

答案 2 :(得分:0)

您可以在滚动时将CoordinatorLayout.Behavior添加到要隐藏的TextView

看看我的回答,解释是针对FAB,但您可以轻松修改TextView

https://stackoverflow.com/a/34028178/557179