AppBarLayout पृष्ठभूमि

Question

मैं प्ले स्टोर से मिलता-जुलता एक खोज टुकड़ा बनाने के लिए कोशिश कर रहा हूँ पारदर्शी बनाने के लिए कैसे:

मेरे AppBarLayout उस में एक CardView है, और पृष्ठभूमि के लिए सेट है पारदर्शी:

<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/transparent" 
     android:theme="@style/ThemeOverlay.AppCompat.ActionBar" 
     app:elevation="0dp"> 

     <!-- CardView --> 

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

    <android.support.v4.widget.NestedScrollView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scrollbars="vertical" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <!-- Main content --> 

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

लेकिन जैसा कि आप देख सकते हैं, वहाँ CardView तो इसके पीछे सामग्री छिपा हुआ है कि पीछे एक ठोस पृष्ठभूमि है:

मैं कैसे AppBarLayout की पृष्ठभूमि पारदर्शी बना सकते हैं ताकि सामग्री के पीछे दिखाई दे रहा है?

Answer 1

वही समस्या मेरे साथ हुई और इस बिंदु पर AppBarLayout की पारदर्शिता से इसका कोई लेना-देना नहीं है। लेकिन AppBarLayout अपने NestedScrollView के नीचे ही जब में fading की सामग्री धक्का।

आप इस से

1. अपने NestedScrollView चलती ऊपर का समाधान कर सकते हैं और पीछे AppBarLayout और
2. के साथ अपने NestedScrollView करने के लिए एक अंतरिक्ष तत्व जोड़ AppBar के आकार

चरण 1 आसानी से करने के लिए इस जोड़कर प्राप्त किया जा सकता अपने onCreate()

mNestedScroll.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
    @Override 
    public void onGlobalLayout() { 
     mNestedScroll.getViewTreeObserver().removeOnGlobalLayoutListener(this); 

     final int appBarHeight = mAppBar.getHeight(); 
     mNestedScroll.setTranslationY(-appBarHeight); 
     mNestedScroll.getLayoutParams().height = mNestedScroll.getHeight() + appBarHeight; 
    } 
}); 

चरण 2 के लिए आप अपने NestedScrollView करने के लिए एक स्पेसर के रूप में AppBar की ऊंचाई के साथ एक खाली दृश्य जोड़ने की जरूरत है। नोट: मैंने अपने दृष्टिकोण में NestedScrollView के बजाय RecyclerView का उपयोग किया था, इसलिए मुझे अपने RecyclerView में appBarHeight के साथ एक खाली व्यूहोल्डर जोड़ना पड़ा।तो यह टुकड़ा परीक्षण नहीं किया है, लेकिन यह आप के लिए चाल करना चाहिए:

<View 
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize"/> 

Answer 2

कार्डव्यू को match_parent आयामों के साथ फ्रेमलेआउट में डालने का प्रयास करें, ताकि कार्डव्यू में इसके आस-पास की जगह हो। मुझे 100% आत्मविश्वास नहीं है कि यह काम करेगा, लेकिन यह कोशिश करने लायक है।

Answer 3

मैंने आपको बहुत कम कोड देने की कोशिश की जो मुझे ढूंढ रही है। यह एक वैकल्पिक समाधान है, लेकिन आप एक साधारण दृश्य को AppBarLayout बदलने की आवश्यकता होगी ... इस देखो:

<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:id="@+id/annonce.main.coordinator" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
tools:ignore="RtlHardcoded"> 

<android.support.v7.widget.RecyclerView 
    android:id="@+id/rv" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"/> 

<!-- here you put your search bar, can be any view !--> 
<android.support.v7.widget.CardView 
    android:id="@+id/searchbar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:cardElevation="4dp" 
    app:cardUseCompatPadding="true" 
    app:layout_behavior="[package].RecyclerSearchBehavior"> 

    <EditText 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:hint="Pesquise aqui" 
     android:minHeight="58dp"/> 

</android.support.v7.widget.CardView> 

नोट: यह एक CoordinatorLayout के अंदर है।

public class RecyclerSearchBehavior extends CoordinatorLayout.Behavior<CardView> { 
//Initial height and location 
private int mViewHeight; 
private int[] mViewStartLocation; 


public RecyclerSearchBehavior(Context context, AttributeSet attrs) { 
} 

@Override 
public boolean layoutDependsOn(CoordinatorLayout parent, final CardView child, View dependency) { 
    //the first function called. The initial variables settings. 
    //getting height 
    mViewHeight = child.getHeight(); 
    //getting location on screen 
    mViewStartLocation = new int[2]; 
    child.getLocationOnScreen(mViewStartLocation); 
    //if the dependecy is your recycler 
    if (dependency instanceof RecyclerView) 
     //add scroll listener 
     ((RecyclerView) dependency).addOnScrollListener(new RecyclerView.OnScrollListener() { 
      @Override 
      public void onScrollStateChanged(RecyclerView recyclerView, int newState) { 
       super.onScrollStateChanged(recyclerView, newState); 
      } 
      //here the magic happens 
      @Override 
      public void onScrolled(RecyclerView recyclerView, int dx, int dy) { 
       super.onScrolled(recyclerView, dx, dy); 
       //animate function 
       animate(child, dy); 
      } 
     }); 
    return dependency instanceof RecyclerView; 
} 

private void animate(CardView child, int dy) { 
    //the initial position of your search bar is 0, because it is on top, so... 
    if (child.getY() <= 0) 
     //dy is an integer that shows you if user scrolls up or down 
     if (dy >= 0) { 
      //move to top is a negative value, so *-1 
      //if that is < than height, scrools up 
      if ((child.getY() * -1) <= (mViewHeight)) 
       child.setTranslationY(child.getY() - dy * 0.1f); 
     } else { 
      //if the position of search bar is < than zero, scrolls down 
      if (child.getY() < 0) 
       child.setTranslationY(child.getY() - dy * 0.1f); 
      //else, put the view on 0y 
      else child.setY(0); 
     } 
    //else, put the view on 0y again. this function is called after any user      
    //touches... so everything happens fast and with numbers different than 
    //1 
    else child.setY(0); 
} 

}

और किया: एक व्यवहार है कि देखने खोज का उपयोग कर बार आप के प्रकार है बनाएँ। आपका "सर्च बार" यहां है।

यहां एकमात्र समस्या है, आपको रीसाइक्लिंग पर अपने पहले आइटम में पैडिंग जोड़ने या पहले आइटम के रूप में एक पारदर्शी दृश्य जोड़ने की आवश्यकता होगी।