Android-固定滚动视图上的标题并具有拉动缩放效果

时间:2019-03-25 16:18:20

标签: java android

我目前正在将我们的应用程序从ios重写为android,因此无法正常工作。因此,在iOS中,我们使用this library来实现具有视差效果的内容滚动视图上的固定标头。我迅速修改了该示例并将其导出为gif,以便更清楚地了解我们要实现的目标:

ios

因此,我首先在this片段中尝试了CollapsingToolbarLayout的某些功能。因此,基本上,该代码段会添加AppBarLayout.Behavior,以实现缩放效果。大修感觉不顺畅。

接下来,我发现PullZoomView在Android中似乎很流行。缩放和滚动行为感觉很棒。唯一的问题是标题不是固定的,而是像这样被listview滚动:

android

因此,我深入研究了代码,并尝试根据我的建议对其进行修改,但它似乎很笨拙且复杂。

因此,从我在所有库中看到的结果来看,这种对头行为的过度滚动似乎更为常见。在编写自己的解决方案之前,有人对我如何实现自己想要的行为有任何建议吗?可能有我找不到的图书馆吗?

2 个答案:

答案 0 :(得分:1)

没有直接回答您的问题,但我制作了一个库,其中包含一个可在单击/触摸时扩展的组件。我认为您也许可以使用代码来创建自己的滚动条标题。

https://github.com/NadavTasher/ToolLibs/blob/master/lightool/src/main/java/nadav/tasher/lightool/graphics/views/ExpandingView.java

例如将固定视图设为标题,将扩展视图设为滚动视图

答案 1 :(得分:1)

提交此问题后,我自行写了一个解决方案。我真的很喜欢iOS库中的概念,即您可以为标题和内容部分使用单独的UIViewController,因此在Android中,似乎可以使用Fragments。如果有人想获得相同的效果,我想分享我的代码:

illustration

向您的build.gradle添加以下依赖项:

implementation 'me.everything:overscroll-decor-android:1.0.4'
implementation 'com.github.ksoichiro:android-observablescrollview:1.6.0'

我的课(对不起,有点混乱):

public abstract class ParallaxHeaderActivity extends AppCompatActivity implements ObservableScrollViewCallbacks {

    private ObservableScrollView scrollView;
    private LinearLayout headerView;
    private FrameLayout contentView;

    private int headerHeight = 0;
    private int minimumHeaderHeight = 0;

    protected void setContentView(int layout, Fragment header, Fragment content){

        super.setContentView(layout);

        ViewGroup rootView = (ViewGroup) ((ViewGroup) this
                .findViewById(android.R.id.content)).getChildAt(0);

        headerHeight = (int)convertDpToPixel(260, this);
        minimumHeaderHeight = (int)convertDpToPixel(160, this);

        int contentViewId = View.generateViewId();

        contentView = new FrameLayout(this);
        contentView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        contentView.setPadding(0, headerHeight, 0, 0);
        contentView.setId(contentViewId);

        scrollView = new ObservableScrollView(this);
        scrollView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        scrollView.setScrollViewCallbacks(this);
        scrollView.setFillViewport(true);
        scrollView.addView(contentView);
        scrollView.setScrollViewCallbacks(this);

        IOverScrollDecor decor = new VerticalOverScrollBounceEffectDecorator(new ScrollViewOverScrollDecorAdapter(scrollView));
        decor.setOverScrollUpdateListener(new IOverScrollUpdateListener() {
            @Override
            public void onOverScrollUpdate(IOverScrollDecor decor, int state, float offset) {
                if (offset > 0) {
                    // 'view' is currently being over-scrolled from the top.
                    update((int)-offset);
                }

            }
        });

        rootView.addView(scrollView);

        addFragment(contentViewId, content);

        int headerViewId = View.generateViewId();

        headerView = new LinearLayout(this);
        headerView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, headerHeight));
        headerView.setId(headerViewId);

        rootView.addView(headerView);

        addFragment(headerViewId, header);

    }


    @Override
    public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
        update(scrollY);
    }

    @Override
    public void onDownMotionEvent() {
    }

    @Override
    public void onUpOrCancelMotionEvent(ScrollState scrollState) {
    }

    private void addFragment(int id, Fragment fragment){

        final FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(id, fragment);
        transaction.addToBackStack(null);
        transaction.commit();

    }

    private void update(final int scrollY) {
        headerView.getLayoutParams().height = Math.max(headerHeight - scrollY, minimumHeaderHeight);
        headerView.requestLayout();
    }

    public static float convertDpToPixel(float dp, Context context){
        return dp * ((float) context.getResources().getDisplayMetrics().densityDpi / DisplayMetrics.DENSITY_DEFAULT);
    }

}

在“活动”中,您可以这样称呼它:

setContentView(R.layout.activity_main, new HeaderFragment(), new ContentFragment());

fragment_content.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content"
    tools:context=".ContentFragment">

        <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:text="@string/lipsum"/>

</FrameLayout>

fragment_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@drawable/example"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:text="Test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="1"
        android:minHeight="?attr/actionBarSize"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>