5 UI фішок для сучасного Android, додатки. Код, ідеї і живий приклад

image

У даній статті я хочу поділитися «фішками», які використовував при створенні свого останнього програми. В основному це набір корисних функцій і невеликих компонентів для створення сучасного інтерфейсу інтерфесу. Кожна «фішка» буде супроводжуватися прикладом коду, картинкою і невеликим описом. Я вважаю, що набагато цікавіше навчається на живих прикладах, тому в кінці статті посилання на репозиторій реального застосування, яке використовує всі описані в статті «фішки».

Стаття не ставить своєю метою навчити проектувати інтерфейс або пояснити потаємний сенс Material дизайну, але сподіваюся, наведені приклади зможуть надихнути Ввас на експерименти з дизайном ваших додатків.


1. Витягаємо домінантний колір з зображення
Іноді хочеться додати трохи різноманітності в колірну схему програми, наприклад підбирати кольори динамічно, залежно від певної картинки. Спеціально для таких випадків існує бібліотека від Google — Palette. Давайте подивимося на один із прикладів її використання:

image

// Не забудьте додати Palette у build.gradle :
// compile 'com.android.support:palette-v7:+'

public static int getDominantColor(Bitmap bitmap) {
List<Palette.Swatch> swatchesTemp = Palette.from(bitmap).generate().getSwatches();
List<Palette.Swatch> swatches = new ArrayList<Palette.Swatch>(swatchesTemp);
Collections.sort(swatches, new Comparator<Palette.Swatch>() {
@Override
public int compare(Palette.Swatch swatch1, Palette.Swatch swatch2) {
return swatch2.getPopulation() - swatch1.getPopulation();
}
});
// якщо з якоїсь причини не вдалося витягти кольору з зображення, вибираємо просто випадковий колір
return swatches.size() > 0 ? swatches.get(0).getRgb() : getRandomColor();
}

public static int getRandomColor() {
Random rnd = new Random();
int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
return color;
}

2. Генеруємо різнокольорові квадрати з буквами прямо в коді
Такі квадрати часто зустрічаються в популярних додатках. Їх можна легко створити прямо в коді, у вигляді звичайного Bitmap, без додаткової графіки або xml layout-ів. Я використовував їх як «заглушки» коли оригінальне зображення відсутня. Для їх створення вам знадобиться всього одні клас LetterBitmap. Приклад його використання та кінцевий результат нижче:

image
int COVER_IMAGE_SIZE = 100; //in pixels
LetterBitmap letterBitmap = new LetterBitmap(context);
Bitmap letterTile = letterBitmap.getLetterTile("string for letter", "string for color", COVER_IMAGE_SIZE, COVER_IMAGE_SIZE);
ImageView imgAnyImageView = (ImageView) view.findViewById(R. id.imgAnyImageView);
imgAnyImageView.setImageBitmap(letterTile);

3. Масштабується зображення на льоту
Досить цікава можливість, можна комбінувати з прозорістю, а якщо накласти поверх розтягнутої картинки напівпрозорий фон вийде ефект нагадує «blur» фільтр. Якщо зображення велика, краще виконувати масштабування у фоновому потоці, щоб не блокувати рендеринг. Приклади обох варіантів нижче:

image

// Функція масштабування
public static Bitmap createScaledBitmap(Bitmap bitmap, float scaleFactor) {
Matrix m = new Matrix();
m.setRectToRect(new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight()),
new RectF(0, 0, bitmap.getWidth() * scaleFactor, bitmap.getHeight() * scaleFactor), Matrix.ScaleToFit.CENTER);
return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), m, true);
}

// Приклад використання:
float COVER_SCALE_FACTOR = 2f;
final Bitmap scaledBitmap = UIHelper.createScaledBitmap(regularBitmap, COVER_SCALE_FACTOR);

// У фоновому потоці
new Thread(new Runnable() {
@Override
public void run() {
final Bitmap scaledBitmap = UIHelper.createScaledBitmap(regularBitmap, COVER_SCALE_FACTOR);
getActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
anyImageView.setImageBitmap(scaledBitmap);
}
});
}
}).run();

А це посилання на Gist з перерахованими прикладами + прикладом для популярної бібліотеки завантаження картинок — Glide.

4. Програмно міняємо колір тексту пошукового поля всередині Toolbar
Я витратив купу часу намагаючись змінити колір стандартної рядка пошуку всередині Toolbar не створюючи окремого layout. Більшість радять змінювати стилі теми у styles.xml іноді це допомагає для Андрода 5.0+, але не працює на більш ранніх версіях. Тому я пропоную просте і універсальне програмне рішення:

image
public static void changeSearchViewTextColor(View view, int color) {
if (view != null) {
if (view instanceof TextView) {
((TextView) view).setTextColor(color);
return;
} else if (view instanceof ViewGroup) {
ViewGroup viewGroup = (ViewGroup) view;
for (int i = 0; i < viewGroup.getChildCount(); i++) {
changeSearchViewTextColor(viewGroup.getChildAt(i), color);
}
}
}
}

// Приклад використання:
Toolbar toolbar = (Toolbar) findViewById(R. id.your_toolbar);
MenuItem searchMenuItem = toolbar.getMenu().findItem(R. id.action_search);
SearchView searchView = (SearchView) searchMenuItem.getActionView();
setSearchViewStyle(searchView);
changeSearchViewTextColor(searchView, Color.WHITE);

5. Кнопки із закругленими краями
Завершити п'ятірку я вирішив прикладом layouta для кнопок із закругленими краями, такі кнопки використовувалися в одній з останніх версій і Google Play і вже дуже мені сподобалися. Можливо, і Ви зможете знайти їм застосування в своєму додатку:

image
Для Андроїд 5.0+:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="@dimen/rounded_btn_radius" />
<solid android:color="@color/indigo_800" />
</shape>
</item>
</ripple>

Для більш ранніх версій:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="@dimen/rounded_btn_radius" />
<solid android:color="@color/indigo_500" />
</shape>
</item>
<item android:state_pressed="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="@dimen/rounded_btn_radius" />
<solid android:color="@color/indigo_500" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="@dimen/rounded_btn_radius" />
<solid android:color="@color/indigo_800" />
</shape>
</item>
</selector>

Для застосування розкладіть XML файли з папок drawable і drawable-v21 відповідно, а потім просто задайте як фон для будь-якої кнопки.

P. S Як і обіцяв, залишаю посилання на репозиторій додатка, в якому застосовувалися всі вищеперелічені «фішки» — Github
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.