2017-07-11 2 views
1

Vor kurzem habe ich mit einem Problem betäubt. Auf meinen Android-Handy-Elementen der Liste oder blättern Ansichten mit der gleichen Höhe haben verschiedene Schatten in Bezug auf ihre Positionierung. Zum Beispiel, Ansichten auf der Oberseite des Bildschirms haben einen kleinen hellen Schatten, wann immer Ansichten auf der Unterseite des Bildschirms haben mehr dunkle und starke Schatten. Hier ist ein Screenshot von Google-Anwendung halten:Die gleiche Ansichtsansicht sieht für die Ansichten von oben und unten anders aus

If you will look at first card view and last one, you will see different shadows

So, dachte ich, dass dies wegen der genau Google ist Halten Anwendung. Vielleicht haben sich Jungs von Google entschieden, diesen Trick mit Schatten für ihre Anwendung zu machen. Daher habe ich eine Beispielanwendung erstellt.

Mein Layout:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <TextView 
     style="@style/AppButton" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="16dp" 
     android:text="Test"/> 

    <TextView 
     style="@style/AppButton" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="16dp" 
     android:text="Test"/> 

    <TextView 
     style="@style/AppButton" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="16dp" 
     android:text="Test"/> 

    <TextView 
     style="@style/AppButton" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="16dp" 
     android:text="Test"/> 

    <TextView 
     style="@style/AppButton" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="16dp" 
     android:text="Test"/> 

    <TextView 
     style="@style/AppButton" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="16dp" 
     android:text="Test"/> 

    <TextView 
     style="@style/AppButton" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="16dp" 
     android:text="Test"/> 

</LinearLayout> 

Mein Stile:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 

    <!-- Base application theme. --> 
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 
     <!-- Customize your theme here. --> 
     <item name="colorPrimary">@color/colorPrimary</item> 
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item> 
     <item name="colorAccent">@color/colorAccent</item> 
    </style> 

    <style name="AppButton"> 
     <item name="android:background">@color/colorAccent</item> 
     <item name="android:elevation">4dp</item> 
     <item name="android:gravity">center</item> 
     <item name="android:padding">16dp</item> 
     <item name="android:textColor">@android:color/white</item> 
    </style> 

</resources> 

Und der Ausgang ist:

enter image description here

Wie Sie sehen, haben wir den gleichen Effekt (die obere Ansicht hat einen kleinen Schatten, die untere Ansicht hat einen großen Schatten). Also meine Fragen sind:

  1. Was habe ich falsch gemacht?
  2. Wie kann ich den gleichen Schatten für alle Ansichten (nicht durch ihre Positionen) erreichen?
  3. Auch habe ich keine Erklärungen in der Dokumentation gefunden, also wo kann ich über dieses Phänomen lesen?
  4. Erfolgt dies auf allen Geräten oder nur auf bestimmten?

P. S .: Ich habe Nexus 5X, Android 7.1.2.

UPD: Eine wichtige Erwähnung, dass von Android Studio Preview Window alles in Ordnung ist. Jede Ansicht hat den gleichen Schatten wie andere. Aber auf einem echten Gerät können Sie den Unterschied sehen.

+0

Sie nicht nichts falsch, das ist tun, wie man Karten zu sehen sind wohl auf, ist der Schatten am Boden, da die Lichtquelle von der Spitze zu sein ist wohl. https://material.io/guidelines/components/cards.html# https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows – tyczj

+0

@tyczj Eigentlich habe ich Ihre Erklärung und erkannte, dass wir über verschiedene Dinge sprechen. Alle Schatten werden von oben nach unten geworfen, aber wenn Sie in der Liste und in den unteren Ansichten in der Liste nach oben schauen, sehen Sie, dass die Schatten unterschiedlich sind, aber für beide Ansichten 'Elevation = 4dp'. Aber für den Benutzer sieht es aus wie Ansichten oben auf dem Bildschirm haben 2-3dp Höhe und Ansichten auf der Unterseite des Bildschirms haben 4-5dp Höhe –

Antwort

1

Schatten, die von der Elevation-API generiert werden, werden im 3D-Raum positioniert. Dies bedeutet, dass das Aussehen jedes Schattens nicht nur von seinem Höhenwert, sondern auch von der x- und y-Position des Schattenwirbels beeinflusst wird. Es ist fast wie in der realen Welt - Objekte unter einer Lichtquelle werfen kürzere Schatten als Objekte in weiter Entfernung.

Schauen Sie sich das erste von Ihnen gepostete Bild genauer an. Die Schatten sind länger an den linken Kanten der linken Karten und an den rechten Kanten der rechten Karten als an den Kanten an der horizontalen Mitte.

Ad. 1. Nichts. Es funktioniert einfach so.

Ad. 2. Es ist nicht möglich Elevation API zu verwenden. Sie können Schatten selbst zeichnen.

Ad. 3. Weiß nicht, Entschuldigung.

Ad. 4. Alle Geräte.

Ad. UPD. Die Schatten im Editor sind statisch, also gibt es keinen Effekt, den Sie beobachten.

enter image description here

+0

Vielen Dank für Ihre Erklärung. Es scheint, dass Sie Recht haben, und nichts kann durch Standard-API getan werden. Vielen Dank! –

Verwandte Themen