1

我有具有報頭的圖像和ViewPager配方片段,以及我現在面臨兩個問題與當前設計:如何使ViewPager滾動並將標題圖像製作爲摺疊工具欄?

1-除非我按下標題圖片和啓動上的選項卡內容不垂直滾動滾動。我的意思是,如果我在頁眉圖像上垂直滑動,視圖將滾動。但如果我嘗試從文本區域垂直滑動,它不會滾動。 (我有一個圖像如下)

2-標題圖像並不是所有的方式來取代工具欄像當前版本谷歌Play商店顯示的應用程序,如下面的第一個截圖,第二個截圖是我的應用程序好像。

How Google Play displays apps

How my app looks like now

這裏是我的我的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(); 
} 

} 

回答

0

1)我沒有你的碎片佈局xml(FragmentDescription,FragmentIngredients和FragmentNutrition佈局),但我猜你正在使用ScrollView而不是NestedScrollView。試試這在你的嵌套片段的根:<android.support.v4.widget.NestedScrollView>

2)當你的標題崩潰,你還有黑色的狀態欄?如果是這樣,你需要添加透明的狀態bar.So在你的主題:<item name="android:statusBarColor">#80000000</item> (這裏我用的是暗透明色,讓它看起來更好,但它是由你)

還要注意的是你無法在預棒棒糖設備上獲得全透明狀態欄。

2之二)如果你已經有了一個透明的狀態欄(你看到的圖像傳遞位向上滾動之後後面),那麼你可以嘗試這個技巧:

<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" 
     /> 

這將通過圖像動起來狀態欄的高度,從而使它適合窗口的頂部。可能有一個合適的解決方案,但這是我目前使用的解決方案。

相關問題