How To Implement UserInterface Components Via Codes


Merhaba, şimdiye kadar UI component’ leri XML tarafından yapmış olabilirsiniz.
Fakat kod tarafını hallettikten sonra XML tarafına geçmek her zaman için daha iyidir. Componentlere daha çok hakim olursunuz. Basit bir uygulama ile başlayalım 🙂

Tabi önce nasıl bir şey ortaya çıkacak ona bi bakalım.

Burada kullanacağımız componentler LinearLayout, TextView, EditText, RadioButton, RadioGroup, ScrollView, CheckBox, DatePicker.

 

Class’ın içinde onCreate() metodunun üstünde Global değişkenleri tanımlıyoruz.

CheckBox c1;
CheckBox c2;
CheckBox c3;
RadioButton rb1;
RadioButton rb2;

Android projesi oluşturduğumuzda default olarak gelen layoutu siliyoruz. çünkü onu kodlarla biz oluşturacağız.

Önce LinearLayout oluşturmakla başlıyoruz ki bütün componentler bunun içerisine yerleşecek. Anlaşılması için adını da linearLayoutBase olarak tanımlıyoruz.

LinearLayout linearLayoutBase = new LinearLayout(getApplicationContext());
linearLayoutBase.setOrientation(LinearLayout.VERTICAL);

Daha sonra da diğer LinearLayoutları oluşturalım. Resme iyi bakarsanız ikili duran componentleri bir tane layout un içine koymak daha iyi olacak. Hepsini tel bir LinearLayout un içine de koyabiliriz fakat anlaşılması açısından biraz zahmetli de görünse bunu ayrı ayrı yapmamız öğrenmemiz açısından faydamıza.

// FullName satırındaki TextView ve EditText için
LinearLayout linearLayout1 = new LinearLayout(getApplicationContext());
linearLayout1.setOrientation(LinearLayout.HORIZONTAL);
linearLayout1.setGravity(Gravity.CENTER_HORIZONTAL);

// Birthday satırındaki TextView ve DatePicker için
LinearLayout linearLayout2 = new LinearLayout(getApplicationContext());
linearLayout2.setOrientation(LinearLayout.HORIZONTAL);
linearLayout2.setGravity(Gravity.CENTER_HORIZONTAL);

// Gender satırındaki TextView ve RadioGroup ve RadioButton lar için
LinearLayout linearLayout3 = new LinearLayout(getApplicationContext());
linearLayout3.setOrientation(LinearLayout.HORIZONTAL);
linearLayout3.setGravity(Gravity.CENTER_HORIZONTAL);

// Options satırındaki TextView ve CheckBox lar için
LinearLayout linearLayout4 = new LinearLayout(getApplicationContext());
linearLayout4.setOrientation(LinearLayout.HORIZONTAL);
linearLayout4.setGravity(Gravity.CENTER_HORIZONTAL);

En yukardaki User Profile adındaki TextView için ve en alttaki Create CV button u için bir layout düşünmedim, onları da ayrı bir layout un içine koyabiliriz tabi ki.

Şimdi sırasıyla componentlerimizi oluşturalım. En yukarıdaki User Profile adındaki TextView için:

TextView userProfile = new TextView(getApplicationContext());
userProfile.setText("User Profile");
userProfile.setTextColor(Color.YELLOW);
userProfile.setTextSize(20);
userProfile.setGravity(Gravity.CENTER_HORIZONTAL);

// userProfile' ı oluşturduk, şimdi base layouta ekleyelim
linearLayoutBase.addView(userProfile);

FullName satırı için:

TextView fullName = new TextView(getApplicationContext());
fullName.setText("Full Name");
fullName.setGravity(Gravity.CENTER_VERTICAL);

EditText editTextFullName = new EditText(getApplicationContext());
editTextFullName.setText("");
editTextFullName.setWidth(200);
editTextFullName.setGravity(Gravity.CENTER_VERTICAL);

// FullName satırı' nı oluşturduk, şimdi linearLayout1' in içine ekleyelim
linearLayout1.addView(fullName, 50, LayoutParams.MATCH_PARENT); // eklerken de layout parametrelerini verebiliriz.
linearLayout1.addView(editTextFullName);

Birthday satırı için:

TextView bDay = new TextView(getApplicationContext());
bDay.setText("Birthday : ");
bDay.setGravity(Gravity.CENTER_VERTICAL);

DatePicker date = new DatePicker(getApplicationContext());

// Birthday satırı' nı oluşturduk, şimdi linearLayout2' nin içine ekleyelim
linearLayout2.addView(bDay, 50, LayoutParams.MATCH_PARENT);
linearLayout2.addView(date);

Gender satırı için:

TextView gender = new TextView(getApplicationContext());
gender.setText("Gender : ");
gender.setGravity(Gravity.CENTER_VERTICAL);

RadioGroup rg = new RadioGroup(getApplicationContext());
rg.setOrientation(RadioGroup.HORIZONTAL);
rb1 = new RadioButton(getApplicationContext());
rb2 = new RadioButton(getApplicationContext());
rb1.setText("Male     ");
rb2.setText("Female     ");

// rb1 ve rb2 en yukarıda global değiiken olarak tanımlandı.
rg.addView(rb1); // RadioGroup' un içine ekliyoruz.
rg.addView(rb2); // RadioGroup' un içine ekliyoruz.

// Gender satırı' nı oluşturduk, şimdi linearLayout3' ün içine ekleyelim
linearLayout3.addView(gender, 50, LayoutParams.MATCH_PARENT);
linearLayout3.addView(rg); // RadioGroup' u ekliyoruz.

Options satırı için:

TextView options = new TextView(getApplicationContext());
options.setText("Options : ");
options.setGravity(Gravity.CENTER_VERTICAL);

// CheckBox ları koymak için layout oluşturduk.
LinearLayout linearLayout4_CheckBoxes = new LinearLayout(getApplicationContext());
linearLayout4_CheckBoxes.setOrientation(LinearLayout.VERTICAL);
linearLayout4_CheckBoxes.setGravity(Gravity.CENTER_VERTICAL);

// c1, c2, c3 en yukarıda global olarak tanımlandı.
c1 = new CheckBox(this);
c1.setText("Has a Car");

c2 = new CheckBox(this);
c2.setText("Has a House");

c3 = new CheckBox(this);
c3.setText("Has a Job");

linearLayout4_CheckBoxes.addView(c1);
linearLayout4_CheckBoxes.addView(c2);
linearLayout4_CheckBoxes.addView(c3);

// Options satırı' nı oluşturduk, şimdi linearLayout4' ün içine ekleyelim
linearLayout4.addView(options, 50, LayoutParams.MATCH_PARENT);
linearLayout4.addView(linearLayout4_CheckBoxes);

Button u oluşturuyoruz:

Button cvButton = new Button(this);
cvButton.setText("Create CV");

// Button için LayoutParameter oluşturuyoruz.
LayoutParams lp = new LayoutParams(LayoutParams.FILL_PARENT, 50); // sırasıyla genişliği ve yüksekliği

// Parameter i cvButton a ekliyoruz.
cvButton.setLayoutParams(lp);

En sonda da girilen bilgileri göstermek için bir TextView oluşturuyoruz

TextView result = new TextView(this);
result.setGravity(Gravity.LEFT);
result.setPadding(20, 20, 20, 20);
result.setText("");

Peki şimdiye kadar tamam, her componenti oluşturduk, şu anda programı çalıştırdığımızda boş bir ekran gelecek çünkü ilk başta oluşturduğumuz linearLayoutBase değişkenine (en üstteki layout) her hangi bir component eklemedik. O zaman şimdi ekleyelim.

linearLayoutBase.addView(userProfile);
linearLayoutBase.addView(linearLayout1);
linearLayoutBase.addView(linearLayout2);
linearLayoutBase.addView(linearLayout3);
linearLayoutBase.addView(linearLayout4);
linearLayoutBase.addView(cvButton);
linearLayoutBase.addView(result);

// Eğer componentler ekrana fazla gelirse yani sığmazsa
ScrollView scroller = new ScrollView(this);
scroller.addView(linearLayoutBase);

setContentView(scroller); // Uygulamanın layoutu artık scroller değişkeni oldu, yani en üstteki component.

Şu anda her şey tamam. Fakat cvButton a basıldığında da girilen verileri ekrana yazsın istiyorsak cvButton a onClickListener eklememiz gerekecek. Bunun birkaç yöntemi var biz bir tanesini kullanacağız.

cvButton.setOnClickListener(new View.OnClickListener() {
	public void onClick(View v) {
		String name = editTextFullName.getText().toString();
		String cValue = null;
		String gender = null;

		if(c1.isChecked())
			cValue = c1.getText().toString();
		else if(c2.isChecked())
			cValue = c2.getText().toString();
		else if(c3.isChecked())
			cValue = c3.getText().toString();

		if(c1.isChecked() && c2.isChecked())
			cValue = c1.getText().toString() + " and " +c2.getText().toString();
		else if(c1.isChecked() && c3.isChecked())
			cValue = c1.getText().toString() + " and " +c3.getText().toString();
		else if(c2.isChecked() && c3.isChecked())
			cValue = c2.getText().toString() + " and " +c3.getText().toString();

		if(c1.isChecked() && c2.isChecked() && c3.isChecked())
			cValue = c1.getText().toString() + " and " +c2.getText().toString() +" and "+c3.getText().toString();

		if(rb1.isChecked())
			gender = "He ";
		if(rb2.isChecked())
			gender = "She ";

		result.setText(name+" was born in "+date.getYear()+" on the "+date.getDayOfMonth()+"th of the "+date.getMonth()+"th month. "+gender.toString()+" "+cValue.toString());
	}
});

Uygulamanın Tüm Kodları:

package com.arifsami.createcv;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.text.InputType;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.LayoutParams;
import android.widget.ScrollView;
import android.widget.TextView;

public class CreateCVActivity extends Activity {

	CheckBox c1;
	CheckBox c2;
	CheckBox c3;
	RadioButton rb1;
	RadioButton rb2;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main);

        LinearLayout linearLayoutBase = new LinearLayout(getApplicationContext());
        linearLayoutBase.setOrientation(LinearLayout.VERTICAL);

        TextView userProfile = new TextView(getApplicationContext());
        userProfile.setText("User Profile");
        userProfile.setTextColor(Color.YELLOW);
        userProfile.setTextSize(20);
        userProfile.setGravity(Gravity.CENTER_HORIZONTAL);

        linearLayoutBase.addView(userProfile);

        LinearLayout linearLayout1 = new LinearLayout(getApplicationContext());
        linearLayout1.setOrientation(LinearLayout.HORIZONTAL);
        linearLayout1.setGravity(Gravity.CENTER_HORIZONTAL);
	        TextView fullName = new TextView(getApplicationContext());
        	fullName.setText("Full Name");
        	fullName.setGravity(Gravity.CENTER_VERTICAL);

        	final EditText editTextFullName = new EditText(getApplicationContext());
        	editTextFullName.setText("");
        	editTextFullName.setWidth(200);
        	editTextFullName.setGravity(Gravity.CENTER_VERTICAL);
        linearLayout1.addView(fullName, 50, LayoutParams.MATCH_PARENT);
        linearLayout1.addView(editTextFullName);

        LinearLayout linearLayout2 = new LinearLayout(getApplicationContext());
        linearLayout2.setOrientation(LinearLayout.HORIZONTAL);
        linearLayout2.setGravity(Gravity.CENTER_HORIZONTAL);
        	TextView bDay = new TextView(getApplicationContext());
        	bDay.setText("Birthday : ");
        	bDay.setGravity(Gravity.CENTER_VERTICAL);

        	final DatePicker date = new DatePicker(getApplicationContext());
        linearLayout2.addView(bDay, 50, LayoutParams.MATCH_PARENT);
        linearLayout2.addView(date);

        LinearLayout linearLayout3 = new LinearLayout(getApplicationContext());
        linearLayout3.setOrientation(LinearLayout.HORIZONTAL);
        //linearLayout3.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL);
        	TextView gender = new TextView(getApplicationContext());
       		gender.setText("Gender : ");
       		gender.setGravity(Gravity.CENTER_VERTICAL);

       		RadioGroup rg = new RadioGroup(getApplicationContext());
       		rg.setOrientation(RadioGroup.HORIZONTAL);
       			rb1 = new RadioButton(getApplicationContext());
       			rb2 = new RadioButton(getApplicationContext());
       			rb1.setText("Male     ");
       			rb2.setText("Female     ");
       		rg.addView(rb1); rg.addView(rb2);
       linearLayout3.addView(gender, 50, LayoutParams.MATCH_PARENT);
       linearLayout3.addView(rg);

       LinearLayout linearLayout4 = new LinearLayout(getApplicationContext());
       linearLayout4.setOrientation(LinearLayout.HORIZONTAL);
       linearLayout4.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL);
       		TextView options = new TextView(getApplicationContext());
        	options.setText("Options : ");
        	options.setGravity(Gravity.CENTER_VERTICAL);

        	LinearLayout linearLayout4_CheckBoxes = new LinearLayout(getApplicationContext());
                linearLayout4_CheckBoxes.setOrientation(LinearLayout.VERTICAL);
                linearLayout4_CheckBoxes.setGravity(Gravity.CENTER_VERTICAL);
	        	c1 = new CheckBox(this);
	        	c1.setText("Has a Car");
	        	c2 = new CheckBox(this);
	        	c2.setText("Has a House");
	        	c3 = new CheckBox(this);
	        	c3.setText("Has a Job");
	        	linearLayout4_CheckBoxes.addView(c1);
	            linearLayout4_CheckBoxes.addView(c2);
	            linearLayout4_CheckBoxes.addView(c3);

        linearLayout4.addView(options, 50, LayoutParams.MATCH_PARENT);
        linearLayout4.addView(linearLayout4_CheckBoxes);

        LayoutParams lp = new LayoutParams(LayoutParams.FILL_PARENT, 50);
        Button cvButton = new Button(this);
        cvButton.setText("Create CV");
        cvButton.setLayoutParams(lp);

        final TextView result = new TextView(this);
        result.setGravity(Gravity.LEFT);
        result.setPadding(20, 20, 20, 20);
        result.setText("");

        cvButton.setOnClickListener(new View.OnClickListener() {
			public void onClick(View v) {
				String name = editTextFullName.getText().toString();
				String cValue = null;
				String gender = null;

				if(c1.isChecked())
					cValue = c1.getText().toString();
				else if(c2.isChecked())
					cValue = c2.getText().toString();
				else if(c3.isChecked())
					cValue = c3.getText().toString();

				if(c1.isChecked() && c2.isChecked())
					cValue = c1.getText().toString() + " and " +c2.getText().toString();
				else if(c1.isChecked() && c3.isChecked())
					cValue = c1.getText().toString() + " and " +c3.getText().toString();
				else if(c2.isChecked() && c3.isChecked())
					cValue = c2.getText().toString() + " and " +c3.getText().toString();

				if(c1.isChecked() && c2.isChecked() && c3.isChecked())
					cValue = c1.getText().toString() + " and " +c2.getText().toString() +" and "+c3.getText().toString();

				if(rb1.isChecked())
					gender = "He ";
				if(rb2.isChecked())
					gender = "She ";

				result.setText(name+" was born in "+date.getYear()+" on the "+date.getDayOfMonth()+"th of the "+date.getMonth()+"th month. "+gender.toString()+" "+cValue.toString());
			}
		});

        linearLayoutBase.addView(linearLayout1);
        linearLayoutBase.addView(linearLayout2);
        linearLayoutBase.addView(linearLayout3);
        linearLayoutBase.addView(linearLayout4);
        linearLayoutBase.addView(cvButton);
        linearLayoutBase.addView(result);

        ScrollView scroller = new ScrollView(this);
        scroller.addView(linearLayoutBase);

        setContentView(scroller);
    }
}
Reklamlar

22 Eyl 2012 tarihinde Android içinde yayınlandı ve , , olarak etiketlendi. Kalıcı bağlantıyı yer imlerinize ekleyin. 1 Yorum.

Bir Yanıt Bırakın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: