Android P (API 28) ile birlikte Material Design bile\u015fen k\u00fct\u00fcphanesine eklenen Chips ve ChipGroup, mobil uygulama geli\u015ftiricilerine kullan\u0131c\u0131 aray\u00fczlerini daha etkile\u015fimli, d\u00fczenli ve sezgisel hale getirme imkan\u0131 sunmu\u015ftur. Bu makale, Chips ve ChipGroup’un ne oldu\u011funu, farkl\u0131 t\u00fcrlerini, nas\u0131l kullan\u0131ld\u0131klar\u0131n\u0131, \u00f6zelle\u015ftirme se\u00e7eneklerini ve en iyi uygulama y\u00f6ntemlerini detayl\u0131 bir \u015fekilde inceleyecektir. Amac\u0131m\u0131z, geli\u015ftiricilere bu g\u00fc\u00e7l\u00fc bile\u015fenleri projelerinde etkin bir \u015fekilde kullanmalar\u0131 i\u00e7in kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n
Material Design, Google taraf\u0131ndan geli\u015ftirilen ve kullan\u0131c\u0131 aray\u00fcz\u00fc tasar\u0131m\u0131na y\u00f6nelik kapsaml\u0131 bir k\u0131lavuz ve bile\u015fen sistemidir. Amac\u0131, platformlar aras\u0131 tutarl\u0131, estetik ve i\u015flevsel deneyimler yaratmakt\u0131r. Android P ile tan\u0131t\u0131lan Chips, Material Design’\u0131n bu felsefesini yans\u0131tan \u00f6nemli bir UI \u00f6\u011fesidir. Geleneksel olarak etiketler, filtreler veya se\u00e7imler gibi verileri g\u00f6stermek i\u00e7in kullan\u0131lan basit metin g\u00f6r\u00fcn\u00fcmleri veya d\u00fc\u011fmeler yerine, Chips daha zengin bir etkile\u015fim ve g\u00f6rsel geri bildirim sunar.<\/p>\n
Chips, kullan\u0131c\u0131lar\u0131n bir dizi se\u00e7ene\u011fi filtrelemesine, giri\u015f yapmas\u0131na, eylem ger\u00e7ekle\u015ftirmesine veya bilgi g\u00f6r\u00fcnt\u00fclemesine olanak tan\u0131yan kompakt, etkile\u015fimli \u00f6\u011felerdir. Genellikle k\u00fc\u00e7\u00fck, yuvarlak kenarl\u0131 dikd\u00f6rtgenler \u015feklinde g\u00f6r\u00fcn\u00fcrler ve metin, simge ve bazen de bir kapatma d\u00fc\u011fmesi i\u00e7erebilirler. Bu bile\u015fenler, karma\u015f\u0131k verileri basitle\u015ftirmek, kullan\u0131c\u0131 girdilerini d\u00fczenlemek ve kullan\u0131labilir se\u00e7enekleri net bir \u015fekilde sunmak i\u00e7in idealdir. \u00d6zellikle s\u0131n\u0131rl\u0131 ekran alan\u0131na sahip mobil cihazlarda, bilgiyi verimli bir \u015fekilde sunmak ve kullan\u0131c\u0131 etkile\u015fimini optimize etmek a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck bir avantaj sa\u011flarlar.<\/p>\n
Bir Chip, tek bir \u00f6zniteli\u011fi, se\u00e7imi veya eylemi temsil eden k\u00fc\u00e7\u00fck bir UI \u00f6\u011fesidir. Kullan\u0131m amac\u0131na g\u00f6re d\u00f6rt ana t\u00fcre ayr\u0131l\u0131rlar: Action Chips, Filter Chips, Input Chips ve Choice Chips. Her bir t\u00fcr, belirli bir etkile\u015fim senaryosu i\u00e7in tasarlanm\u0131\u015ft\u0131r ve farkl\u0131 g\u00f6rsel ve davran\u0131\u015fsal \u00f6zelliklere sahiptir.<\/p>\n
Action Chips, kullan\u0131c\u0131ya bir eylem tetikleme imkan\u0131 sunan \u00e7iplerdir. Genellikle birincil bir i\u00e7erik alan\u0131nda veya bir grup ilgili eylemi temsil etmek i\u00e7in kullan\u0131l\u0131rlar. \u00d6rne\u011fin, bir uygulamada “Haritada G\u00f6ster”, “Payla\u015f” veya “Ara” gibi h\u0131zl\u0131 eylemleri tetiklemek i\u00e7in kullan\u0131labilirler. Bir simge ve metin i\u00e7erebilirler ancak genellikle kapatma simgesi i\u00e7ermezler, \u00e7\u00fcnk\u00fc ama\u00e7lar\u0131 bir bilgiyi kald\u0131rmak de\u011fil, bir eylemi ba\u015flatmakt\u0131r.<\/p>\n
\nFilter Chips<\/h4>\n
Filter Chips, kullan\u0131c\u0131n\u0131n bir i\u00e7erik grubunu filtrelemesine olanak tan\u0131r. Bu \u00e7ipler, se\u00e7ilebilir durumdad\u0131r; yani kullan\u0131c\u0131 taraf\u0131ndan se\u00e7ilebilir veya se\u00e7imi kald\u0131r\u0131labilirler. Se\u00e7ildi\u011finde g\u00f6rsel olarak farkl\u0131la\u015f\u0131rlar (\u00f6rne\u011fin, farkl\u0131 bir arka plan rengi veya bir onay i\u015fareti ile). Bir listeden \u00f6\u011feleri filtrelemek, kategorileri se\u00e7mek veya arama sonu\u00e7lar\u0131n\u0131 daraltmak i\u00e7in idealdirler. Bir Filter Chip se\u00e7ildi\u011finde, genellikle bir onay i\u015fareti simgesi g\u00f6r\u00fcn\u00fcr.<\/p>\n
\nInput Chips<\/h4>\n
Input Chips, kullan\u0131c\u0131 giri\u015fini temsil eder ve genellikle bir metin giri\u015f alan\u0131yla birlikte kullan\u0131l\u0131r. Bu \u00e7ipler, bir kullan\u0131c\u0131n\u0131n bir alana girdi\u011fi bilgiyi (\u00f6rne\u011fin, e-posta adresleri, etiketler veya anahtar kelimeler) g\u00f6stermek i\u00e7in kullan\u0131l\u0131r. Genellikle bir metin, bir avatar veya simge ve bir kapatma simgesi i\u00e7erirler, b\u00f6ylece kullan\u0131c\u0131 giri\u015fi kolayca kald\u0131r\u0131labilir. Kullan\u0131c\u0131 bir metin kutusuna bir de\u011fer girdi\u011finde ve onaylad\u0131\u011f\u0131nda (\u00f6rne\u011fin, Enter tu\u015funa basarak), bu de\u011fer bir Input Chip olarak g\u00f6sterilir.<\/p>\n
\nChoice Chips<\/h4>\n
Choice Chips, bir grup i\u00e7inde tek bir se\u00e7ene\u011fin se\u00e7ilmesine izin verir. Radyo d\u00fc\u011fmelerine benzer \u015fekilde \u00e7al\u0131\u015f\u0131rlar, ancak g\u00f6rsel olarak daha modern ve esnektirler. Bir gruptaki Choice Chips’ten yaln\u0131zca biri ayn\u0131 anda se\u00e7ili olabilir. Bu \u00e7ipler, kullan\u0131c\u0131n\u0131n bir listeden yaln\u0131zca bir \u00f6\u011fe se\u00e7mesi gereken durumlarda (\u00f6rne\u011fin, boyut se\u00e7imi, \u00f6deme y\u00f6ntemi se\u00e7imi) kullan\u0131l\u0131r. Se\u00e7ildi\u011finde g\u00f6rsel olarak farkl\u0131la\u015f\u0131rlar ve genellikle bir onay i\u015fareti simgesi g\u00f6sterirler.<\/p>\n
\nChipGroup: Chip’leri Y\u00f6netmenin Ak\u0131ll\u0131 Yolu<\/h3>\n
Tek ba\u015f\u0131na Chips, belirli etkile\u015fimler i\u00e7in kullan\u0131\u015fl\u0131d\u0131r, ancak genellikle birden fazla Chip’in bir arada d\u00fczenlenmesi ve y\u00f6netilmesi gerekir. \u0130\u015fte bu noktada ChipGroup devreye girer. ChipGroup, bir veya daha fazla Chip’i bir araya getiren ve onlar\u0131 d\u00fczenli bir \u015fekilde hizalayan bir ViewGroup’tur. \u00d6zellikle yatay veya dikey olarak birden fazla Chip’i sarmalama (wrap) yetene\u011fi sayesinde, farkl\u0131 ekran boyutlar\u0131na uyum sa\u011flayan esnek aray\u00fczler olu\u015fturmak i\u00e7in vazge\u00e7ilmezdir.<\/p>\n
Neden ChipGroup’a \u0130htiya\u00e7 Duyar\u0131z?<\/h4>\n
ChipGroup, Chips’i manuel olarak d\u00fczenleme karma\u015fas\u0131n\u0131 ortadan kald\u0131r\u0131r. Chips’i bir LinearLayout veya GridLayout i\u00e7ine yerle\u015ftirmek yerine, ChipGroup kullanmak, \u00e7iplerin otomatik olarak sar\u0131lmas\u0131n\u0131 (wrap) ve aralar\u0131nda bo\u015fluk b\u0131rak\u0131lmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, \u00f6zellikle Filter Chips ve Choice Chips gibi se\u00e7ilebilir \u00e7ipler i\u00e7in, tekli se\u00e7im veya \u00e7oklu se\u00e7im mant\u0131\u011f\u0131n\u0131 kolayca y\u00f6netmek i\u00e7in yerle\u015fik \u00f6zellikler sunar. Bu, geli\u015ftiricilerin kod yazma y\u00fck\u00fcn\u00fc azalt\u0131r ve daha tutarl\u0131 bir kullan\u0131c\u0131 deneyimi sa\u011flar.<\/p>\n
Temel \u00d6zellikleri ve Avantajlar\u0131<\/h4>\n
* Otomatik D\u00fczenleme:<\/strong> Chips’i otomatik olarak sarar ve uygun bo\u015fluklarla d\u00fczenler.
\n* Se\u00e7im Y\u00f6netimi:<\/strong> singleSelection<\/code> \u00f6zelli\u011fi ile bir grupta yaln\u0131zca bir Chip’in se\u00e7ilmesini sa\u011flayabilir.
\n* Bo\u015fluk Kontrol\u00fc:<\/strong> chipSpacingHorizontal<\/code> ve chipSpacingVertical<\/code> \u00f6znitelikleri ile \u00e7ipler aras\u0131ndaki yatay ve dikey bo\u015fluklar\u0131 kolayca ayarlayabilirsiniz.
\n* Eri\u015filebilirlik:<\/strong> Varsay\u0131lan olarak eri\u015filebilirlik \u00f6zelliklerini destekler, bu da uygulaman\u0131z\u0131n daha kapsay\u0131c\u0131 olmas\u0131n\u0131 sa\u011flar.<\/p>\nUygulama Ad\u0131mlar\u0131: Chips ve ChipGroup’u Projenize Entegre Etme<\/h3>\n
Chips ve ChipGroup’u kullanmak i\u00e7in \u00f6ncelikle projenize Material Design bile\u015fen k\u00fct\u00fcphanesini eklemeniz gerekir.<\/p>\n
Gerekli Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Ekleme<\/h4>\n
build.gradle (Module: app)<\/code> dosyan\u0131za a\u015fa\u011f\u0131daki ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 ekleyin:<\/p>\n\ndependencies {\n \/\/ ... di\u011fer ba\u011f\u0131ml\u0131l\u0131klar\n implementation 'com.google.android.material:material:1.x.x' \/\/ x.x g\u00fcncel versiyon olmal\u0131\n}\n<\/code><\/pre>\nArd\u0131ndan projenizi senkronize edin. Material Design 3 (MD3) kullan\u0131yorsan\u0131z, versiyon 1.6.0<\/code> ve \u00fczeri olmal\u0131d\u0131r.<\/p>\nXML ile Chip Tan\u0131mlama<\/h4>\n
Bir Chip<\/code> bile\u015feni, Layout dosyan\u0131zda do\u011frudan tan\u0131mlanabilir:<\/p>\n\nXML ile ChipGroup Tan\u0131mlama<\/h4>\n
Bir ChipGroup<\/code> i\u00e7ine birden fazla Chip<\/code> yerle\u015ftirebilirsiniz:<\/p>\n\n\n\n Chip ve ChipGroup \u00d6znitelikleri (Attributes) Detayl\u0131 \u0130nceleme<\/h4>\n
Chips ve ChipGroup’un davran\u0131\u015f\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u00f6zelle\u015ftirmek i\u00e7in bir\u00e7ok \u00f6znitelik mevcuttur:<\/p>\n
* android:text<\/code><\/strong>: Chip \u00fczerinde g\u00f6sterilecek metni belirler.
\n* app:chipIcon<\/code><\/strong>: Chip’in sol taraf\u0131nda g\u00f6sterilecek simgeyi belirler.
\n* app:closeIcon<\/code><\/strong>: Chip’in sa\u011f taraf\u0131nda g\u00f6sterilecek kapatma simgesini belirler. Genellikle Input Chips i\u00e7in kullan\u0131l\u0131r.
\n* app:closeIconVisible<\/code><\/strong>: Kapatma simgesinin g\u00f6r\u00fcn\u00fcr olup olmad\u0131\u011f\u0131n\u0131 belirler (boolean).
\n* app:chipBackgroundColor<\/code><\/strong>: Chip’in arka plan rengini belirler.
\n* app:chipStrokeColor<\/code><\/strong>: Chip’in kenarl\u0131k rengini belirler.
\n* app:chipStrokeWidth<\/code><\/strong>: Chip’in kenarl\u0131k kal\u0131nl\u0131\u011f\u0131n\u0131 belirler.
\n* app:chipMinHeight<\/code><\/strong>: Chip’in minimum y\u00fcksekli\u011fini belirler.
\n* app:chipCornerRadius<\/code><\/strong>: Chip’in k\u00f6\u015fe yuvarlama yar\u0131\u00e7ap\u0131n\u0131 belirler.
\n* android:checkable<\/code><\/strong>: Chip’in se\u00e7ilebilir olup olmad\u0131\u011f\u0131n\u0131 belirler (boolean). Filter ve Choice Chips i\u00e7in true<\/code> olmal\u0131d\u0131r.
\n* android:clickable<\/code><\/strong>: Chip’in t\u0131klanabilir olup olmad\u0131\u011f\u0131n\u0131 belirler (boolean). android:checkable<\/code> true<\/code> ise bu da true<\/code> olmal\u0131d\u0131r.
\n* style<\/code><\/strong>: Material Design taraf\u0131ndan sa\u011flanan \u00f6nceden tan\u0131mlanm\u0131\u015f stillerden birini uygulaman\u0131z\u0131 sa\u011flar (\u00f6rn. @style\/Widget.Material3.Chip.Action<\/code>).<\/p>\nChipGroup \u00d6zellikleri:<\/strong><\/p>\n* app:singleLine<\/code><\/strong>: Chips’in tek bir sat\u0131rda m\u0131 yoksa birden fazla sat\u0131ra m\u0131 yay\u0131laca\u011f\u0131n\u0131 belirler (boolean). false<\/code> ise \u00e7ipler otomatik olarak alt sat\u0131ra ge\u00e7er.
\n* app:singleSelection<\/code><\/strong>: ChipGroup i\u00e7indeki Chips’ten yaln\u0131zca birinin ayn\u0131 anda se\u00e7ilebilir olup olmad\u0131\u011f\u0131n\u0131 belirler (boolean). true<\/code> ise, bir radyo grubu gibi davran\u0131r.
\n* app:chipSpacingHorizontal<\/code><\/strong>: Chips aras\u0131ndaki yatay bo\u015flu\u011fu belirler (dimension).
\n* app:chipSpacingVertical<\/code><\/strong>: Chips aras\u0131ndaki dikey bo\u015flu\u011fu belirler (dimension).<\/p>\nProgramatik Yakla\u015f\u0131m: Dinamik Chips Olu\u015fturma ve Y\u00f6netme<\/h3>\n
Chips’i sadece XML ile de\u011fil, ayn\u0131 zamanda kod arac\u0131l\u0131\u011f\u0131yla dinamik olarak olu\u015fturabilir ve y\u00f6netebilirsiniz. Bu, \u00f6zellikle verilerin dinamik olarak y\u00fcklendi\u011fi veya kullan\u0131c\u0131 girdilerine g\u00f6re \u00e7iplerin olu\u015fturulmas\u0131 gereken senaryolarda kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
Kotlin\/Java ile Chip Olu\u015fturma<\/h4>\n\n\/\/ Kotlin\nval chip = Chip(context)\nchip.text = \"Dinamik Chip\"\nchip.chipIcon = ContextCompat.getDrawable(context, R.drawable.ic_dynamic)\nchip.isCheckable = true\nchip.isClickable = true\nchip.setOnClickListener {\n \/\/ Chip t\u0131klama olay\u0131n\u0131 y\u00f6net\n}\n\n\/\/ Java\nChip chip = new Chip(context);\nchip.setText(\"Dinamik Chip\");\nchip.setChipIcon(ContextCompat.getDrawable(context, R.drawable.ic_dynamic));\nchip.setCheckable(true);\nchip.setClickable(true);\nchip.setOnClickListener(v -> {\n \/\/ Chip t\u0131klama olay\u0131n\u0131 y\u00f6net\n});\n<\/code><\/pre>\nChipGroup’a Dinamik Chip Ekleme\/\u00c7\u0131karma<\/h4>\n
Olu\u015fturdu\u011funuz \u00e7ipleri bir ChipGroup<\/code>‘a ekleyebilirsiniz:<\/p>\n\n\/\/ Kotlin\nval chipGroup = findViewById(R.id.my_chip_group)\nchipGroup.addView(chip)\n\n\/\/ Java\nChipGroup chipGroup = findViewById(R.id.my_chip_group);\nchipGroup.addView(chip);\n<\/code><\/pre>\nBir Chip’i kald\u0131rmak i\u00e7in:<\/p>\n
\n\/\/ Kotlin\nchipGroup.removeView(chip)\n\n\/\/ Java\nchipGroup.removeView(chip);\n<\/code><\/pre>\nT\u0131klama ve Se\u00e7im Olaylar\u0131n\u0131 Y\u00f6netme<\/h4>\n
Tekil Chip T\u0131klamalar\u0131:<\/strong> Her bir Chip i\u00e7in ayr\u0131 ayr\u0131 setOnClickListener<\/code> veya setOnCloseIconClickListener<\/code> tan\u0131mlayabilirsiniz.<\/p>\n\n\/\/ Kotlin\nchip.setOnClickListener { view ->\n val clickedChip = view as Chip\n Toast.makeText(context, \"${clickedChip.text} t\u0131kland\u0131!\", Toast.LENGTH_SHORT).show()\n}\n\nchip.setOnCloseIconClickListener {\n chipGroup.removeView(chip)\n Toast.makeText(context, \"${chip.text} kald\u0131r\u0131ld\u0131!\", Toast.LENGTH_SHORT).show()\n}\n\n\/\/ Java\nchip.setOnClickListener(view -> {\n Chip clickedChip = (Chip) view;\n Toast.makeText(context, clickedChip.getText() + \" t\u0131kland\u0131!\", Toast.LENGTH_SHORT).show();\n});\n\nchip.setOnCloseIconClickListener(v -> {\n chipGroup.removeView(chip);\n Toast.makeText(context, chip.getText() + \" kald\u0131r\u0131ld\u0131!\", Toast.LENGTH_SHORT).show();\n});\n<\/code><\/pre>\nChipGroup Se\u00e7im De\u011fi\u015fiklikleri (OnCheckedChangeListener<\/code>):<\/strong> \u00d6zellikle Filter veya Choice Chips gruplar\u0131nda, hangi \u00e7iplerin se\u00e7ildi\u011fini izlemek i\u00e7in setOnCheckedChangeListener<\/code> kullanabilirsiniz.<\/p>\n\n\/\/ Kotlin\nchipGroup.setOnCheckedChangeListener { group, checkedId ->\n val selectedChipIds = group.checkedChipIds \/\/ Se\u00e7ili \u00e7iplerin ID'leri\n selectedChipIds.forEach { id ->\n val selectedChip = group.findViewById(id)\n Toast.makeText(context, \"${selectedChip.text} se\u00e7ildi!\", Toast.LENGTH_SHORT).show()\n }\n}\n\n\/\/ Java\nchipGroup.setOnCheckedChangeListener((group, checkedId) -> {\n List selectedChipIds = group.getCheckedChipIds();\n for (Integer id : selectedChipIds) {\n Chip selectedChip = group.findViewById(id);\n Toast.makeText(context, selectedChip.getText() + \" se\u00e7ildi!\", Toast.LENGTH_SHORT).show();\n }\n});\n<\/code><\/pre>\nSe\u00e7ili Chip’leri Alma:<\/strong> chipGroup.checkedChipIds<\/code> \u00f6zelli\u011fi, se\u00e7ili t\u00fcm \u00e7iplerin kaynak kimliklerinin (ID) bir listesini d\u00f6nd\u00fcr\u00fcr. E\u011fer singleSelection<\/code> true<\/code> ise, bu liste en fazla bir \u00f6\u011fe i\u00e7erecektir.<\/p>\nChips ve ChipGroup’u \u00d6zelle\u015ftirme ve Stilleme<\/h3>\n
Material Design bile\u015fenleri, uygulaman\u0131z\u0131n genel temas\u0131na uyum sa\u011flayacak \u015fekilde kolayca \u00f6zelle\u015ftirilebilir. Chips’in g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmek i\u00e7in \u00e7e\u015fitli yollar vard\u0131r:<\/p>\n
1. Material Design Temalar\u0131:<\/strong> Uygulaman\u0131z\u0131n genel Material Design temas\u0131 (\u00f6rne\u011fin, Theme.Material3.DayNight.NoActionBar<\/code>) Chips’in varsay\u0131lan g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc etkiler. Tema renkleriniz, tipografiniz ve \u015fekilleriniz otomatik olarak Chips’e uygulan\u0131r.
\n2. \u00d6n Tan\u0131ml\u0131 Stiller:<\/strong> Yukar\u0131da belirtildi\u011fi gibi, Material Design bile\u015fen k\u00fct\u00fcphanesi Action, Filter, Input ve Choice Chips i\u00e7in \u00f6nceden tan\u0131mlanm\u0131\u015f stiller sunar (\u00f6rn. @style\/Widget.Material3.Chip.Action<\/code>). Bu stiller, \u00e7iplerin temel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve davran\u0131\u015f\u0131n\u0131 belirler.
\n3. \u00d6zel Stiller Olu\u015fturma:<\/strong> Kendi \u00f6zel stilinizi tan\u0131mlayarak Chips’in g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc daha ayr\u0131nt\u0131l\u0131 bir \u015fekilde kontrol edebilirsiniz. Bunu styles.xml<\/code> dosyan\u0131zda yapabilirsiniz:<\/p>\n\n