如何使 ViewPager 滚动并将标题图像制作为折叠工具栏？

Question

我有一个包含标题图像和 ViewPager 的食谱片段，我在当前设计中面临两个问题：

1- 除非我按下标题图像并开始滚动，否则标签内容不会垂直滚动。我的意思是，如果我在标题图像上垂直滑动，视图将滚动。但是，如果我尝试从文本区域垂直滑动，它不会滚动。 （我有下面的图片）

2- 标题图像并没有像当前版本一样完全替换工具栏 Google Play Store 显示的应用程序如下第一个屏幕截图所示，第二个屏幕截图是我的应用程序的外观。

这是我的fragment_recipe.xml：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/tab_app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

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

        <android.widget.Toolbar
            android:id="@+id/tab_toolbar"
            android:layout_width="match_parent"
            android:layout_height="104dp"
            android:gravity="top"
            android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleMarginTop="13dp" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:textStyle="bold"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            app:layout_scrollFlags="scroll|enterAlways"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            app:tabIndicatorColor="@android:color/white" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tabMode="scrollable"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

这是我的 FargmentRecipe.java：

import android.annotation.TargetApi;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.ImageLoader;
import java.util.ArrayList;
import java.util.List;
import mamoonbraiga.MealMate.activities.MainActivity;
import mamoonbraiga.MealMate.extras.Recipe;
import mamoonbraiga.MealMate.network.VolleySingleton;
import mamoonbraiga.poodle_v3.R;


public class FragmentRecipe extends Fragment{

private ImageView header;
private VolleySingleton volleySingleton = VolleySingleton.getsInstance();;
private ImageLoader imageLoader=volleySingleton.getImageLoader();;
private Bundle bundle;

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){


    final View view = inflater.inflate(R.layout.fragment_recipe, container, false);
    MainActivity mainActivity = (MainActivity) getActivity();
    header = (ImageView) view.findViewById(R.id.recipe_header);  //setting up the header
    bundle = mainActivity.getSavedData();
    Recipe recipe = bundle.getParcelable("recipe");

    //load the header
    loadHeader(recipe);
    ((MainActivity) getActivity()).getSupportActionBar().hide();
    Toolbar toolbar = (Toolbar) view.findViewById(R.id.tab_toolbar);
    mainActivity.setActionBar(toolbar);
    mainActivity.getActionBar().setDisplayHomeAsUpEnabled(true);

    /** view pager and tab setup **/
    final ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
    viewPager.setVerticalScrollBarEnabled(true);
    setUpViewPager(viewPager);
    final TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FF5722"));
    tabLayout.setupWithViewPager(viewPager);
    /** view pager and tab setup **/

    return view;
}

private void loadHeader(Recipe recipe) {
    imageLoader.get(recipe.getImageUrl(), new ImageLoader.ImageListener() {
        @Override
        public void onResponse(ImageLoader.ImageContainer response, boolean isImmediate) {
            Drawable d = new BitmapDrawable(getResources(), response.getBitmap());
            header.setBackground(d);
        }

        @Override
        public void onErrorResponse(VolleyError error) {

        }
    });
}

private void showToast(String msg) {

    Toast.makeText(getContext(), msg, Toast.LENGTH_SHORT).show();
}

private void setUpViewPager(ViewPager viewPager) {

    ViewPagerAdapter adapter = new ViewPagerAdapter(getActivity().getSupportFragmentManager());
    adapter.addFrag(new FragmentDescription(), "Description");
    adapter.addFrag(new FragmentIngredients(), "Ingredients");
    adapter.addFrag(new FragmentNutrition(), "Nutrition");
    viewPager.setAdapter(adapter);

}

static class ViewPagerAdapter extends FragmentStatePagerAdapter{


    private final List<String> mFragmentTitleList = new ArrayList<>();
    private final List<Fragment> mFragmentList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFrag(Fragment fragment, String title){
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }
    @Override
    public CharSequence getPageTitle(int position){
        return mFragmentTitleList.get(position);
    }

}
@Override
public void onPause(){
    super.onPause();
    ((MainActivity) getActivity()).getSupportActionBar().show();
}

}

Answer 1

1) 我没有您的片段布局 xml（FragmentDescription、FragmentIngredients 和 FragmentNutrition 布局），但我猜您使用的是 ScrollView 而不是 NestedScrollView。在嵌套片段的根部试试这个：<android.support.v4.widget.NestedScrollView>

2）当你的标题折叠时，你还有黑色的状态栏吗？如果是这样，您必须为状态栏添加透明度。所以在您的主题中：<item name="android:statusBarColor">#80000000</item> （这里我使用了深色透明色，让它看起来更好看，但由你决定）

另请注意，您无法在棒棒糖之前的设备上获得完全透明的状态栏。

2bis）如果你已经有一个透明的状态栏（你看到图像在向上滚动一点后从后面经过），那么你可以试试这个技巧：

    <ImageView
        android:id="@+id/recipe_header"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/header"
        android:layout_marginTop="-24dp"
        android:fitsSystemWindows="true"
        android:scaleType="centerCrop"
        app:layout_collapseMode="parallax"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        />

这会将图像向上移动状态栏的高度，从而使其适合窗口顶部。可能有一个合适的解决方案，但它是我目前正在使用的解决方案。