Séparateur d'ombres entre les fragments Android

Question

J'ai une présentation similaire à l'application ICS Gmail pour tablettes (ListFragment à gauche et le contenu à droite) et je me demandais comment construire les mises en page de telle sorte qu'il y ait un séparateur d'ombre entre les deux fragments (comme dans l'application Gmail, illustrée ci-dessous)

.

De plus, comme cela s'applique à cette question, comment puis-je avoir ce joli marqueur triangle/flèche dans la mise en page de l'élément de liste actif ?Je suppose que pour implémenter cela, le ListView lui-même doit mentir au-dessus de le "calque" d'ombre, mais je n'ai aucune idée de comment créer cela.

Answer 1

Juste pour que tout le monde le sache (car il semble y avoir un manque d'informations sur ce sujet), cela est réalisé dans le XML du sélecteur d'arrière-plan de la vue des lignes de liste individuelles.Par exemple, voici la disposition de l'écran principal,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_row"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/list_item_selector">

    ...<!-- Rest of layout goes here -->

</RelativeLayout>

Mais la magie vient dans le list_item_selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/list_pressed" />
    <item android:state_activated="true" android:drawable="@drawable/list_arrow_activated"  />
    <item android:drawable="@drawable/list_default" />
</selector>

En les définissant comme des dessinables à 9 patchs comme celui-ci, vous pouvez demander à chaque élément de la liste de contribuer sa largeur d'ombre à cette ligne au milieu, et lorsqu'il est activé, ce segment d'ombre sera remplacé par une flèche.J'espère que cela aidera quelqu'un, comme cela m'a certainement aidé !

Answer 2

Je cherche à faire la même chose que vous essayez de faire ;créer un effet selon lequel un fragment est "plus proche" qu'un autre.

La réponse de Roboguy explique comment placer le "sélecteur" de flèche blanche sur l'élément de liste ;Je vais essayer d'être plus précis sur les ombres.Un autre bon exemple d'utilisation de sélecteurs d'arrière-plan peut être vu dans le code source de l'application Google IO 2011. Une fois que vous avez la source, regardez les sélecteurs d'icônes fragment_dashboard.xml.

Le séparateur d'ombre est un dégradé appliqué au côté gauche d'une vue.Il y a deux parties ;

Tout d’abord, « l’ombre » elle-même :

res/shadow_left.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:angle="0"
    android:startColor="#55000000" 
    android:endColor="#00000000"
    />
</shape>

Ensuite, pour l’appliquer réellement à une mise en page :

layout/my_lower_layer

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
<View
    android:layout_width="20dp"
    android:layout_height="fill_parent"
    android:background="@drawable/fragment_shadow_left" />
<ImageView
    android:id="@+id/imageview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" />
</RelativeLayout>

Cela doit être fait avec une disposition relative (à ma connaissance).Si vous utilisez une mise en page linéaire, vous pouvez envelopper l'intégralité du LinearLayout dans une mise en page relative, puis l'ajouter avec le dégradé.

Notez que si vous faites cela, le dégradé <View> doit descendre en dessous du <LinearLayout>;sinon, le dégradé sera dessiné sous la disposition linéaire, vous ne le verrez donc pas.