Porady i wskazówki

Data publikacji: 28 lutego 2014 r.

Dzięki tym wskazówkom możesz zwiększyć wygodę korzystania z aplikacji.

migotanie podczas wczytywania aplikacji;

Czy kiedykolwiek zauważyłeś/zauważyłaś mignięcie obrazu w kolorach czarno-białych podczas wczytywania aplikacji z WebView? Może to być spowodowane wczytaniem koloru tła okna aplikacji, który jest zwykle ustawiany w motywie, a następnie białym błyskiem tła WebView. Dzieje się to, zanim WebView wczyta jakiekolwiek treści, w tym plik CSS.

Aby usunąć białe miganie, ustaw kolor tła WebView. Jedynym opóźnieniem w wyświetlaniu tego koloru jest opóźnienie w aplikacji mobilnej, aby narysować WebView.

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

W przypadku Androida warto zdefiniować wartości kolorów w pliku res/values/colors.xml, zgodnie z opisem w przewodniku po zasobach aplikacji na Androida. Jeśli wybierzesz kolor zdefiniowany w zasobach aplikacji, kod może wyglądać tak:

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

Reakcje na dotyk

Jedną z różnic między aplikacjami mobilnymi a internetowymi jest brak informacji zwrotnej o dotyku w wielu aplikacjach internetowych.

Aby rozwiązać ten problem, użyj pseudoklasy :active.

Załóżmy np., że masz przycisk z taką stylizacją:

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

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

Stan wciśnięcia może wyglądać tak:

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

Spowoduje to lekkie przyciemnienie koloru tła i obramowania oraz zmniejszenie rozmiaru obramowania, dzięki czemu przycisk będzie wyglądał tak, jakby wgłębiał się w stronę. Właściwość top dostosowuje pozycję, aby zrównoważyć mniejszą ramkę.

Jeśli używasz Sass, możesz użyć mixinów darken i lighten, aby zmienić kolory elementów bez konieczności znajomości dokładnej wartości szesnastkowej. Możesz też skorzystać z narzędzi online, takich jak hexcolortool.com.

Najważniejsze wiadomości

Wiele klientów użytkownika dodaje do elementów pewną formę informacji zwrotnej na dotyk, co eliminuje potrzebę definiowania konkretnych stylów. W WebView możesz zauważyć pomarańczowy kolor elementów lub pomarańczowy pierścień wokół linków i elementów.

Jeśli dodasz niestandardowe informacje zwrotne dotyczące dotykania i skupienia, możesz zastąpić domyślne wartości tymi właściwościami CSS:

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

I ustaw własne kolory:

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

Zmiana koloru przycisku w zależności od stanu, w tym domyślnego, skupionego i aktywnego (czyli „wciskanego”).

Oprócz przycisków te właściwości warto ustawić w polach do wprowadzania danych i tagach kotwicy.