Руководство по созданию пользовательского интерфейса, близкого к WhatsApp

Задача макета, которая была частью программы Google Scholarship 2018. В этом конкурсе мы должны были выбрать любое популярное приложение, такое как Whatsapp, Gmail, Instagram, и попытаться воссоздать точную копию макета. Бэкенд-код был не нужен. Достаточно будет клонирования.

Это единственный экран, который мы собираемся построить!

Пожалуйста, помните, что я обязательно дам ссылку на репозиторий github, но, пожалуйста, попробуйте применить эти шаги самостоятельно. Вы можете использовать репозиторий github, если вы застряли, но снова, пожалуйста, ПОПРОБУЙТЕ САМИ, сначала следуя инструкциям. Я сделал следующие шаги при создании пользовательского интерфейса, подобного приведенному выше.

Предпосылки:

1. Скачать это расширение — . Это расширение позволяет вам выбирать цвета на странице, которую вы просматриваете. Его легко использовать, и мы будем использовать его, чтобы использовать эти красивые зеленые оттенки в WhatsApp.
2. Пожалуйста, используйте шаблон Basic Activity для этого урока. Это экономит ваше время. Я использую его в каждом проекте и редактирую по мере необходимости. Перейдите в «Файлы»> «Создать»> «Новый проект»> «Внести изменения», пока не дойдете до этого экрана —

Шаги:

1. В файле colors.xml добавьте цвета. Вы можете получить эти цвета, открыв подобное изображение WhatsApp, а затем выбрав цвета, используя расширение, которое я дал на шаге 1. [Google search “whatsapp layout android” if you want some other image]
2. Первое, что на скриншоте выше, это получение вкладок. Теперь, если вы не знаете, как заставить их следовать этому руководству. Здесь я впервые научился делать вкладки. Я все еще ссылаюсь на него, потому что постоянно забываю шаги. Каждый раз, когда вы обращаетесь к учебному пособию, вы будете быстрее реализовывать концепции, описанные в этом учебном пособии, при условии, что вы будете практиковать его много раз, что произойдет, когда вы начнете создавать небольшие проекты.[Google search “how to make tabs in android”]
3. Теперь вы можете заметить, что вам нужно сделать значок поиска, а также три точки с правой стороны.

Нажмите на векторный актив

Найдите значок «Поиск» и нажмите «ОК». Назовите это как хотите.

Чтобы значок поиска отображался в правом верхнем углу, вам нужно добавить его как элемент в файл menu.xml следующим образом:

<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>

4. Итак, теперь приложение выглядит так:

Попробуйте самостоятельно найти значок в FAB (кнопка плавающего действия), выполнив те же действия, что и в шаге 3. Помните, что в шаблоне Basic Layout всегда есть FAB. Поэтому вам просто нужно немного отредактировать. Просто измените фон и атрибуты src, и все готово.

5. Теперь нужно добавить содержимое. Это можно сделать с помощью пользовательского адаптера и ListView для этого конкретного руководства. Однако RecyclerView был бы лучшим выбором. Поскольку мы концентрируемся на пользовательском интерфейсе, давайте узнаем, как это сделать с помощью ListView.

6. Так как мы хотим показать список чатов с различными текстами, взгляните на это руководство и реализуйте адаптер самостоятельно. Вам просто нужно дочитать до 4-й темы. Здесь я впервые узнал, как сделать собственный адаптер, и у меня это получилось. Вы можете пойти дальше, если вам это интересно и вы хотите удовлетворить свою жажду знаний в этой концепции.

4 TextViews, одно изображение и что еще?

7. Теперь нужно сделать оформление каждого элемента в ListView. Есть много способов сделать это. Возьмите 3 массива типа String — имена чатов, описания чатов и даты чатов. (Остальные вещи могут быть жестко закодированы, если вы не создаете полноценное приложение производственного уровня. Для этого требуются такие шаги, как подключение к базе данных, получение данных из API, создание классов POJO и т. д.)

8. Теперь вам нужно обратить внимание на детали. Посмотрите внимательно. Вы увидите разделитель (очень светлый оттенок). Также обратите внимание, когда выбрана конкретная вкладка, под ней есть индикатор. Поэкспериментируйте и оцените, какую ширину и какой атрибут можно использовать для создания одного и того же размера. Перейдите на вкладку «Дизайн», если вы не можете вспомнить атрибут. Как только вы окажетесь там, перейдите к списку атрибутов справа и посмотрите, какой из них вы должны использовать. Как правило, пользователи упускают из виду такие вещи, но как только вы их увидите, это будет иметь огромное значение. С практикой вы привыкнете замечать эти мелочи. Затем вы начнете использовать их, чтобы ваше приложение выделялось или, скорее, маркировало ваше приложение, например, с помощью пользовательских логотипов.

Это всегда мелочи, которые имеют большое значение

Вы можете использовать ссылку github, указанную в конце этой статьи, для просмотра кода. Но опять же, сначала попробуйте использовать базовые макеты, такие как Относительный и Линейный, которые, кстати, являются единственными макетами, которые вам нужны для этого дизайна. Подумайте о полях каждого textview. Подумайте о цветах каждого textview. Подумайте, как вы можете нарисовать разделитель. Если не получится, поищите в гугле. Если вы снова потерпите неудачу, перейдите по ссылке, которую я дал.

9. Наконец, чтобы сделать даты и небольшое уведомление о сообщении, вы можете использовать свою собственную логику, используя класс Random. Что касается галочки и изображения камеры рядом с описанием чата, вам необходимо использовать атрибут drawableLeft (или атрибут drawableStart) в текстовом представлении описания. Вы можете установить его программно следующим образом:

TextView chatDescriptionText =(TextView)rowView.findViewById(R.id.chat_description);chatDescriptionText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_photo_camera, 0, 0, 0);

10. Это все. Попробуйте реализовать и другие экраны. Вы обретете больше уверенности. Придет время, когда вы поверите, что действительно можете искать и применять все, что захотите.

Удачного кодирования!!