Секреты и уловки

Опубликовано: 28 февраля 2014 г.

Повысьте удобство использования вашего приложения с помощью следующих советов.

Мерцает при загрузке приложения

Вы когда-нибудь замечали вспышку черно-белого изображения при загрузке приложения с помощью WebView? Это может быть вызвано загрузкой цвета фона окна приложения, который обычно устанавливается в теме, за которым следует белая вспышка фона WebView. Это происходит до того, как WebView загрузит какой-либо контент, включая CSS.

Чтобы убрать белую вспышку, установите цвет фона WebView. Единственная задержка в отображении этого цвета — в мобильном приложении для рисования WebView.

mWebView.setBackgroundColor(Color.parseColor("#3498db"));

В Android рекомендуется определять значения цвета в файле res/values/colors.xml , как описано в руководстве по ресурсам приложений для Android . Если вы выберете цвет, определенный в ресурсах приложения, код может выглядеть следующим образом:

mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name));

Сенсорный отзыв

Одним из различий между мобильными и веб-приложениями является отсутствие сенсорной обратной связи во многих веб-приложениях.

Чтобы решить эту проблему, используйте псевдокласс :active .

Например, если у вас есть кнопка со следующим стилем:

.btn {
  display: inline-block;
  position: relative;
  background-color: #f39c12;
  padding: 14px;

  border-radius: 5px;
  border-bottom-style: solid;
  border-width: 4px;
  border-color: #DA8300;
}

Нажатое состояние может выглядеть так:

.btn:active {
  background-color: #E68F05;
  border-color: #CD7600;
  border-width: 2px;
  top: 2px;
}

Это слегка затемнит цвет фона и цвет границы, а также уменьшит размер границы, так что будет казаться, что кнопка погружается в страницу. Свойство top корректирует положение, чтобы сбалансировать меньшую границу.

Если вы используете Sass, вы можете использовать миксины затемнения и освещения, чтобы изменять цвета элементов без необходимости знать точное шестнадцатеричное значение. Или вы можете использовать онлайн-инструменты, такие как hexcolortool.com .

Основные характеристики системы

Многие пользовательские агенты добавляют к элементам ту или иную форму сенсорной обратной связи, что избавляет от необходимости определять определенные стили. В WebView вы можете заметить оранжевый цвет элементов или оранжевое кольцо вокруг ссылок и элементов.

Если вы добавите пользовательскую обратную связь при касании и фокусировке, вы можете переопределить значения по умолчанию с помощью следующих свойств CSS:

-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
outline: none;

И установите свои собственные цвета:

button {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0,0,0, 0.0);
}

button:focus {
  background-color: #E68F05;
  border-color: #DA8300;
}

button:active {
  background-color: #FFA91F;
  border-color: #E68F05;
}

Это изменяет цвет кнопки в зависимости от состояния, включая состояние по умолчанию, фокус и активное (или «нажатое») состояние.

Помимо кнопок, рассмотрите возможность установки этих свойств в полях ввода и тегах привязки.