Comment créer une interface utilisateur comme la photo ci-jointe

Quelqu'un peut-il me dire ce que l'on appelle cet effet photo? Et j'aimerais savoir comment créer un adaptateur pour cet effet d'image attaché.

@Edited: Il s'agit d'une photo échantillon du marché Android. Je veux créer une disposition comme celle-ci. Je suppose que cela devrait être fait pour remplacer une carte GridView.

  • Android: comment faire un adaptateur avec des ID stables?
  • Vues de recyclage en vue de défilement
  • SetOnItemClickListener ne répond pas pour Custom ListView
  • RecyclerView: comment nettoyer les vues mises en cache / recyclées?
  • Les éléments ListView ne sont pas cliquables. Pourquoi?
  • Obtenir un élément cliqué et sa position dans RecyclerView
  • Portrait Capture d'écran


    Photo http://i50.tinypic.com/donq4m.png

    Capture d'écran Paysage


    Photo http://oi50.tinypic.com/foqipw.jpg


    Une autre capture d'écran


    Photo http://i47.tinypic.com/103yek1.png

    Je suis extrêmement désolé, ma question n'était pas claire pour vous.

    Possible en double .

    7 Solutions collect form web for “Comment créer une interface utilisateur comme la photo ci-jointe”

    Avez-vous essayé ceci:

    <?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" > <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="0.54" > <Button android:id="@+id/Button01" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1.00" android:text="Button" /> <Button android:id="@+id/Button02" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1.00" android:text="Button" /> </LinearLayout> <Button android:id="@+id/button3" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <LinearLayout android:layout_width="match_parent" android:layout_height="99dp" > <Button android:id="@+id/button1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:text="Button" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <Button android:id="@+id/button4" android:layout_width="match_parent" android:layout_height="152dp" android:text="Button" /> <Button android:id="@+id/button5" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <Button android:id="@+id/button6" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button7" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> </LinearLayout> </LinearLayout> </LinearLayout> 

    Vérifiez ce fil: Heterogeneous GridLayout

    Entrez la description de l'image ici

    Vous créez dans cet ordre:

    LinearLayout (VERTICAL) avec un poids de 2;

    LinearLayout (VERTICAL) avec un poids de 1 et poidsSum de 3;

    À l'intérieur, il y aura 3 mises en page, disposition linéaire horizontale avec un poids de .70, disposition linéaire horizontale avec un poids de .50 et une imageView avec un poids de 1,80

    LinearLayout (VERTICAL) avec un poids de 1 et une somme pondérale de 3;

    À l'intérieur, il y aura 3 dispositions linéaires

    2 * (2 de ces) -horizontal avec un poids de .50 et une somme de poids de 2 dans cette disposition horizontale seront deux vues d'image avec un poids de 1 chacune

    Troisièmement et enfin une vue d'image avec le poids 1.50

    Faites cela et vous avez la disposition correctement pondérée à votre goût

    Vous pouvez créer une disposition de table, et dans la rangée de table, vous pouvez ajouter col et span span pour créer une telle mise en page.

    Celui-ci ne ressemble pas à un Gridview normal ou à un adaptateur de liste. Vous devrez peut-être créer un contrôle personnalisé pour cela. Par exemple, dans l'exemple donné, certaines applications ont plus de poids par rapport aux autres. Ceux qui ont plus de pesée devraient occuper une largeur totale et d'autres occupent 50% ou 33% de la largeur (en fonction du paysage ou du portrait).

    Ainsi, la logique crée une disposition de table et, en fonction de la pesée, ajoute plus de commandes sur l'adaptateur. Et en fonction de la pesée, vous devez créer la ligne ou la colonne en conséquence.

    Si je devais reproduire la disposition du marché, ce sont les classes suivantes que j'utiliserais:

      1. Obviously ViewPager for horizontal swiping ability. 2. A heavily customized ListView. 

    Il existe une méthode dans ListView appelée addHeaderView() , dans laquelle vous pouvez manipuler les premiers éléments apparus dans la liste avec votre propre mise en page personnalisée. Dans ce cas, le premier, 4ème, 5ème et 6ème élément de la liste sera un ImageView avec parent de parenté pour sa largeur et probablement une hauteur fixe.

    Les 2ème et 3ème objets seront tout simplement un LinearLayout horizontal avec 2 ImageViews avec des poids égaux, et les autres sont simplement Listviews avec des mises en page personnalisées.

    Tout ce qui précède fait référence à la vue "Portrait" dans le téléphone. Pour la vue "paysage", encore une fois, vous devrez le faire manuellement.

    L'astuce consiste à modifier votre BaseAdapter pour compléter votre liste. Dans les listes de liste par défaut, une «position» désigne une ligne dans la liste. Dans ce cas, votre mise en page personnalisée comprend deux éléments dans une seule ligne. Essayez de calculer cela, de jouer avec vos données et vos tableaux. Je suis sûr que cela peut être fait. =)

    Cela devrait être fait avec un GridView .

    Par son apparence, vous avez 3 tailles: une qui couvre 1 espace, celui qui couvre 2 et un qui couvre 4 espaces. Il ne devrait pas être facile.

    Mais comment les images sont dans une pile et comment la mise en page est orientée Je crois que la meilleure option que vous avez est de passer par un GridView . Il est assez flexible dans la mise en œuvre des colonnes et des lignes, et il offre une mise en œuvre prête dans les changements d'orientation.

    Vous devriez faire 3 types d'objets qui ont 4 petites View s, un autre qui a 2 éléments et un autre qui a une grande View . Dans chaque cellule, il peut y avoir l'un des éléments ci-dessus.

    Selon certaines propriétés, vous devez remplir le GridView . Ensuite, vous devriez expérimenter les options que GridView fournit (il possède certaines propriétés qui "automatiques" empile les éléments en fonction de la largeur et de la hauteur dans la mise en page). C'est tout ce que je peux offrir parce que je n'ai rien fait de semblable.

    EDIT: essayer de mettre en œuvre l'interface du marché Android sans rechercher un peu et seulement par copier-coller ?? Cela ne PEUT PAS être aussi simple que vous le pensez.

    Quoi qu'il en soit, si j'étais vous, je commencerais par la mise en œuvre que j'ai mentionnée précédemment. Bien que je ne puisse pas fournir de code, parce que je n'ai rien fait de semblable, dans votre cas, GridView avec toute la mise en œuvre qui fournit déjà serait d'une grande aide.

    PS: Mon avis est d'essayer d'abord un peu avant de mettre à jour la question à nouveau.

    Je pense que l'application de marché est effectuée à l'aide d'un ViewPager et chaque page contient un RelativeLayout ou LinearLayout . Pour créer un métro comme interface, un GridView pour chaque page est plus adapté.

      page 1 page 2 page 3 ________________________________________________ | | | | | | | | | GridView | GridView | GridView | | | | | | | | | | | | | | | | | | | | | ------------------------------------------------- 

    Ici, vous trouverez quelques liens vers les didacticiels ViewPager

    Un autre ici

    Mettre à jour:

    Vous pouvez même utiliser un OverScroller pour lui donner un effet élastique lors du défilement.

    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.