Leitfaden zum Erstellen einer Benutzeroberfläche in der Nähe von WhatsApp

Eine Layout-Herausforderung, die Teil des Google Scholarship 2018-Programms war. Bei diesem Wettbewerb mussten wir eine beliebige beliebte Anwendung wie WhatsApp, Gmail, Instagram auswählen und versuchen, eine exakte Nachbildung des Layouts nachzubilden. Backend-Code war nicht erforderlich. Klonen würde reichen.

1 W6Lum3jxVcPq03ZKhSbGSw.png

Dies ist der einzige Bildschirm, den wir bauen werden!

Bitte denken Sie daran, dass ich auf jeden Fall einen Link zum Github-Repo geben werde, aber versuchen Sie bitte, diese Schritte selbst anzuwenden. Sie können das Github-Repo verwenden, wenn Sie nicht weiterkommen, aber versuchen Sie es bitte erneut, indem Sie den Schritten folgen. Ich habe die folgenden Schritte beim Erstellen der Benutzeroberfläche wie oben ausgeführt.

Voraussetzungen:

  1. Laden Sie diese Erweiterung herunter — . Mit dieser Erweiterung können Sie Farben von der Seite auswählen, die Sie durchsuchen. Es ist einfach zu bedienen und wir werden es verwenden, um diese schönen Grüntöne zu erhalten, die in WhatsApp verwendet werden
  2. Bitte verwenden Sie für dieses Tutorial die Vorlage für grundlegende Aktivitäten. Es spart Ihnen Zeit. Ich verwende es in jedem Projekt und bearbeite es nach Bedarf. Gehen Sie zu Dateien > Neu > Neues Projekt > Änderungen vornehmen, bis Sie diesen Bildschirm erreichen —

1 tZN2TjxwJhhC6im1fV56BA.png

Schritte:

  1. Fügen Sie in Ihrer Datei colors.xml die Farben hinzu. Sie können diese Farben abrufen, indem Sie ein WhatsApp-Bild wie dieses öffnen und dann die Farben mit der Erweiterung auswählen, die ich in Schritt 1 angegeben habe. [Google search “whatsapp layout android” if you want some other image]
  2. Das erste, was im obigen Screenshot zu sehen ist, ist das Abrufen der Registerkarten. Falls Sie nicht wissen, wie Sie diese erstellen können, folgen Sie diesem Tutorial. Hier habe ich zum ersten Mal gelernt, wie man Tabs macht. Ich beziehe mich immer noch darauf, weil ich die Schritte immer wieder vergesse. Jedes Mal, wenn Sie sich auf ein Tutorial beziehen, werden Sie schneller darin, die in diesem Tutorial behandelten Konzepte umzusetzen, vorausgesetzt, Sie üben es viele Male, was kommt, wenn Sie anfangen, kleine Projekte zu erstellen.[Google search “how to make tabs in android”]
  3. Jetzt werden Sie vielleicht bemerken, dass Sie das Suchsymbol sowie die drei Punkte auf der rechten Seite erstellen müssen.

1 TwN_uazXvKudDcmQqhHoTg.png

Klicken Sie auf Vektor-Asset

1 0_iTPCYH6Ys75wHSgeK5oA.png

Suchen Sie nach dem Symbol „Suchen“ und klicken Sie auf „OK“. Nennen Sie es, wie Sie wollen.

Damit das Suchsymbol in der rechten oberen Ecke erscheint, müssen Sie es wie folgt als Element in der Datei menu.xml hinzufügen –

<menu xmlns:android="
    xmlns:app="
    xmlns:tools="
    tools:context="com.example.scholars.whatsappclone.MainActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
    <item
        android:orderInCategory="100"
        android:title="Search"
        android:icon="@drawable/ic_search"
        app:showAsAction="ifRoom" />
</menu>
  1. Jetzt sieht die App so aus –

1 pfhyuq_eJaO6UgmeR4vOLQ.png

Versuchen Sie, das Symbol im FAB (Floating Action Button) selbst zu finden, indem Sie die gleichen Schritte in Schritt 3 ausführen. Denken Sie daran, dass es immer einen FAB in der Basislayoutvorlage gibt. Daher müssen Sie nur ein wenig bearbeiten. Ändern Sie einfach den Hintergrund und die src-Attribute und Sie sind fertig.

  1. Jetzt müssen Sie den Inhalt hinzufügen. Dies kann mit Hilfe von Custom Adapter und ListView für dieses spezielle Tutorial erfolgen. Allerdings wäre RecyclerView die bessere Wahl gewesen. Da wir uns auf die Benutzeroberfläche konzentrieren, lernen wir, wie man es mit Hilfe von ListView macht.

  2. Da wir eine Liste von Chats mit unterschiedlichen Texten anzeigen möchten, schau dir dieses Tutorial an und implementiere den Adapter selbst. Sie müssen nur bis zum 4. Thema lesen. Hier habe ich zum ersten Mal gelernt, wie man einen benutzerdefinierten Adapter herstellt, und ich war erfolgreich. Sie können darüber hinausgehen, wenn Sie es interessant finden und Ihren Wissenshunger in diesem Konzept stillen möchten.

1 MuVAENIms02QKr8Y8oufnQ.png

4 TextViews, ein Bild und was noch?

  1. Jetzt müssen Sie das Design jedes Elements in der ListView erstellen. Es gibt viele Möglichkeiten, dies zu tun. Nehmen Sie 3 Arrays vom Typ String – die chatNames, die chatDescriptions und die chatDates. (Der Rest der Dinge kann hartcodiert werden, es sei denn, Sie erstellen eine vollwertige App auf Produktionsebene. Das erfordert Schritte wie das Herstellen einer Verbindung zur Datenbank, das Abrufen von Dingen von einer API, das Erstellen von POJO-Klassen usw.)

  2. Hier gilt es jetzt auf die Details zu achten. Schau genau. Sie sehen einen Teiler (sehr heller Farbton). Beachten Sie auch, wenn eine bestimmte Registerkarte ausgewählt ist, hat sie eine Anzeige darunter. Experimentieren Sie und entscheiden Sie nach bestem Wissen und Gewissen, wie viel Breite und welches Attribut verwendet werden kann, um dieselbe Abmessung zu erzeugen. Gehen Sie zum Design-Tab, wenn Sie sich nicht an das Attribut erinnern können. Sobald Sie dort sind, gehen Sie zur Liste der Attribute auf der rechten Seite und sehen Sie, welches Sie verwenden sollten. Im Allgemeinen werden solche Dinge von Benutzern übersehen, aber sobald Sie es sehen, wird es einen großen Unterschied machen. Sie werden es sich angewöhnen, diese kleinen Dinge mit etwas Übung zu erkennen. Dann beginnen Sie damit, diese zu verwenden, um Ihre App hervorzuheben oder vielmehr Ihre App zu brandmarken, z. B. mit benutzerdefinierten Logos

Es sind immer die kleinen Dinge, auf die es ankommt

Sie können den am Ende dieses Artikels bereitgestellten Github-Link verwenden, um den Code anzuzeigen. Aber versuchen Sie es zunächst mit einfachen Layouts wie Relative und Linear, die übrigens die einzigen Layouts sind, die Sie für dieses Design benötigen. Denken Sie an die Ränder jeder Textansicht. Denken Sie an die Farben der einzelnen Textansichten. Überlegen Sie, wie Sie den Teiler zeichnen können. Wenn Sie scheitern, suchen Sie in Google. Wenn Sie erneut scheitern, gehen Sie zu dem Link, den ich angegeben habe.

  1. Um die Daten und die Benachrichtigung über kleine Nachrichten zu erstellen, können Sie schließlich Ihre eigene Logik mit der Random-Klasse verwenden. Für das Häkchen und das Kamerabild neben der Beschreibung des Chats müssen Sie das drawableLeft (oder drawableStart-Attribut) in der Textansicht der Beschreibung verwenden. Sie können es programmgesteuert so einstellen –
TextView chatDescriptionText =(TextView)rowView.findViewById(R.id.chat_description);chatDescriptionText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_photo_camera, 0, 0, 0);
  1. Das ist alles. Versuchen Sie auch, die anderen Bildschirme zu implementieren. Sie werden mehr Selbstvertrauen gewinnen. Es wird eine Zeit geben, in der Sie glauben, dass Sie tatsächlich alles suchen und anwenden können, was Sie wollen.

Viel Spaß beim Codieren!!

 

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *