Розроблення дизайну меню та елементів управління

Розроблюючи дизайн меню, були використані ідеї Material Design, представлені компанією Google в 2014 році, разом з виходом платформи Android 5.0 [http://www.google.com/design/spec/material-design/introduction.html]. Цей дизайн є рекомендованим для усіх додатків в системі для забезпечення спільного стилю у системі.

В даному стилі доцільно виконати головне меню, меню налаштувань та кнопки з анімацією. Головне меню представляє собою блідно-зелений фон з білими надписами та білими іконками, який в Android 5.0 [http://www.android.com/intl/ru_ru/versions/lollipop-5-0] можна зустріти в панелі повідомлень (рис. 2.4.1).

Рис. 2.4.1 Панель повідомлень в Android 5.0

Іконки представлені однотонними піктограмами. Виходячи з набору необхідного для графічного редактора функціоналу, були розроблені наступні піктограми в схожому стилі (рис. 2.4.2).

Рис. 2.4.2 Піктограми в стилі Material Design

Застосувавши ці піктограми, було розроблено меню (рис. 2.4.3), що складається з 6 рядів, де перший ряд – опції збереження, відкриття та вставки файлу, другий та третій ряд – палітра кольорів, четвертий ряд – панель інструментів, п’ятий ряд – опції відміни та очистки, та останній ряд – переходи на екран збереження та «про програму». Якщо натиснути на один з пунктів меню, можна побачити анімацію, яку прийнято використовувати в кнопках в Material Design.

Рис. 2.4.3 Дизайн меню FP sDraw з використанням Material Design

Дизайн меню налаштувань має також бути реалізованим в схожому стилі. Для нього були розроблені анімовані повзунки (рис. 2.4.5), що наслідуються від системного повзунка (лістинг 2.4.2) та анімовані кнопки (рис. 2.4.4), що наслідуються від системної кнопки (лістинг 2.4.1) в схожому стилі.

Рис. 2.4.4 Дизайн анімованої кнопки

public class AnimatedButton extends Button {
int backgroudColor = Color. rgb (67, 86, 92);
Paint borderPaint = new Paint();
int circleOpacityMax = 160;
int circleDelay = 20;

int circleX = -1;
int circleY = -1;
int circleSize = 0;
int circleOpacity = circleOpacityMax;
Timer circleTimer = null;
Paint circlePaint = new Paint();

public AnimatedButton(Context context, AttributeSet attrs) {
super (context, attrs);
init();
}

public AnimatedButton(Context context) {
super (context);
init();
}

private void init(){
setTextColor(Color. WHITE);
setBackgroundColor(Color. TRANSPARENT);

borderPaint. setColor(Data. tools. getGridColor(backgroudColor));
borderPaint. setStyle(Paint.Style. STROKE);
borderPaint. setStrokeWidth(2);
}
@Override
protected void onDetachedFromWindow() {
if (circleTimer!= null)
circleTimer. cancel();
super. onDetachedFromWindow();
}

@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(backgroudColor);
canvas.drawRect(1,1,getWidth()-1, getHeight()-1, borderPaint);
circlePaint. setColor(Color. argb (circleOpacity, 255, 255, 255));
canvas.drawCircle(circleX, circleY, circleSize, circlePaint);
super. onDraw(canvas);
}

private void beginHighlight(int x, int y){
if (circleTimer!= null){
circleTimer. cancel();
circleTimer = null;
}
circleX = x;
circleY = y;
circleSize = 20;
circleOpacity = circleOpacityMax;
circleTimer = new Timer();
circleTimer. schedule(new TimerTask() {
@Override
public void run() {
circleSize *= 1.8;
circleOpacity -= 15;
if (circleOpacity <= 0) {
circleOpacity = 0;
circleTimer. cancel();
}
postInvalidate();
}
}, circleDelay, circleDelay);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction() & MotionEvent. ACTION_MASK;
if (action == MotionEvent. ACTION_DOWN){ //залить черным
beginHighlight((int)event.getX(), (int)event.getY());
}
else if (action == MotionEvent. ACTION_MOVE){
if (event.getX() < 0 || event.getY() < 0 || event.getX() > getWidth() || event.getY() > getHeight()) { //если вышли за пределы элемента
}
}
else if (action == MotionEvent. ACTION_UP || action == MotionEvent. ACTION_CANCEL){ //отпустили палец
}
return super. onTouchEvent(event);
}

Handler clickHandler = new Handler();
@Override
public boolean performClick() {
new Timer().schedule(new TimerTask() {
@Override
public void run() {
clickHandler. post(new Runnable() {
@Override
public void run() {
click();
}
});
}
}, 150);
return true;
}
public void click(){
super. performClick();
}
}

Лістинг 2.4.1 Анімована кнопка

Рис. 2.4.5 Дизайн повзунка

public class AnimatedSeekBar extends SeekBar{
float visiblePosition = 0;
Paint linePaint = new Paint();
Paint selectedLinePaint = new Paint();
Paint circlePaint = new Paint();
Timer timerRefresher = null;

@Override
public boolean onTouchEvent(MotionEvent event) {
runAnimation();
super. onTouchEvent(event);
return true;
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super. onSizeChanged(w, h, oldw, oldh);

//linePaint.setAntiAlias(true);
linePaint. setColor(Color. GRAY);
linePaint. setStrokeWidth(h / 10);

//selectedLinePaint.setAntiAlias(true);
selectedLinePaint. setColor(Color. WHITE);
selectedLinePaint. setStrokeWidth(h/5);

//circlePaint.setAntiAlias(true);
circlePaint. setColor(Color. WHITE);
circlePaint. setStyle(Paint.Style. FILL);

}

@Override
protected synchronized void onDraw(Canvas canvas) {
float xPos = getWidth() * visiblePosition / getMax();
canvas.drawLine(xPos, getHeight()/2, getWidth(), getHeight()/2, linePaint);
canvas.drawLine(0, getHeight() / 2, xPos, getHeight() / 2, selectedLinePaint);
canvas.drawCircle(getWidth() * visiblePosition /getMax(), getHeight()/2, getHeight()*0.3f, circlePaint);
//super.onDraw(canvas);
}

@Override
protected void onAttachedToWindow() {
super. onAttachedToWindow();
new Timer().schedule(new TimerTask() {
@Override
public void run() {
runAnimation();
}
}, 200);
}

@Override
protected void onDetachedFromWindow() {
super. onDetachedFromWindow();
finishAnimation();
}

void runAnimation(){
if (timerRefresher == null) {
timerRefresher = new Timer();
timerRefresher. schedule(new TimerTask() {
@Override
public void run() {
animate();
}
}, 20, 20);
}
}
void finishAnimation(){
if (timerRefresher!= null){
timerRefresher. cancel();
timerRefresher = null;
}
}
void animate(){
int current = getProgress();
float dif = current - visiblePosition;
float toAdd = dif * 0.1f;
visiblePosition += toAdd;
if (Math. abs (dif) < 1)
finishAnimation();
postInvalidate();
}
}

Лістинг 2.4.2 Анімований повзунок

Для вибору кольору найдоцільніше використовувати палітру, як найшвидший засіб вибрати для себе потрібний колір. Розроблюючи дизайн палітри було враховано те, як це реалізовано у вже готових проектах, зокрема в Google Keep [https://play.google.com/store/apps/details?id=com.google.android.keep&hl=ru] палітра реалізована у вигляді кольорових кіл (рис. 2.4.6). Палітру в FP sDraw було вирішено зробити у вигляді сітки кіл (рис. 2.4.7) (лістинг 2.4.3).

Рис. 2.4.6 Дизайн палітри в Google Keep

Рис. 2.4.7 Дизайн палітри в FP sDraw

public interface ColorChecker{
boolean isActive(int color);
}
public interface ColorApplier {
void applyColor(int color);
}
ArrayList<Palette.PaletteElement> elements;

public Palette(Context context, int [] palette, int size, Palette.ColorApplier applier, Palette.ColorChecker checker) {
super (context);
elements = new ArrayList<>();
int DPI = Data. store. DPI;
//palette
LinearLayout palette_brush_layout = new LinearLayout(context);
LinearLayout palette_brush_item_layout= null;
palette_brush_layout.setOrientation(LinearLayout. HORIZONTAL);
Paint palette_brush_item_paint= new Paint();
palette_brush_item_paint.setAntiAlias(true);

LinearLayout.LayoutParams layout_params_common;
layout_params_common = new LinearLayout.LayoutParams((DPI / 4), (DPI / 4));
layout_params_common.setMargins(DPI/160, DPI/160, DPI/160, DPI/160);

for (int g=0;g< palette. length;g++) {
Palette.PaletteElement paletteElement = new Palette.PaletteElement(context, palette[g], checker, applier);
paletteElement.setLayoutParams(layout_params_common);
elements. add(paletteElement);

//add button to list here
if (palette_brush_item_layout == null || palette_brush_item_layout.getChildCount() >= size) {
palette_brush_item_layout = new LinearLayout(context);
palette_brush_item_layout.setOrientation(LinearLayout. VERTICAL);
palette_brush_item_layout.addView(paletteElement);
palette_brush_layout.addView(palette_brush_item_layout);
}
else {
palette_brush_item_layout.addView(paletteElement);
}
}
addView(palette_brush_layout);
}
void refresh(){
for (int i = 0; i < elements. size(); i++) {
elements. get(i).invalidate();
}
}

Лістинг 2.4.3 Реалізація палітри в FP sDraw

Розробивши дизайн окремих частин меню налаштувань, був розроблений загальний дизайн меню налаштувань (рис. 2.4.8). Меню налаштувань головним чином складається з палітри вибору кольору пензля, палітри вибору кольору фону, вікна попереднього перегляду обраних розмірів та кольорів, кнопки, що дозволяє швидко змінити місцями обрані кольори, повзунка вибору розміру пензля, гумки, та багато іншого.

Рис. 2.4.8 Дизайн меню налаштувань

Дата добавления: 2015-08-09