Kako napraviti Android aplikaciju: Tutorijal 1.5 – Naprednija podešavanja layout-a i dugmića

U ovom tutorijalu ćemo malo više poraditi na XML podešavanju layout-a tutorial1.xml, dodaćemo neke nove elemente i dodeliti im funkcije. Zapravo ono što hoćemo da napravimo je aplikacija koja menja stil i poziciju našeg teksta, od podebljanog do zakrivljeno, na levoj ili desnoj strani, ili pak na sredini.
Za početak treba otvoriti layout tutorial1.xml (res> layout> tutorial1.xml) i iz Graphic Layout-a jednostavnim prevlačenjem, dodati elemente. Iz stavke Text Fields uzmite Plain Text, koji zapravo predstavlja Edit Text, zatim iz Form Widgets uzmite dva puta Text View, onda Radio Button iz iste stavke, još jedan Text View i na kraju Dugme (Button). Nakon toga se vratite u tutorial1.xml da bi ste sredili kod.
Prvo treba srediti EditText i Button, tako da budu do kraja razvučeni po širini, a to ćete dobiti tako što će u oba slučaja android:layout_width biti “fill_parent“.

android:layout_width="fill_parent"

Istu stvar možete uraditi i za poslednji Text View, a zatim centrirati tekst uz pomoć koda:

andoid:gravity="center"

Takođe, povremeno možete proveriti ono što ste uradili tako što ćete otići u Graphical Layout, ali ne zaboravite da prethodno sačuvate unete izmene.
Sledeće što treba uraditi je izdvajanje oba gornja Text View-a, a to ćete uraditi tako što ćete kopirati kompletan kod za layout i preneti ga iznad Text View, a zatim zatvoriti.

LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

I ne zaboravite da u ovom kodu promenite height u wrap_content jer se u suprotnom neće videti elementi koji se nalaze ispod. U slučaju da se pojavi greška koja se odnosi na xmlns, obrište čitav red i to će rešiti problem.
Zatim treba promenite width za oba Text View-a u fill_parent, pa onda u kopiranom layout-u dodadati kod:

android:weightSum="100"

Nakon ovog treba pozicionarenje treba srediti i kod Text View-a:

android:layout_weight="50"

Vrednosti 100 I 50 odnose se na procente što znači da svakom Text View-u dodeljujemo po pola prostora, tako da bi vrednosti mogle biti izražene I kao 2 I 1.
Sada ovo treba centrirati, dakle dodajte sledeći kod u oba Text Viewa:

android:gravity="center"

Nakon toga kopirajte Radio Button pet puta, a potom ponovo kopirajte Layout kod I svih šest Radio Button-a stavite u Layout. Zatim treba odvojiti Radio Button-e u dve grupe, po tri dugnića, a to će te uraditi koristeći kod:

RadioGroup android:orientation="vertical"
    		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
           	android:layout_weight="50" >

Takođe, oba RadioGroupa treba da imaju svoj id, pa će za prvi, id biti:

android:id="@+id/rgStyle"

A za drugi:

android:id="@+id/rgGravity"
Ovaj kod kopitajte I prenesite ga ispr prva tri Radio Button-a, a zatim zatvortite RadioGroup i isto uradite i sa sledeća tri. Kada to uradite, vaš Graphical Layout treba da izgleda ovako:

graphicallayout
Dalje treba promeniti prvi TextView, nazovite ga Style, drugi nazovite Gravity, takođe treba promeniti i id, a to izgleda ovako:
stylegravity
Zatim promenite imena i id svakog dugmića u prvoj i drugoj grupi, kao što je prikazano na slici ispod:
NIB
LCR
Nakon toga izmenite tekst poskednjeg TextView-a u Type in text and press the button below, a njegov id izmenite u tvChange. Isto treba uraditi i sa dugmetom, kao što je pikazano na slici:
dugmeitext
Sada sve ovo što smo do sada uradili treba povezati u javi, jer ovako iako se nalazi na layout-u, nema apsolutno nikakvu funkciju. Dakle potrebno je da otvorite TutorialOne.java i unesete kod:

package com.androidmarket.prvaaplikacija;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TextView;

public class TutorialOne extends Activity implements OnCheckedChangeListener{

	TextView textOut;
	EditText textIn;
	RadioGroup gravityG, styleG;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tutorial1);
		textOut = (TextView) findViewById(R.id.tvChange);
		textIn = (EditText) findViewById(R.id.editText1);
		gravityG = (RadioGroup) findViewById(R.id.rgGravity);
		gravityG.setOnCheckedChangeListener(this);
		styleG = (RadioGroup) findViewById(R.id.rgStyle);
		styleG.setOnCheckedChangeListener(this);
		Button gen = (Button) findViewById(R.id.bGenerate);

		gen.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				textOut.setText(textIn.getText());
			}
		});
	}

	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		// TODO Auto-generated method stub
		switch (checkedId){
		case R.id.rbLeft:
			textOut.setGravity(Gravity.LEFT);
			break;
		case R.id.rbCenter:
			textOut.setGravity(Gravity.CENTER);
			break;	
		case R.id.rbRight:
			textOut.setGravity(Gravity.RIGHT);
			break;	
		case R.id.rbNormal:
			textOut.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL), Typeface.NORMAL);
			break;	
		case R.id.rbItalic:
			textOut.setTypeface(Typeface.defaultFromStyle(Typeface.ITALIC), Typeface.ITALIC);
			break;
		case R.id.rbBold:
			textOut.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD), Typeface.BOLD);
			break;	
		}

	}

}

Ne ćemo previše ulaziti u priču i objašnjavanje java koda, jer bi to mogao biti potpuno novi tutorijal i preopširna tema. Ako i sami malo proučite kod, biće vam dosta jasnije.

To bi bilo sve što se tiče ovog tutorijala, a u sledećem ćemo se baviti meni dugmićima. I za kraj još jedan screenshot aplikacije:

androidmarket

Related Post