UI/UX

Custom Views ile Listview Oluşturma

1
1571
Share

Bugün ki yazımda bir çok uygulamada içerikleri listelemek için kullanılan Listview arayüz elementini ve yuvarlak şekil çizmeyi, Custom Views yapısını kullanarak oluşturmayı örnekleyeceğim.

Custom Views nedir? Neden Custom Views yapısını kullanarak uygulama arayüzlerimizi (Android UI) oluşturmalıyız?

Custom Views ,Android Ide’sinde Palette bölümünde bulunan hazır Android UI(Arayüz) elementlerini (TextView, EditText, ListView, CheckBox, RadioButton vb.) kullanmadan, Java tarafında kodlama yaparak kullanıcıya arayüz oluşturulmasıdır Neden Custom Views yapısını kullanmalıyız ?
1- Yazılımcının oluşturmak istediği tasarım, hazır arayüz elemanlarında bulunmayabilir, ve ya var olan arayüz elemanlarını özelleştirmek istediğiniz zamanlarda Custom Views yapısı devreye girer. Örneğin; TextViews ile göstereceğiniz yazıda kullanacağınız fontu, Xml tarafında ayarladığınızda desteklemeyebilir ya da harfler arasındaki boşlukları ayarlama kolaylık sağlaması, farklı şekillerin oluşturulması konularında Custom Views kullanılır.

2- Diğer bir önemli neden ise; Yazılımcı ne kadar çok xml tarafında hazır arayüz elemanları kullanırsa, birinci olarak uygulamanın boyutunun yükselmesine, uygulamanız kullanıldığında cihazın şarjının bitmesine ve performans açısından fazlasıyla olumsuz etkiler. Bu yüzden mümkün mertebede xml tarafında hazır arayüz elemanları kullanmaktan kaçınıp, Custom Views yöntemiyle Java programlama tarafında arayüzlerimizi oluşturmalıyız.

Şimdi örneğimizi oluşturmaya sıra geldi.İlk öncelikle uygulamamızı kodları çalıştırdığımızda elde edeceğimiz görüntü aşağıdaki gibidir

photo_2015-05-22_17-17-57

Ve kodlarımızı yazmaya başlayalım…

MainActivity.java kodlarım:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package com.tugbaustundag.listview_with_customview;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
 
public class MainActivity extends FragmentActivity {
 
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Item ları listeye ekleyen ItemListFragment sınıfına yönlendrme yaptık
ItemListFragment itemListFragment = new ItemListFragment();
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.realtabcontent, itemListFragment);
transaction.commit();
}
}

ItemListFragment.java kodlarım:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package com.tugbaustundag.listview_with_customview;
import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
public class ItemListFragment extends ListFragment {
 
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = super.onCreateView(inflater, container, savedInstanceState);
//Baslık ve acıklama iceriklerimizi listeye ekledik
ArrayList items = new ArrayList();
for (int i = 0; i < 5; i++) {
String title = String.format("Item %d", i);
String description = String.format("Description of Item %d", i);
//Item sınıfında dataları gonderiyorum
Item item = new Item(title, description);
items.add(item);
}
//ve ItemAdapter sınıfımızı Adapter a set yaptık..
setListAdapter(new ItemAdapter(getActivity(), items));
return v;
}
}

Item.java kodları:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.tugbaustundag.listview_with_customview;
/**
* Listenen her bir içeriği Item sınıfında tuttum.
*/
public class Item {
private String mTitle;
private String mDescription;
 
public Item(String title, String description) {
super();
mTitle = title;
mDescription = description;
}
public String getTitle() {
return mTitle;
}
public String getDescription() {
return mDescription;
}
}

ItemAdapter.java kodları:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.tugbaustundag.listview_with_customview;
import java.util.List;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
 
public class ItemAdapter extends ArrayAdapter {
public ItemAdapter(Context c, List items) {
super(c, 0, items);
}
 
@Override
public View getView(int position, View convertView, ViewGroup parent) {
//Her bir kayıdın(Item'ın) arayüz görünümlerini hazırlayan ItemView sınıfını cagırdık
ItemView itemView = (ItemView)convertView;
if (null == itemView)
itemView = ItemView.inflate(parent);
itemView.setItem(getItem(position));
return itemView;
}
}

ItemView.java kodları

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
package com.tugbaustundag.listview_with_customview;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
 
public class ItemView extends LinearLayout {
private TextView mTitleTextView;
private TextView mDescriptionTextView;
 
public static ItemView inflate(ViewGroup parent) {
ItemView itemView = (ItemView) LayoutInflater.from(parent.getContext())
.inflate(R.layout.item_view, parent, false);
return itemView;
}
 
public ItemView(Context c) {
this(c, null);
}
 
public ItemView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
 
public ItemView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
 
//Her item ın kullancagı xml layout yükledik.
LayoutInflater.from(context).inflate(R.layout.item_view_children, this, true);
setupChildren(context);
}
 
private void setupChildren(Context context) {
//Item larda bulunan Yuvarlak objeyi item_view_children xmlde CircleView sınfını yükleyerek olusturdun
 
//item_view_children xml inde bulunan LinearLayout icine Java programlamayla TextView'ler tanımladık
 
//LinearLayout'u tanımladık
LinearLayout layout = (LinearLayout) findViewById(R.id.linearMain);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
 
//LinearLayout' a margin değerleri atadık.
layoutParams.setMargins(30, 20, 30, 0);
layout.setLayoutParams(layoutParams);
 
//LinearLayout icine TextView view elementleri ekledim
mTitleTextView = new TextView(context);
mDescriptionTextView = new TextView(context);
layout.addView(mTitleTextView);
layout.addView(mDescriptionTextView);
}
 
public void setItem(Item item) {
//LinearLayout a ekledğim TextView elementlerine , Item sınıfında tuttugumuz icerikleri atadık...
mTitleTextView.setText(item.getTitle());
mDescriptionTextView.setText(item.getDescription());
}
}

CircleView.java kodları

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
package com.tugbaustundag.listview_with_customview;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
 
public class CircleView extends View {
 
float dim;
int shape;
Paint paint;
 
public CircleView(Context context, AttributeSet attrs) {
super(context, attrs);
// R.styleable.deger tanımlamasındaki, deger kelimesinin yerine gelecek kelime value/attrs.xml de tanımlanır
//
TypedArray a = context.getTheme().obtainStyledAttributes(
attrs,
R.styleable.CircleView,
0, 0
);
 
try {
/// value/attrs.xml' de attr tagleri arasında kullanılan özellikleri atadık
dim = a.getDimension(R.styleable.CircleView_dim, 20f);
shape = a.getInteger(R.styleable.CircleView_shape, 0);
} finally {
a.recycle();
}
 
//Yuvarlagın rengini belirledik
paint = new Paint();
paint.setColor(0xfffed325);
}
 
/**
* Verilen boyut, renk gibi özellklere göre yuvarlıgı çizen metod (drawCircle) kullanıldı
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(dim, dim, dim, paint);
 
}
 
}
Xml dosyalrımız…

/layout/activity_main.xml

PHP
1
<!--?xml version="1.0" encoding="utf-8"?-->

/layout/item_view.xml

PHP
1
<!--?xml version="1.0" encoding="utf-8"?-->

/layout/item_view_children.xml

PHP
1
<!--?xml version="1.0" encoding="utf-8"?-->

/values/attrs.xml

PHP
1
<!-- CircleView sınıfında bahsedilen, R.styleable.CircleView_dim asagıdaki name="dim" den karsılık gelmektedir -->

Son olarak ufak bir not: Bu yukarıda anlattığım projemin kodlarını indirmek isterseniz; yapmanız gereken tek şey github linkine tıklamak.

Hayatınızın daha da kolaylaşması dileğiyle…

1
1571
Share
Bülten
Bültene abone ol

Bültene abone olarak yeni makalelerimden haberdar olun.

1 Comment

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir