Добро пожаловать в четвертую часть серии «Будьте ленивым, но продуктивным разработчиком Android». Если вы ленивый разработчик Android для создания элементов строки для ListView / GridView, но хотите создать удивительный ListView / GridView в несколько простых шагов, тогда эта статья для вас.
Эта серия до сих пор:
- Часть 1 : Мы посмотрели на RoboGuice, библиотеку внедрения зависимостей, с помощью которой мы можем уменьшить код базовой платы, сэкономить время и добиться повышения производительности при разработке приложений для Android.
- Часть 2 : Мы видели и изучали Genymotion, который является эмулятором скорости ракеты и супер-быстрым эмулятором по сравнению с нативным эмулятором. И мы можем использовать Genymotion при разработке приложений и можем быстро тестировать приложения, что позволяет добиться производительности.
- Часть 3 : Мы поняли и изучили библиотеки JSON Parsing (GSON и Jackson), с помощью которых мы можем повысить производительность приложений, уменьшить шаблонный код и тем самым оптимизировать производительность.
В этой части
В этой части мы собираемся изучить 2-3 библиотеки пользовательского интерфейса для карт, которые имеют открытый исходный код и доступны на GitHub, и мы можем использовать любую из них при разработке нашего приложения, чтобы получить быстрый просмотр списка / сетки с потрясающим видом карты.
Что такое Card UI и почему мы должны следовать дизайну Card UI?
Когда-нибудь задумывались о пользовательском интерфейсе Google Play Store, который построен вокруг карт. Карточка — это не что иное, как отдельный элемент строки в ListView или GridView. Как показано ниже, карта может быть разных размеров и может быть либо карточкой приложения, фильмом, книгами, играми или карточкой с предложениями приложений, либо днем рождения, либо даже может быть простым списком / элементом сетки.
Основное преимущество разработки приложения с использованием карточного интерфейса заключается в том, что оно обеспечивает единообразный внешний вид приложения, независимо от того, загружается ли оно на мобильный телефон или планшет.
Карты Библиотеки
Теперь я уверен, что вы рады прочитать и изучить библиотеки карт, существующие в Интернете. Как я уже сказал, пользовательский интерфейс магазина Google Play построен на основе карт, мы можем создать тот же интерфейс для карт, либо определив наш собственный адаптер со стилями / изображениями, либо мы можем реализовать этот тип интерфейса для карт напрямую, используя некоторые библиотеки карт с открытым исходным кодом. Я уверен, что вы ленивый разработчик Android, но хотите быть продуктивным разработчиком, поэтому вы бы пошли на использование библиотеки UI карты
Что касается библиотеки карт, она просто предоставляет простой способ отображения карточных интерфейсов в вашем приложении для Android. Я нашел 3 широко используемых карточных библиотеки в разработке для Android:
- Cardslib от Габриэле МариоттиГабриэле Мариотти — https://github.com/gabrielemariotti/cardslib
- Пользовательский интерфейс карт от Эйдана Фоллестада — https://github.com/afollestad/Cards-UI
- CardsUI от Nadavfima — https://github.com/nadavfima/cardsui-for-android
Будучи ленивым, но продуктивным разработчиком Android, я до сих пор использовал Cardslib от Gabriele. Поскольку я использовал Cardslib, я бы сказал, что вам не нужно определять макет строки или настраиваемый адаптер для отображения простого списка карт, но да, вам придется создавать собственный макет XML в случае, если вы хотите настроить макет карты согласно вашим проектам и требованиям. Я бы порекомендовал Cardslib от Gabriele, потому что он очень хорошо задокументирован и активно совершенствуется. Он приложил немало усилий, чтобы включить в библиотеку новые материалы, как недавно включил поддержку подготовки шахматной сетки с карточками.
Как использовать Cardslib?
Cardslib доступен как отдельный библиотечный проект, поэтому вы можете ссылаться на него как на локальную библиотеку. Это также выдвинуто как AAR tp Maven Central. Прочитайте подробные инструкции о том, как включить, собрать или ссылаться на cardlib .
Пример 1: Пример простого пользовательского интерфейса карты
Для демонстрации в настоящее время я использовал eclipse, поэтому я скачал проект библиотеки cardslib и буду ссылаться на наши примеры проектов. Давайте разработаем простой пример просмотра карты, используя первую библиотеку, указанную выше.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
tools:context=".MainActivity" >
<it.gmariotti.cardslib.library.view.CardView
android:id="@+id/carddemo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card:card_layout_resourceID="@layout/card_thumbnail_layout" />
</RelativeLayout>
row_card.xml
<?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"
android:padding="10dp" >
<TextView
android:id="@+id/card_main_inner_simple_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="@+id/card_main_inner_secondary_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cardslib"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
Java-код для установки макета row_card xml, задания заголовка, заголовка, изображения и т. Д.
// Create a Card
Card card = new Card(this, R.layout.row_card);
// Create a CardHeader
CardHeader header = new CardHeader(this);
header.setTitle("Hello world");
card.setTitle("Simple card demo");
CardThumbnail thumb = new CardThumbnail(this);
thumb.setDrawableResource(R.drawable.ic_launcher);
card.addCardThumbnail(thumb);
// Add Header to card
card.addCardHeader(header);
// Set card in the cardView
CardView cardView = (CardView) findViewById(R.id.carddemo);
cardView.setCard(card);
Пример 2: Пример списка карт
activity_list.xml
<?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"
xmlns:card="http://schemas.android.com/apk/res-auto" >
<it.gmariotti.cardslib.library.view.CardListView
android:id="@+id/myList"
android:layout_width="match_parent"
android:layout_height="match_parent"
card:list_card_layout_resourceID="@layout/list_card_thumbnail_layout"
style="@style/list_card.thumbnail"/>
</LinearLayout>
CardListActivity.java
package com.technotalkative.cardslibdemo;
import it.gmariotti.cardslib.library.internal.Card;
import it.gmariotti.cardslib.library.internal.CardArrayAdapter;
import it.gmariotti.cardslib.library.internal.CardHeader;
import it.gmariotti.cardslib.library.internal.CardThumbnail;
import it.gmariotti.cardslib.library.view.CardListView;
import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
public class CardListActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list);
int listImages[] = new int[]{R.drawable.angry_1, R.drawable.angry_2,
R.drawable.angry_3, R.drawable.angry_4, R.drawable.angry_5};
ArrayList<Card> cards = new ArrayList<Card>();
for (int i = 0; i<5; i++) {
// Create a Card
Card card = new Card(this);
// Create a CardHeader
CardHeader header = new CardHeader(this);
// Add Header to card
header.setTitle("Angry bird: " + i);
card.setTitle("sample title");
card.addCardHeader(header);
CardThumbnail thumb = new CardThumbnail(this);
thumb.setDrawableResource(listImages[i]);
card.addCardThumbnail(thumb);
cards.add(card);
}
CardArrayAdapter mCardArrayAdapter = new CardArrayAdapter(this, cards);
CardListView listView = (CardListView) this.findViewById(R.id.myList);
if (listView != null) {
listView.setAdapter(mCardArrayAdapter);
}
}
}
Скачать исходный код
Вы можете скачать исходный код приведенных выше примеров здесь: https://github.com/PareshMayani/CardslibDemo . Чтобы запустить этот пример, сначала вы должны загрузить проект библиотеки, а затем сослаться на него в нашем примере.
Выше были просто простые примеры: если вы изучите карточную библиотеку, вы сможете понять, как ее использовать, и сможете уменьшить код котельной платы, не переписывая код адаптера / макета, и, следовательно, сможете оптимизировать производительность.
Надеюсь, вам понравилась эта часть серии «Ленивый разработчик Android: будьте продуктивным». До следующей части продолжайте строить пользовательский интерфейс карты, список карт, сетку карт и наслаждайтесь!