Tips dan trik

Dipublikasikan: 28 Februari 2014

Tingkatkan pengalaman pengguna aplikasi Anda dengan tips berikut.

Berkedip saat aplikasi dimuat

Pernah melihat flash hitam putih saat aplikasi dimuat dengan WebView? Hal ini mungkin disebabkan oleh pemuatan warna latar belakang jendela aplikasi, yang biasanya ditetapkan dalam tema, diikuti dengan flash putih latar belakang WebView. Hal ini terjadi sebelum WebView memuat konten apa pun, termasuk CSS.

Untuk menghapus flash putih, tetapkan warna latar belakang WebView. Satu-satunya keterlambatan dalam menampilkan warna ini adalah di aplikasi seluler untuk menggambar WebView.

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

Di Android, sebaiknya tentukan nilai warna dalam file res/values/colors.xml, seperti yang dijelaskan dalam panduan Resource Aplikasi Android. Jika Anda memilih warna yang ditentukan dalam resource aplikasi, kode mungkin terlihat seperti berikut:

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

Respons sentuhan

Salah satu perbedaan antara aplikasi seluler dan web adalah kurangnya masukan sentuh di banyak aplikasi web.

Untuk mengatasi masalah ini, gunakan class pseudo :active.

Misalnya, jika Anda memiliki tombol dengan gaya berikut:

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

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

Status ditekan mungkin terlihat seperti:

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

Tindakan ini akan sedikit menggelapkan warna latar belakang dan warna batas, serta mengurangi ukuran batas sehingga tombol terlihat seperti tenggelam ke dalam halaman. Properti top menyesuaikan posisi untuk menyeimbangkan batas yang lebih kecil.

Jika menggunakan Sass, Anda dapat menggunakan mixin darken dan lighten untuk mengubah warna elemen tanpa perlu mengetahui nilai heksadesimal yang tepat. Atau, Anda dapat menggunakan alat online seperti hexcolortool.com.

Sorotan sistem

Banyak agen pengguna menambahkan beberapa bentuk respons sentuh ke elemen, yang mencegah kebutuhan untuk menentukan gaya tertentu. Di WebView, Anda mungkin melihat warna oranye pada elemen atau cincin oranye di sekitar link dan elemen.

Jika menambahkan masukan sentuhan dan fokus kustom, Anda dapat mengganti default dengan properti CSS berikut:

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

Dan tetapkan warna Anda sendiri:

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

Tindakan ini akan mengubah warna tombol berdasarkan status, termasuk status default, fokus, dan aktif (atau "ditekan").

Selain tombol, pertimbangkan untuk menetapkan properti ini di kolom input dan tag anchor.