Android RadioGroup, RadioButton ve ImageView (Resim)

Geçen gün bahsettiğim android uygulamalarını hayata geçirirken bazı sorunlarla karşılaştım ve bunları sizinle paylaşmak istedim. Öncelikle uygulamada çocukların öğrendiklerini test etme amaçlı bir test arayüzü (activity) yazmak istedim. Test dediğimiz zaman programcı olarak aklımıza gelmesi  gereken elemanlardan (component) ilki radiobutton ‘ dur.

RadioButton, RadioGroup ile kullanıldığında size otomatik olarak çoktan seçmeli bir arayüz oluşturacaktır. RadioGroup içerisine atayacağınız her radiobutton (seçenek) için radiogroup size sadece birisini seçmenizi sağlayacaktır. Zaten test arayüzünden bizim de istediğimiz budur, yani soruya seçenekler içerisinden verilecek tek cevap.

Basitçe kodlayacak olursak;

final RadioGroup radioGroup = new RadioGroup(this); radioGroup.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)); for (int i=0; i<4; i++) { final RadioButton radio = new RadioButton(this); radio.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); int resid = i; Drawable image=getResources().getDrawable(resid); image.setBounds(0, 0, 128, 128); radio.setCompoundDrawables(image, null, null, null); radio.setText(" "); radioGroup.addView(radio); }

             

Yazdığımız kod sonucunda yandaki gibi soru seçenekleri oluşacaktır. Yazı (text) bazlı seçenekler için gayet basit bir çözüm oluyor.

Peki ya yazı değil de seçenekleri resimden oluşturmak istersek nasıl kodlama yapmamız gerekecek?
Öncelikli olarak belirtmek isterim araştırmadan kafamdakilerle olaya başladığımdan sürekli sorun yaşadım. Toplamda 3 farklı yol izleyerek kendimi gereksiz yere yordum ve sonuncu seçenekte doğruyu buldum. Gerçi doğruyu bulduğumda da bir başka bug ile karşılaştım ama sonunda sorun çözülmüş oldu.

Konuyu fazla uzatmadan direkt olarak size çözümü belirtip arkasından diğer uygulamalardaki sıkıntıları sizinle paylaşacağım.

RadioButton üzerinde setCompoundDrawables() adlı  fonksiyonu kullanarak RadioButton üzerine yazıdan önce veya sonra resim çizebiliyoruz. Aşağıdaki kodda drawable klasöründe bulunan bir resimi kullanarak radioButton (seçenek) üzerine resim çizmiş oluyoruz.

Yazıyı boş bırakınca veya boşluk olarak kullanınca seçeneğimiz ( radiobutton) sağdaki şekilde görünecektir. Bu sayede resimli seçenek oluşturmayı basitçe halletmiş olacağız. Yalnız burada daha önceden sözü geçen bug olayından bahsetmek isterim. RadioButton özelliklerinden padding seçeneğini kullandığınızda yani kenar radiobutton için kenar boşluklarını ayarlamak istediğinizde alakasız biçimde oluşturduğunuz seçenek aşağıdaki gibi olacaktır.

Ne yaptıysam ne kadar araştırdıysam da buna bir çözüm bulamadım. En son çözüm olarak kenar boşluklarından (padding) vazgeçtim ve düzeldi.

Aslında resimli seçenek oluşturma çözümü yukarıda bahsettiğim şekilde gerçekleştirilebilir. Tabi bu yöntemi bulmadan önce iki farklı ve zahmetli çözümle yola çıktım. Kısaca yöntemlerden ve yaşadığım sorunlardan bahsedelim.

İlk olarak seçenekler için kullandığım radio button için background özelliğine bitmap resim yerleştirmek istedim. Hayvan resimlerini radiobutton için ölçeklendirip arkaplan resmi olarak kullandım.

float ratio = 0; Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(), Integer.valueOf(question.OptionResources.get(i).Resource.toString())); if(bitmap.getHeight()>=bitmap.getWidth()) {
ratio = Float.valueOf(ImageSizeOption) /bitmap.getHeight(); int newwidth = (int)(bitmap.getWidth()*ratio); bitmap = Bitmap.createScaledBitmap(bitmap.copy(Bitmap.Config.ARGB_8888, true), newwidth, ImageSizeOption, false); } else { ratio = Float.valueOf(ImageSizeOption) /bitmap.getWidth(); int newheight = (int)(bitmap.getHeight()*ratio); bitmap = Bitmap.createScaledBitmap(bitmap.copy(Bitmap.Config.ARGB_8888, true), ImageSizeOption, newheight, false); } int radiowidth = Constants.pixelFromDp(this, 60); Bitmap layoutbitmap = Bitmap.createBitmap(ImageSize*2, bitmap.getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(layoutbitmap); canvas.drawBitmap(bitmap, radiowidth, 1, null); BitmapDrawable bit = new BitmapDrawable(layoutbitmap); radio.setBackgroundDrawable(bit); radio.setText(" "); radioGroup.addView(radio);

Görüldüğü üzere kod bir önceki koda göre oldukça büyüdü ve yapılan işlem sayısı arttı. Resmi ekran boyutuna göre ölçeklendirmek için kontroller geldi. Sonuç olarak bu işlem sayesinde resimli seçeneği oluşturmuş oldum.


Bu yöntemin dezavantajı yavaş kalması, bazı ekranlarda ölçeğin bozulması ve bazı telefonlarda arka plan resminin gözükmemesi oldu. Bu nedenle bu yöntemden vazgeçtim.


Bir de RadioGroup kullanmadan LinearLayout kullanarak RadioButton ve ImageView ikilisini yan yana getirerek seçenekleri oluşturmaya çalıştım. RadioGroup kullanmadığım zaman resimler ne kadar güzel görünse de seçeneklerin hepsi aynı anda seçilir hale geldi.

Seçeneklerin tek tek seçilebilmesi için radiogroup elemanının otomatik olarak yapacağı işi kendim kodlayarak yeni kontrol ekleyerek yapmaya çalıştım. Sonuç olarak yaptm ama kod bir hayli büyüdü. Çözüm güzel olsa da yönetilebilirlik azaldığı için bu yöntemden de vazgeçmiş oldum.