Android
Android Uygulamalarda Doğru Dialog Kullanımları
Mobil uygulamalarımızda görsel tasarım ve işlevsellik ne kadar önemli ise kullanım kolaylığı da o kadar önemli bir yer tutar. Kullanıcı her işlem sonrasında yönlendirilmek ve yapılan işlemlerle ilgili bilgi almak ister. Son anda bile yapacağı işlemden vazgeçebilmeyi talep eder. Bir b...
06.10.2017
Mobil uygulamalarımızda görsel tasarım ve işlevsellik ne kadar önemli ise kullanım kolaylığı da o kadar önemli bir yer tutar. Kullanıcı her işlem sonrasında yönlendirilmek ve yapılan işlemlerle ilgili bilgi almak ister. Son anda bile yapacağı işlemden vazgeçebilmeyi talep eder. Bir butona basıldığında şuan işlemin gerçekleşip gerçekleşmediğini görmek ister. Yine aynı şekilde yapılan bir işlemin sonucunu anlık olarak görmek ister. Bu tür durumlar için dialog lar bir uygulamanın yol göstericisi, merak gidericisi ve sonuçtan emin olma sağlayıcısıdır. Bu koşullar ile dialoglar a bir projenin olmazsa olmazı durumundadır diyebiliriz.
Bir çok farklı dialog kullanımı mevcuttur. Kimi zaman bir sonuç göstermek için, kimi zaman bir işlem gerçekleştirileceğinde onay olmak için, kimi zaman ise işlemin hala sürdüğünü kullanıcıya göstermek için kullanırız. Daha bir çok kullanım şekli mevcuttur. Asıl önemli olan kullanıcıya doğru bilgiyi aktarabilmek, şüpheleri yok etmek, uygulamanın sağlıklı çalışmasını sağlamaktır.
Örnekler ile devam edecek olursak aşağıdaki dialog ta bir işlem sonrasında kullanıcıya bilgilendirme yapılmıştır. Kullanıcı işleminin başarılı olarak tamamlandığından artık emin durumdadır. Herhangi bir bilgilendirme yapılmadığıda kullanıcı şimdi ne oldu, işlem bitti mi, başarılı oldu mu yoksa hata mı oluştu gibi soruları kendine sorabilir.
public void showSimpleDialog(View view) {
AlertDialog.Builder builder =
new AlertDialog.Builder(this);
builder.setTitle("İşlem Sonucu");
builder.setMessage("İşleminiz başarılı olarak gerçekleştirilmiştir.");
builder.setCancelable(false);
builder.setNeutralButton("Tamam", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
Toast.makeText(getApplicationContext(),
"Click",Toast.LENGTH_LONG).show();
}
});
builder.create().show();
}
Bu örnekte ise kullanıcı bir evet / hayır dialog u gösterilir. Amacı kullanıcıdan onay almaktır.Kullanıcı form submit ediyor olabilir, işlemin son adımda olduğunu anlamamış olabilir ya da fazladan geri tuşuna bastığında uygulamadan çıkma durumu gerçekleşebilir. Böylelikle kullanıcının formu yanlışlıkla submit etmiş olması , yanlışlıkla uygulamadan çıkması engellenir ve yapacağı işlemler için şuan geri dönüşü olmayan son adımda olduğu kullanıcıya belirtilmiş olur.
public void showYesNoDialog(View view){
AlertDialog .Builder builder = new AlertDialog.Builder(this);
builder.setMessage("Çıkmak istediğinizden emin misiniz?");
builder.setCancelable(false);
builder.setPositiveButton("Evet", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
finish();
}
});
builder.setNegativeButton("Hayır", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
}
});
builder.create().show();
}
Bu örnekte ise ekran karmaşasından kurtulmak, kullanıcının yapması gerektiği adımı ön plana çıkartmak için dialoglar kullanılmıştır. 3 farklı uygulama şekli ile gerçekleştirilebilir. İsterseniz ekranda bir liste çıkartabilir ve listeden herhangi bir satır seçildiğinde dialogu kapatır işlemine devam etmesini sağlayabilirsiniz. Ya da kararsız kullanıcılar için seçtiği satırı değiştirme imkanı sunar son kararını satır seçme ve bir tamamlama butonu ile gerçekleştirebilirsiniz. Birden fazla seçenek ihtimali var ise dialaog ta çoklu seçim sonrasında yine buton ile işlemi tamamlatabilirsiniz.
public void showListDialog(View view){
final CharSequence[] items =
{"İstanbul","Ankara","İzmir","Eskişehir","Bursa","Antalya"};
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("En sevdiğiniz şehir hangisi?");
builder.setCancelable(false);
builder.setItems(items, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
Toast.makeText(getApplicationContext()
,items[i],Toast.LENGTH_LONG).show();
}
});
builder.create().show();
}
int index;
public void showSingleChoice(View view){
final CharSequence[] items = {"Siyah","Beyaz","Sarı","Kırmızı","Mavi"};
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("En sevdiginiz renk hangisidir?");
builder.setCancelable(false);
builder.setSingleChoiceItems(items, 1, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
index = i;
}
});
builder.setPositiveButton("Tamam", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
Toast.makeText(getApplicationContext(),items[index]
,Toast.LENGTH_LONG).show();
}
});
builder.setNegativeButton("İptal", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
Toast.makeText(getApplicationContext(),"işlem iptal edildi."
,Toast.LENGTH_LONG).show();
}
});
builder.create().show();
}
List<String> selectedItems = new ArrayList<String>();
public void showMultiChoice (View view){
final CharSequence[] items
= {"Futbol","Basketbol","Voleybol","Yüzme","Tenis"};
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setCancelable(false);
builder.setTitle("Sevdiğiniz spor dalları nelerdir?");
selectedItems.clear();
builder.setMultiChoiceItems(items, null, new DialogInterface.OnMultiChoiceClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i, boolean isChecked) {
if(isChecked){
selectedItems.add(""+items[i]);
}else{
if(selectedItems.contains(items[i])){
selectedItems.remove(items[i]);
}
}
}
});
builder.setPositiveButton("Tamam", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
StringBuilder sb = new StringBuilder();
for(int x = 0;x<selectedItems.size();x++){
sb.append(items[x]).append(", ");
}
String sonuc = sb.toString();
sonuc = sonuc.substring(0,sonuc.length()-2);
sonuc += " seçildi.";
Toast.makeText(getApplicationContext(),sonuc,
Toast.LENGTH_LONG).show();
}
});
builder.create().show();
}
Bir diğer dialog gösterim şekli ise progress dialog tur. Bu dialog cevabının gelmesinin uzun sürdüğü ve ne zaman geleceği belli olmayan işlemler sırasında kullanıcıya gösterilmelidir. Örnek olarak çağırdığınız bir web servis ten gelen cevap bir çok kritere bağlı olarak değişir. Yapılan işlemin büyüklüğü, gelen cevabın ne kadar karmaşık olduğu, network bağlantı hızınız gibi maddeleri bu kriterler arasında sayabiliriz. Kullanıcı uzun süren bu işlemler sırasında içinde bir şüphe kalır. Acaba basamadım mı ya da buton şuanda çalışmıyor mu gibi. Hatta basamadım heralde deyip tekrar basma çabası içine bile girebilir. Bir işlem bitmeden tekrar tekrar yapılan bu istekler uygulamanızın crash olup kapanmasına sebep olabilir.
public void showProgressDialog (View view){
BackWorker bw = new BackWorker();
bw.execute();
}
ProgressDialog dialog;
class BackWorker extends AsyncTask<Void,Void,Void> {
@Override
protected void onPreExecute() {
super.onPreExecute();
dialog = ProgressDialog.show(MainActivity.this,"Durum",
"İşleminiz gerçekleştiriliyor...",true,false);
}
@Override
protected Void doInBackground(Void... voids) {
try {
//islemler bu bolumde gerceklestirilir.
Thread.sleep(3000);
}
catch (Exception e){
}
return null;
}
@Override
protected void onPostExecute(Void aVoid) {
super.onPostExecute(aVoid);
dialog.dismiss();
}
}
Ve son olarak da bilmemiz gereken custom olarak herşeyini kendimizin tasarladığı custom dialog tur. Bu dialog ta daha önce bahsettiğim listeden seçmek, tekli seçim yapma ve çoklu seçim yapmak gibi kullanıcıyı yapması gereken işleme odaklanmasını sağlamaktır. Tüm işlemleri aynı ekrana aldığınız durumlar için işlem ve görünürlük karmaşasından kaçmamızı sağlar.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">
<TextView
android:text="Kullanıcı Adı:"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Kullanıcı Adı"
android:ems="10"
android:id="@+id/editText" />
<TextView
android:text="Şifre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView2" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/editText2" />
<Button
android:text="Giriş"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnLogin" />
<TextView
android:text=""
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/txtError" />
</LinearLayout>
public void showCustomDialog(View view){
final Dialog dialog = new Dialog(this);
dialog.setTitle("Kullanıcı Girişi");
dialog.setContentView(R.layout.custom_dialog);
dialog.setCancelable(false);
final EditText editUsername = (EditText)dialog.findViewById(R.id.editText);
final EditText editPassword = (EditText)dialog.findViewById(R.id.editText2);
Button btnLogin = (Button) dialog.findViewById(R.id.btnLogin);
final TextView txtError = (TextView)dialog.findViewById(R.id.txtError);
btnLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
dialog.show();
}
Projelerinizin başarılı olması dileğiyle,
Erdin Ülger