2016-03-17 11 views
11

Mam RecyclerView z różnymi typami widoków. Każdy widok ma własne tło z górnymi, dolnymi lub bez zaokrąglonych rogów. Każdy używa tej samej wysokości widoku. Jest to jeden z tła w formacie XMLJak ustawić cień widoku tylko na stronach dla widoku o wysokości

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:color="@color/card_background_pressed" 
    tools:targetApi="lollipop"> 
    <item> 
     <shape> 
      <size 
       android:width="1dp" 
       android:height="1dp" /> 
      <solid android:color="@color/card_background_normal" /> 
     </shape> 
    </item> 
</ripple> 

Kiedy poglądy są ułożone obok siebie bez jakiejkolwiek marży wygląda jakby samo tło. To jest mój sposób na tworzenie tła karty dynamicznej. Innymi słowy można utworzyć Szukam kartę z wielu elementów w RecyclerView

Problem

Jak widać poniżej, gdy 2 poglądy są ułożone obok siebie, ich cienie zachodzą na siebie w narożnikach , nawet gdy promień tła rogu wynosi 0.

Czy ktoś wie, jak to naprawić? Dbam tylko o API 21+, więc musisz się martwić obsługą starszych wersji. Z góry dziękuję!

enter image description here

+0

jaki jest twój oczekiwany wynik? czy to nie nakładający się, ale wciąż połączony cień? –

+0

@Rod_Algonquin dokładnie, potrzebuję połączonego cienia, więc wygląda jak pojedyncza karta. –

+0

Następnie ustaw cień zamiast widoku recycle, a nie w każdym widoku. –

Odpowiedz

5

nie próbowałem z RippleDrawable ale myślę, że idea jest taka sama. Zacznijmy od prostego przypadku:

Android zapewnia klasę o nazwie ViewOutlineProvider. Możesz użyć tej klasy, aby stworzyć własny cień. Dla swojego problemu możesz ustawić przesunięcie dla cienia widoku od dołu, aby obszar nakładania został narysowany przez cień widoku z góry.

Niektóre kodu proszę:

pierwsze staram się stworzyć swój problem z tym układ:

<?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=".MainActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

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

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

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:paddingBottom="@dimen/activity_vertical_margin" 
     android:paddingLeft="@dimen/activity_horizontal_margin" 
     android:paddingRight="@dimen/activity_horizontal_margin" 
     android:paddingTop="@dimen/activity_vertical_margin" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 


     <LinearLayout 
      android:layout_width="300dp" 
      android:layout_height="400dp" 
      android:layout_centerInParent="true" 
      android:orientation="vertical"> 

      <TextView 
       android:id="@+id/top" 
       android:layout_width="100dp" 
       android:layout_height="50dp" 
       android:layout_marginLeft="50dp" 
       android:layout_marginTop="50dp" 
       android:background="@android:color/holo_blue_dark" 
       android:elevation="25dp" 
       android:gravity="center" 
       android:text="Top" /> 

      <TextView 
       android:id="@+id/bottom" 
       android:layout_width="100dp" 
       android:layout_height="50dp" 
       android:layout_below="@id/top" 
       android:layout_marginLeft="50dp" 
       android:layout_marginTop="2dp" 
       android:background="@android:color/holo_orange_light" 
       android:elevation="25dp" 
       android:gravity="center" 
       android:text="Bottom" /> 
     </LinearLayout> 
    </RelativeLayout> 
</android.support.design.widget.CoordinatorLayout> 

To jest trochę trudne do rozpoznania nakładających cieni:

enter image description here

Teraz dodaję dowolne przesunięcie y dla tego kodu:

public class MainActivity extends AppCompatActivity { 

    TextView mTopTv,mBottomTv; 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(toolbar); 
     mTopTv = (TextView)findViewById(R.id.top); 
     mBottomTv = (TextView)findViewById(R.id.bottom); 
     mBottomTv.setOutlineProvider(new ViewOutlineProvider() { 
      @Override 
      public void getOutline(View view, Outline outline) { 
       outline.setRect(0, 50, view.getWidth(), view.getHeight()); 
      } 
     }); 
    } 

} 

a wynik jest:

enter image description here

porównać dwa obrazy jasne jest, że obszar nakładania jest wyeliminowane.

+0

To wygląda obiecująco, jak obliczyłeś, że Y wynosi 50? –

+0

Ustawiam dowolnie pokazywanie wersji demo, ale możesz użyć wartości rzędnej i funkcji, która konwertuje dp na px, abyś mógł ustawić dokładną wartość. –

+0

Musiałem zdjąć trochę górnego konturu, aby cień pasował w moim przypadku, i aby uniknąć przycięcia widoku, można ustawić 'cardView.setClipToOutline (false);' – FJJ

Powiązane problemy