37 votes

Séparateur d'ombres entre fragments d'Android

J'ai une disposition similaire à l'ICS de l'application Gmail pour les tablettes (ListFragment , sur la gauche, et le contenu sur la droite) et je me demandais comment je pouvais aller sur la construction de maquettes qu'il n'est plus que l'ombre de séparateur entre les deux fragments (comme dans l'application Gmail, illustré ci-dessous)

.Just look at that beautiful shadow!

Aussi, comme cela est applicable à cette question, comment puis-je avoir ce joli triangle/flèche marqueur dans la liste active de l'élément de mise en page? Je suppose que pour mettre en œuvre cette, la liste elle-même doit se situer au-dessus de l'ombre "couche", mais je n'ai aucune idée de comment le créer.

34voto

roboguy12 Points 1336

Juste pour savoir à tout le monde (car il semble y avoir un manque d'information sur ce sujet), cela est réalisé au sein de l'arrière-plan sélecteur XML de l'individu lignes de la liste " vue. Par exemple, c'est l'écran principal de la disposition,

<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 réside dans l' 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 définissant ces 9-patch un drawable comme cela, vous pouvez avoir chaque élément de la liste de contribuer c'est la largeur de la peine de l'ombre à la ligne dans le milieu, et quand il est activé, le segment de l'ombre sera remplacé par une flèche. J'espère que cela aide quelqu'un, que ça m'a aidé!

22voto

Eagle Points 1404

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

Roboguy la réponse de poignées comment faire pour avoir la flèche blanche "sélecteur" sur l'élément de la liste; je vais essayer d'être plus précis sur les ombres. Un autre bon exemple de l'utilisation de l'arrière-plan les sélecteurs peuvent être vu dans le code source de la Google IO 2011 App. Une fois que vous avez la source, regardez le fragment_dashboard.xml icône de sélecteurs.

L'ombre séparateur est un gradient, appliqué sur le côté gauche de la vue. Il y a deux parties;

Tout d'abord, "l'ombre" lui-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>

Puis, pour l'appliquer à une mise en page:

mise en page/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 relative mise en page (à ma connaissance). Si vous utilisez un linéaire de la mise en page, vous pouvez envelopper toute la linearLayout à l'intérieur d'une relative mise en page, puis ajouter le avec le dégradé.

Notez que, si vous faites cela, le gradient <View> a aller en dessous de la <LinearLayout>; sinon, le gradient sera établi en vertu de la disposition linéaire, de sorte que vous ne le verrez pas.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X