Merhaba Arkadaşlar,
Mobilhanem.com sitemiz üzerinden anlattığımız/yayınladığımız Android Eğitimleri yazı serimizde bu dersimizde ToogleButton, CheckBox, Switch, RadioButton Kullanımı ile devam ediyoruz. CompoundButton dan türeyen bu android bileşenlerini seçim yapabilmek için kullanırız.
ToogleButton
ToogleButton iki durum arasındaki ayarı değiştirmenizi sağlar. ToogleButton tanımladığımızda default olarak ON/ OFF seçenekleri karşımıza çıkıyor.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_horizontal"
android:text="ToggleButton" />
</RelativeLayout>
Ekran çıktısı:
ToggleButton state olaylarını dinlemek için aşağıdaki yapıyı kullanıyoruz.
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ToggleButton toggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toggle = (ToggleButton) findViewById(R.id.toggleButton);
toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
//The toggle is enabled
} else {
// The toggle is enabled
}
}
});
}
}
Yukarıdaki konu ile ilgili küçük bir örnek yapalım; ToogButton “ON” durumuna geçtiğinde butonumuzun görünürlüğünü gone yapalım. Eğer ToogleButton “OFF” olduğu durumda ise görünürlüğünü visible yapalım.
activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToggleButton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<Button
android:id="@+id/startBttn"
android:text="Tıkla"
android:layout_below="@+id/toggleButton"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ToggleButton toggle;
private Button startBttn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toggle = (ToggleButton) findViewById(R.id.toggleButton);
startBttn = (Button)findViewById(R.id.startBttn);
toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
startBttn.setVisibility(View.GONE);
} else {
startBttn.setVisibility(View.VISIBLE);
}
}
});
}
}
android:textOff : ToogleButton check olmadığı durumda gösterilecek yazıyı belirler.
android:textOn : ToogleButton check olduğu durumda gösterilecek yazıyı belirler.
activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToggleButton"
android:textOn="Gündüz"
android:textOff="Gece"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
android:textColor: ToogleButton içinde yer alan yazının rengini değiştirmeyi sağlar.
activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToggleButton"
android:textOn="Gündüz"
android:textOff="Gece"
android:textColor="#f00"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
android:drawableBottom, android:drawableTop, android:drawableRight, android:drawableLeft : Sırasıyla ToggleButton un altında, üstünde , sağında ve solunda resim konumlandırmamızı sağlar.
activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToggleButton"
android:textOn="Gündüz"
android:textOff="Gece"
android:drawableTop="@mipmap/ic_launcher_round"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
android:background: ToogleButton un arka planı değiştirebilmemizi sağlar.
activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToggleButton"
android:textOn="Gündüz"
android:textOff="Gece"
android:background="#0000FF"
android:drawableTop="@mipmap/ic_launcher_round"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Custom ToogleButton Oluşturma
Kendi ToogleButton larımızı dilediğimiz gibi şekillendirebiliriz. Öncelikle nasıl bir toogle button oluşturmak istediğinize karar verin daha sonra onunla ilgili iki resim oluşturmanız gerekiyor birincisi ToogleButton un açık olduğu durum ikincisi ise ToogleButton un kapalı olduğu durum.
Aşağıda kullanacağımız resimler bulunuyor bunları Android Studio da projemizin dizininde bulunan res-> drawable klasörüne taşıyoruz.
tooglebutton_on
togglebutton_off
Şimdi res->drawable klasörü içine tooglebutton_selector adını verdiğimiz bir xml dosyası oluşturuyoruz. Aşağıda gördüğünüz gibi drawable klasörüne koyduğumuz resimleri check olma durumlarına göre yerleştiriyoruz.
tooglebutton_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/tooglebutton_on"
android:state_checked="true"/>
<item
android:drawable="@drawable/tooglebutton_off"
android:state_checked="false"/>
</selector>
ve son olarak xml layout kısmında bu yarattığımız selectoru arka plan olarak ToogleButton a veriyoruz.
activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff=""
android:textOn=""
android:background="@drawable/tooglebutton_selector"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Ekran çıktısı:
CheckBox
Checkbox birçok seçenek arasından bir veya daha fazla seçim yapmamızı sağlayan bir android bileşenidir. xml layout kısmında nasıl tanımlandığını aşağıdaki gösterdik.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<CheckBox android:id="@+id/checkboxAndroid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android"
/>
<CheckBox android:id="@+id/checkboxIos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="IOS"
/>
</LinearLayout>
</RelativeLayout>
Ekran çıktısı:
CheckBox ları seçme eventlerini yakalamak için aşağıdaki gibi xml layout kısmında her bir CheckBox a tıklandığında tek bir methodu tetiklettiriyoruz.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<CheckBox android:id="@+id/checkboxAndroid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android"
android:onClick="checkBoxClicked"
/>
<CheckBox android:id="@+id/checkboxIos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="IOS"
android:onClick="checkBoxClicked"
/>
</LinearLayout>
</RelativeLayout>
Yukarıda onClick olayında tanımladığımız checkBoxClicked methodunu aşağıda tanımladık ve check olma durumuna göre de hangi CheckBox dan geldiğini id ile belirledik ona göre de istediğimiz işlemleri gerçekleştirebiliriz.
MainActivity.java
package com.mobilhanem.androidexample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.CheckBox;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void checkBoxClicked(View view) {
boolean checked = ((CheckBox) view).isChecked();
switch(view.getId()) {
case R.id.checkboxAndroid:
if(checked){
}else{
}
break;
case R.id.checkboxIos:
if(checked){
}else{
}
break;
}
}
}
Yukarıda tek bir method da kontrolleri yaptık fakat ayrı ayrı CheckBox ların tıklamalarını dinleyecek olursak aşağıdaki gibi setOnCheckedChangeListener kullanmalıyız.
MainActivity.java
ublic class MainActivity extends AppCompatActivity {
private CheckBox checkboxAndroid;
private CheckBox checkboxIOS;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
checkboxAndroid = (CheckBox)findViewById(R.id.checkboxAndroid);
checkboxIOS = (CheckBox)findViewById(R.id.checkboxIos);
checkboxAndroid.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked)
{
}
}
});
checkboxIOS.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked)
{
}
}
});
}
}
android:checked: true olması durumunda ilgili CheckBox un tikli gelmesini sağlar.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<CheckBox android:id="@+id/checkboxAndroid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android"
android:checked="true"
/>
<CheckBox android:id="@+id/checkboxIos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="IOS"
/>
</LinearLayout>
</RelativeLayout>
Ekran çıktısı:
Switch
İki seçenek arasında seçim yapmayı sağlayan android bileşenidir. Örnek verecek ilk durumda Kapalı olan Switch değerinin değişim yapıldıktan sonra Açık hale gelmesi.
Switch android bileşeninin xml layout tanımlaması aşağıdadır.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Switch
android:id="@+id/simpleSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kapalı"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Şimdi MainActivity kısmını inceleyelim; setOnCheckedChangeListener ile Switch değişikliğini yakalarız ve tikli ise Açık olarak yazıyı değiştiririz eğer tikli değilse de Kapalı olarak değiştiririz.
MainActivity.java
public class MainActivity extends AppCompatActivity {
private Switch aSwitch;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
aSwitch = (Switch)findViewById(R.id.simpleSwitch);
aSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked){
buttonView.setText("Açık");
}else{
buttonView.setText("Kapalı");
}
}
});
}
}
Ekran çıktısı:
Kapalı olma durumu
Açık olma durumu
Evet arkadaşlar ToogleButton, CheckBox, Switch, RadioButton Kullanımı aşamalarını sizlere detaylıca anlatmaya çalıştım. Umarım hepiniz için faydalı olmuştur.
Sıfırdan android dersleri için tıklayınız.
Mobilhanem.com üzerinden anlattığımız android uygulama geliştirme derslerine devam edeceğiz. Konu hakkında sorunuzu yorum alanından sorabilirsiniz. Konu dışı sorularınızı ve tüm yazılımsal sorularınızı sorucevap.mobilhanem.com sitemizden de sorabilirsiniz.
Bir daha ki dersimizde görüşmek dileğiyle..
57