Wie Gridview wie Guardian-App zu entwerfen

8

Ich versuche, ein Layout wie eine Wächter-App zu erstellen. Ich weiß, was Gridview ist und wie man es gestaltet und mit Daten etc. Aufbläht.

Was ich gestalten möchte?

Dieses Layout hat Elemente mit Bildern und nicht mit und es wird auch faul geladen.

Was ist das Problem, vor dem ich stehe?

  

1-Confused welche Viewi sollte ich mit gehen. GridView, ListView oder   RecyclerView.

     

2 - wenn ich mit GridView gehe, dann wie man verschiedene Artikellayouts für hat   einige Gegenstände.

Was ich versucht habe?

Ich habe versucht, lineares Layout als separate XML-Datei zu verwenden, und dann füge ich dieses xml zum root-Layout zur Laufzeit hinzu. Es funktioniert etwas, aber das Problem steigt, wenn ich clicklistener hinzufügen muss, um relevanten Beitrag anzuzeigen, da es mehr als 100+ Post-Daten geben würde.

Es wäre eine große Hilfe, wenn mich jemand in die richtige Richtung führt. Danke!

BEARBEITEN. Nach der Antwort hier. Ich habe diesen Ansatz verwendet. Ich habe zu xml gewohnt. Dann ändere ich das Layout mit getViewType in Adapter, aber das gibt solche Ergebnisse nicht. Ich bin immer noch auf der Suche nach einer überzeugenderen Lösung.

Hier ist der Code, den ich müde habe.

%Vor%     
Zeeshan Shabbir 04.05.2016, 08:13
quelle

8 Antworten

6

Sie müssen StaggeredGridLayoutManager mit RecyclerView verwenden, um zu erreichen, was in der Guardian-App geschieht. Sehen Sie diesen Link StaggeredGridLayoutManager Tutorial

Bearbeiten 1

Ich habe eine kleine Beispielanwendung geschrieben, die zeigen kann, was die Wächteranwendung erreicht. Hier ist der Github-Link . Ich werde es auf dem Weg mit jedem Schritt erklären:

  • Ich habe einen StaggerdGridLayoutManager verwendet, da Sie in der Guardian-App, auf die Sie sich beziehen, unterschiedliche Zellenhöhen belegt haben. Dieses Layout ermöglicht es uns, Gegenstände mit unterschiedlicher Höhe zu haben.

  • Für jeden unterschiedlichen Ansichtstyp müssen wir verschiedene Ansichtshalter erstellen. Zum Beispiel habe ich 3 verschiedene Ansichtshalter für jeden unterschiedlichen Artikeltyp in der Beispielanwendung erstellt.

  • Überschreibe getItemViewType, damit der Recyclerview-Adapter weiß, welche Ansicht aufgepumpt werden soll.

Zum Beispiel habe ich meine Datenobjekte in einer Liste des Typs Object gespeichert, um heterogene Objekte zu speichern, und jedes Element überprüft, wenn es sich um eine Instanz einer bestimmten Klasse handelt. Ich habe 3 verschiedene Typen erstellt:

%Vor%
  • Holen Sie itemViewType für den aktuellen Ansichtshalter in OnCreateViewHolder, um zu ermitteln, welches Layout aufgebläht werden soll.

Für die Instanz von Beispiel:

%Vor%
  • Legen Sie fest, dass bestimmte Arten von Elementen den gesamten Zeilenbereich abdecken.

Da einige Post-Typen in der Guardian-Anwendung volle Spanne einnehmen, können wir den folgenden Code in der OnBindViewHolder-Methode verwenden, um jedes Element auf die volle Länge des Layouts zu erweitern.

%Vor%

Dadurch wird der gesamte Bereich des Layouts wie der größte Post in der Guardian-Anwendung abgedeckt.

Wenn Sie die obigen Schritte ausführen, können Sie ein ähnliches Layout wie dieses erstellen (Bild aus der Beispielgithub-Anwendung):

Hier gibt es 3 verschiedene Arten von Elementen: über zwei Elemente sind Schaltflächen, mittlere ist ImageView und unten sind TextView.

    
Rafay Ali 09.05.2016, 14:47
quelle
3

Sie können die Recycler-Ansicht mit GridLayoutManager verwenden. Und in Ihrem Adapter machen Sie verschiedene Layout-Typ nach Ihren Anforderungen.

%Vor%

Gehen Sie zu hier , um weitere Informationen zu erhalten.

Bearbeiten:

Folgen Sie meinem github Demo

    
Kishan Vaghela 10.05.2016 04:47
quelle
1

Es gibt drei verschiedene Arten von Ansichten, ein großes Gitter, zwei kleine Gitter und 3-4 Listenansichtselemente. Es ist schwierig, nur eine Art von Ansicht zu verwenden, um eine solche Aufgabe abzuschließen. Ich empfehle Ihnen, einige benutzerdefinierte Ansichten zu erstellen, um die Raster (groß und klein) zu bearbeiten, und eine Listenansicht, um das Listenelement zu behandeln. Danach können Sie die benutzerdefinierten Ansichten für die Grids und den benutzerdefinierten Adapter der Listenansicht in anderen Sitzungen wiederverwenden.

Wenn Sie wirklich eine Rasteransicht verwenden möchten, um verschiedene Ansichten zu bearbeiten, erstellen Sie eine generische Ansicht mit allen Funktionen, und deaktivieren / aktivieren Sie die Funktionen, wenn Sie sie benötigen. Dies ist jedoch viel komplizierter.

    
VoidExplorer 04.05.2016 08:33
quelle
1

Sie können RecyclerView verwenden, weil Sie damit verschiedene Elementtypen definieren können. aber um eine solche Ansicht zu erstellen, muss man aufgrund seines Layouts so viel Code machen.

Sie müssen die getItemViewType-Methode überschreiben und versuchen herauszufinden, welcher Ansichtstyp als nächstes angezeigt wird. Beispielcode

%Vor%

Hoffe, das wird helfen

    
androidnoobdev 04.05.2016 08:46
quelle
1

Sie benötigen: Asymmetrische Gitteransicht

  

Ссылка

Der obige Link wird Ihnen helfen.

Sie können einen gemeinsamen onClickListener

definieren     
takrishna 04.05.2016 09:12
quelle
1

Ich werde Ihnen erklären, wie Sie anstatt den ganzen Code zu schreiben, wir werden Recylerview dafür verwenden

  • Recylervew, die vier Items (Item1, Item2, Item3, Item4)

  • haben
  • Item1: Es enthält das View1

  • Item2: Es wird das VIew2
  • enthalten
  • Item3: Es enthält den VIew3
  • Item4: Es wird das VIew4

  • enthalten
  • View1: Es enthält ein Layout für Text und anderes Layout für den Kommentar- und Tagesbereich

  • View2: Es wird die Image View
  • enthalten
  • View3: Es enthält das Table-Layout mit einer Zeile und zwei Spalten
  • View4: Es enthält das lineare Layout

    
Muhammad Younas 12.05.2016 06:23
quelle
1

Um den obigen Layoutentwurf zu erreichen, müssen Sie recyclerView mit StaggaredGridLayoutManager verwenden.

    
subrahmanyam boyapati 13.05.2016 06:39
quelle
1

Sie müssen RecyclerView mit StaggeredGridLayoutManager verwenden.

    
Darshan Mistry 11.05.2016 06:39
quelle