Tag Archives: Android

Vakondok gyilok feladatleírás az AppInventor 2-ben

A játékban egy vakondok véletlenszerűen bukkan fel különböző helyeken. A játékosnak el kell találnia mielőtt eltűnik. Ez a feladatleírás azt mutatja meg, hogyan tudod a játékot felépíteni.

Fogjunk hozzá!

Indítsd el a telefon emulátor szoftverét (aistarter) és az AppInventort és nyiss egy új projektet VakondokGyilok néven.

Mentsd le a gépedre a vakond képét! http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/moleMash/mole.png

A feladat

A játékban a vakondoknak minden fél másodpercben át kell ugrania egy másik lyukba. Ha sikerült rákattintani (touched), akkor kapsz egy pontot és a telefon vibrál egyet. Ha megnyomod az újraindítás gombot a számláló nullázódik.

Az első objektum példányok:

  • Helyez el egy elrendezést (Layout/VerticalArrangement) a Desing felületen.
    • Align horizontal: Center; Height: Fill parent; Width: Fill parent
  • Helyezz el egy vásznat (Drawing an Animation/Canvas), ezen fog mozogni a vakondok.
    • Height: 300 pixel; Width: 300 pixel, BackgroundColor: Green
  • Helyezz el Cimkét (User Interface/Label), amelyik a pontszámaidat jelzi.
    • FontSize: 18: ; Text: Score: –; TextColor: Red
  • Helyezz el Gombot (User Interface/Button), amelyikkel a pontokat tudod nullázni.
    • BackgroundColor: Blue; FontSize: 18; Text: Reset; TextColor: White
  • Helyezz el Hang objektumot (Media/Sound), amelyik majd zajong.
  • Helyezz el egy óra objektumot (Sensor/Clock)

Időmérés az óra objektummal:

Ahhoz, hogy időnként a vakondok elugorjon, szükséged van egy óra objektumra (The aid of Clock). Az órát különböző feladatokra tudod használni, például időmérés vagy a dátum lekérdezése.

Ezért az óra TimerInterval tulajdonságát állítsd 500-ra (500 milliszekundum) és nevezd el VakondOra névre.

Figyelj oda, hogy a TimerEnabled kapcsoló bekapcsolt állapotban legyen (Checked)!

A vakondok Image Sprite (Kép szellem, megtestesülés) létrehozása:

  • Helyezz el a vásznon egy Canvas and Animation/ImageSprite objektumpéldányt.
  • A Components panel alatt találsz egy Media panelt benne egy Upload gombbal kattints rá és tallózd be a lementett vakondok képet.
  • Az ImageSprite példány Picture tulajdonságára kattintva választd ki a feltöltött képet.

A vakond mozgásához a vásznon be kell állítani néhány tulajdonságot, mint a sebesség (Speed), amely az önálló mozgási sebességét határozza meg, Interval – azt határozza meg, hogy milyen időközönként mozogjon a megadott sebességgel (ennek sincs most jelentősége) és Heading (ami egyelőre nem tudom mire való, de ha sebesség null, akkor mindegy mi az értéke). A sebesség és heading nulla lesz, mert te fogod megmondani, hogy mikor és hol jelenjen meg a vakondok.

Tehát összefoglalva a beállítandó tulajdonságai az ImageSprite példánynak:

  • Picture: mole.png
  • Enabled: engedélyezve
  • Interval: 500
  • Heading: 0
  • Speed: 0.0
  • Visible: checked
  • Width: Automatic
  • Height: Automatic

Ha most megnézed a telefonodon (ha beállítottad) vagy az emulátoron akkor ezt látod.

Példányok viselkedése és eseménykezelés

Most egy új eddig még nem használt gondolat következik. Saját eljárást (Procedures) fogsz készíteni. Az eljárás egy olyan utasítás gyűjtemény, amely meghívásakor egy sor, előre meghatározott parancs fog lefutni.

Az eljárások (Procedures) sok félék lehetnek. Lehet bemenő paraméterük és visszaadott értékük is. A mostani példában ezek közül egyikre sem lesz szükség.

Határozzunk meg (Define) a két eljárást

Először át kell kapcsolnod a Blocks ablakra. Majd Built-in csoportban választd a Procedures objektumok közül az elsőt. (Ez alapértelemezetten paraméter és visszatérés nélküli eljárás blokkja.

MoveVakondok – Ez fogja egy új véletlenszerűen kiválasztott helyre vinni a vakondokot.

UpdateScore – Ez fogja kiírni az aktuális pontszámot a címkében.

Kezdjük a MoveVakondok eljárás elkészítését:

Be kell állítani egy véletlenül kiválasztott helyre, amely még a vásznon van. Ehhez az X és Y koordinátáit kell előállítani. Nézd meg és hozd létre a következő eljárást a MoveVakondok blokkban:

Lépések:

  1. Az ImageSprite1 blokkjai közül kiválasztod a set ImageSprite1 X és elhelyezed a MoveVakondok blokkban.
  2. A Math csoportból kiválasztod a szorzás blokkot és hozzáilleszted a set blokkhoz.
  3. Az első paraméter helyére helyezd el a Math csoport random fraction blokkját.
  4. A második paraméter helyére a Math csoportból helyezz el kivonás blokkot.
  5. A kivonás blokk első paramétere a Canvas1 blokkjai közül a Canvas1 Width, a második paraméter az ImageSprite1 blokkjai közül az ImageSprite1 Width legyen.

Ez a vakond képének X pozícióját határozta meg. A Canvas1 Width a vászon szélessége és azért, hogy a vakondok a szélén nehogy lelógjon a képről ezért a vászon szélességénél egy vakondok kép szélességgel kisebb számot generál. A random fraction blokk (ez is egy eljárás) 0 és 1 között egy tört számot állít elő.

Ismételd meg az előző műveleteket az Y koordináta előállítása érdekében a Canvas1 Height és ImageSprite1 Height objektumpéldányokkal is.

A UpdateScore eljárás készítése:

Miután készen vagy a MoveVakondok eljárással ideje foglalkozni a pontok módosítását végző UpdateScore eljárás megírásával. Először egy score változóra van szükség, amelyik az applikáció indításakor 0 kezdőértékkel kell deklarálni. Amikor az eljárást meghívod majd a programból, ezt a score változó értéket fogja az eljárás növelni és beállítani a Label1 Text tulajdonságát az aktuális pontszámra.

Először készíts egy score nevű globális változót! A Variables csoportban találod a name helyére írd a score nevet.

Ne felejtsd el lenullázni. 🙂 (Math csoport)

Majd készítsd el az UpdateScore eljárást. Így néz ki:

Lépések:

  1. Illeszd be a Label1 blokkjai közül a képen láthatót.
  2. Csatold hozzá a Text csoport join blokkját.
  3. A Text csoport üres String blokkját csatold hozzá a join blokkhoz és írd bele Score:
  4. A Variables csoporból a join blokkhoz csatold hozzá a képen látható blokkot és választd ki a global score változót.

Készítsd el az időzítőt

A következő lépés a vakondok ide-oda mozgatása. Erre a feladatra a VakondOra időzítőjét fogod használni. Amikor letelik az intervallumban a beállított idő, akkor bekövetkezik egy intervallum vége esemény és ekkor új pozícióra kell tenni a vakondok sprite-ját.

Így néz ki az eseménykezelés:

Lépések:

  1. Választd ki a VakondokOra eseménykezelő blokkjai közül a when MoveVakondok.Timer
  2. A Procdure csoportból pedig a call MoveVakondok eljárást.

Az applikáció indítása után a Timer minden 500 ms-ban meghívja a MoveVakondok eljárást, amely mint emlékszel új véletlen X és Y értéket állít elő, ezzel új pozícióba helyezed a vakondokot.

A kattintás érzékelése

Amikor a vakondokra kattintasz, akkor növelni kell a score értékét eggyel.

Ehhez tehát kell egy eseménykezelő, amely figyeli a kattintás (touch) eseményt.

Ez így néz ki:

Lépések:

  1. Válaszd ki az ImageSprite1 eseménykezelő blokkjai közül a when ImageSprie1.Touched blokkot.
  2. A Variables csoportból a set blokkot és választd ki a global score változót, hiszen ezt szeretnéd növelni.
  3. Választd a Math csoportból az összeadás blokkot.
  4. Az első paraméter a Variables csoportból a get (global score), mert az aktuális score értéket kell növelni.
  5. A második paraméter a +1 a Math csoportból.

Már csak a megszerzett pontokat kell kiírni a kijelzőre. Erre már megalkottad a megfelelő eljárást, ez az UpdateScore. Már csak meg kell hívni.

Azonban, ha jól meggondolod, akkor a kattintás után a szegény vakondokot is el kell mozdítani.

Most itt tartunk:

Esetleg, mivel a Sound objektumot is példányosítottuk (Sound1), ezért ha annak a Vibrate viselkedését (Behavior) is meghívod 100 ms-ig, akkor a telefonod vibrálni is fog (Az emulátor nem :))

Ezzel készen is vagy a nagyon egyszerű, de indulásnak nagyon jó applikáció elkészítésével. Bár azt hiszem elfelejtetted a Reset gombot, amellyel le kellene nullázni a pontokat.

A pontok nullázása

A Button1 objektumpéldány Click eseménykezelőjét kell beilleszteni a programodba. A score változót állítsd be nullára és ne feled meghívni az UpdateScore eljárást, hogy a felhasználó értesüljön az új pontszámról.

A teljes alkalmazás:

Változatok

  1. változat:

Az idő elteltével gyorsuljon a vakond mozgása. Vagyis vezess be egy új változót és például 20 ugrás után csökkentsd az ugrások között eltelt időt.

  1. változat:

Számold a hibás kattintásokat is és add meg a százalékos teljesítményét is a felhasználónak.

  1. változat (Extrém programozóknak):

Mi lenne, ha rajzolnál lyukakat jelképező ellipsziseket 6-8 db-t. A vakondok csak ezeken a helyeken bukkanhatna fel.

  1. változat (Extrém programozóknak):

Bármilyen egyéb ötlet, amivel a program érdekesebb lehet.

Az eredeti tutorial:

http://appinventor.mit.edu/explore/ai2/tutorials.html – 2016-12-13.

Extra egy másik activity indításához

Egy másik activity indítása IV. rész

Egy kis extra, érdekesség az elemek megjelenítéséhez. Az egyes UI-n megjelenített objektumokat animálni is lehet. Persze ez általában csak a programozót (fejlesztő) szórakoztatja és utána szinte az összeset letiltatják a megrendelők, de érdekességnek, hogyan hogyan lehet animáció erőforrást létrehozni megjárja.

Tween animáció erőforrás létrehozása.

  1. Hozd létre az animáció erőforrásának könyvtárát.
    1. Kattints jobb egérrel az /app/res mappára.
    2. Válaszd a New –> Android resource directory menüt
    3. Resource type: anim
    4. Directory name: anim
  2. Hozd létre az erőforrás állományt.
    1. Kattints jobb egérrel az /app/res/anim mappára.
    2. Válaszd a New –> Animation resource file menüt.
    3. A File name legyen myanim
  3. Adj hozzá a <set> (készlet) elemhez egy <alpha> elemet és módosítsd a tulajdonságait.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="5000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        />
</set>
  • A fromAlpha az átlátszóság kezdő értéke. Most teljesen átlátszó.
  • A toAlpha, hogy az animáció végén milyen legyen az átlátszósága, most 1, tehát teljesen átlátszatlan.
  • A duration tulajdonság az animáció lezajlási ideje, most 5 mp. (Ezt lehet, hogy nem segít beírni az Android Studio.)

Az animáció elindítása.

  1. Nyisd meg az /app/java/DisplayMessageActivity.java állományt.
  2. Az onCreate() eljárást egészítsd ki a következő utasításokkal:
Animation myAnim = AnimationUtils.loadAnimation(this, 
                                      R.anim.myanim);
tvName.startAnimation(myAnim);

Tehát betöltötted (loadAnimation) az erőforrást a myAnim objektumba, majd a tvName példányon lejátszottad (startAnimation()) .

Együtt az egész onCreate() eljárás:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_display_message);
    Intent intent = getIntent();
    String message = 
    intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
    TextView tvName = (TextView) 
                      findViewById(R.id.tvName);
    tvName.setText(message);
    Animation myAnim =  
                   AnimationUtils.loadAnimation(this,
                                       R.anim.myanim);
    tvName.startAnimation(myAnim);
}

Természetesen, ha lenne id-je (azonosítója) az Üdvözöllek feliratnak, akkor arra is elindíthatnánk az animációt. Sőt, ha az erőforrás több animációt tartalmaz, akkor keverheted is őket.

Egyéb animáció lehetőségek:

  • Scale: Átméretezés
  • Rotate: forgatás
  • Translate: mozgatás
  • Alpha: átlátszóság

Példa forgatásra:

<rotate
    android:fromDegrees="0.0"
    android:toDegrees="360.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="3000" />

Sőt, ha az animáció a <LinearLayout>-ra alkalmazod

  1. Rendelj id-t a layouthoz
    android:id="@+id/messageLayout"
  2. Hozz létre egy LinearLayout objektumot, amit összekapcsolsz az UI-n lévő layouttal az id-n keresztül a DisplayMessageActivity onCreate() eljárásában.
    LinearLayout linearLayout = (LinearLayout) 
                      findViewById(R.id.messageLayout);
  3. Indítsd az animációt a layout-on.
    linearLayout.startAnimation(myAnim);
  4.  Együtt az egész:

activity_display_message.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/messageLayout">

    <TextView
        android:id="@+id/tvUdv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text = "@string/tvUdv"
        android:textSize="30sp"
        android:layout_gravity="center_horizontal"/>
    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

DisplayMessageActivity.java – onCreate() eljárás

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_display_message);
    Intent intent = getIntent();
    String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
    TextView tvName = (TextView) 
                      findViewById(R.id.tvName);

    LinearLayout linearLayout = (LinearLayout) 
                     findViewById(R.id.messageLayout);

    tvName.setText(message);
    Animation myAnim =
    AnimationUtils.loadAnimation(this, R.anim.myanim);

    linearLayout.startAnimation(myAnim);
}

 

Egy másik activity indítása IV. rész

Egy másik activity indítása III. rész

Készítsük el a második Activity-t!

  1. Az /app/java/hu.batsanyigimnazium.corvus.myanotherview-ra jobb egérgombbal kattints és válaszd a new –> Activity –> Empty Activity.
    1. Activity name legyen DisplayMessageActivity
    2. A Generate layout file legyen bejelölve.
    3. Layout name legyen activity_display_message
    4. A package name maradjon változatlan
  2. Kattints a Finish gombra.

Most létrejött az az activity amelyet a Send gombra kattintáskor elindítunk. Ha most kipróbálod (lefordítod, futtatod), akkor már működik az alkalmazás, de csak fehér képernyő látható.

Készítsük el az UI-t!

  1. Nyisd meg az /app/re/layout/activity_display_message.xml állományt.
  2. A <RealtiveLayout> használj <LinearLayout>-t.
    1. Töröld a padding és content tulajdonságokat.
    2. Adj hozzá android:orientation=”vertical” tulajdonságot.
  3. Hozz létre egy <TextView> elemet a tuladonságai legyenek rendre:
    1. android:layout_width = “wrap_content”
    2. android:layout_heigth = “wrap_content”
    3. android:text=”Üdvözöllek” és ezt tedd ki string erőforrásba. Lásd: II. rész – Hozz létre egy String erőforrást a neve “tvUdv”
    4. android:textSize = “30sp”
    5. android:layout_gravity = “center_horizontal”
  4. Hozz létre még egy <TextView> a tulajdonságai legyenek:
    1. android:id = “@+id/tvName”
    2. android:layout_width = “wrap_content”
    3. android:layout_heigth = “wrap_content”
    4. android:textSize = “30sp”
    5. android:layout_gravity = “center_horizontal”

Most így néz ki az /app/res/layout/activity_display_message.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=
"http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text = "@string/tvUdv"
        android:textSize="30sp"
        android:layout_gravity="center_horizontal"/>
    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

Vegyük át az adatokat az intent-től

  1. Nyisd meg az /app/java/…/DisplayMessageActivity.java állományt.
  2. Az onCreate() eljárásban kérdezzük meg, ki aktivált (milyen szándék hozott létre) getIntent().
  3. Majd az intent-től kérdezzük meg, mi az extra üzenetünk.
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_display_message);
    Intent intent = getIntent();
    String message =  
    intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
}

“Megjegyzés: Ha az Intent osztály hibát jelez, nyomj [Alt]+[Enter].”

Adjuk oda az üzenetet a TextView-nak!

Már csak oda kell adunk a kapott üzenetet a “tvName” TextView elemnek, hogy meg tudja jeleníteni.

  1. Hozz létre az onCreate() eljárásban egy új TextView osztály tvName nevű példányát, amelyet összekötsz (rámutat) az UI <TextView> “tvName” azonosítójú elemével.
  2. Majd beállítod a text tulajdonságának értékét a message tartalmára.

Most így néz ki a DisplayMessageActivity onCreate() eljárása:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_display_message);
    Intent intent = getIntent();
    String message = 
    intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
    TextView tvName = (TextView) 
                      findViewById(R.id.tvName);
    tvName.setText(message);
}

Ezzel az eredeti kitűzött célunkat elértük. Kész vagyunk.

<<< III. rész  Egy kis extra >>>

Egy másik activity indítása III. rész

Egy másik activity indítása II. rész

Miután elkészítetted az induló activity-t a képpel, beviteli mezővel és a gombbal, már csak rá kell venned a Send gombot, hogy valóban elküldje a beírt neved egy másik activity-nek.

A gomb viselkedésének megváltoztatása

  1. Nyisd meg /app/res/layout/activity_main.xml állományt.
  2. Egészítsd ki a <Button> elemet a következő tulajdonsággal:
android:onClick="SendName"

Ez a tulajdonság érzékennyé teszi (respond) a gombot és a mégy nem létező SendName eljárás végrehajtását eredményezi, ha rákattintasz.

  1. Tedd a kurzort a “SendName” értékbe.
  2. Nyomd meg az [Alt]+[Enter]-t vagy a sor elején megjelenő villanykörtére kattints és válaszd a  Create a ‘SendName(View view)’ in MainActivity menüpontot.
  3. Nyisd meg /app/java/…/MainActivity.java állományt. Ezt látod:
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void SendName(View view) 
    {
    }
}

Tehát létrejött egy publikus (Public), mindenki számára látható eljárás (void), amelynek neve SendName és azt a View-t fogja megkapni (ebben az esetben a btnName gomb a View), amely meghívta. Ebből következik, hogy ugyanazt az eljárást több View is meghívhatja.

Mi történjen, ha megnyomtad a gombot?

Induljon el egy másik activity és jelenjen meg az üdvözlés.

  1. Add hozzá a következő sort a ‘SendName’ eljáráshoz:
public void SendName(View view) {
    Intent intent = new Intent(this, 
                    DisplayMessageActivity.class);
}

“Megjegyzés: A vessző utáni sortörés nem kötelező!!”

Ehhez egy Intent objektumra van szükség, amely arra való, hogy az android központi objektumait (activity – tevékenység, broadcastreceiver – üzenetszórás, service – szolgáltatás) aktiváljuk, elindítsuk. Nekünk “csak” egy activity-t kell elindítanunk és ezáltal futás idejű kötés jön létre a környezeten belül az indító activity és induló activity között. A Intent egy passzív adatstruktúra, amely a végrehajtandó akciót és egy URI-t tartalmaz. Egyszerűbben szólva egy aktiváló üzenet.

A mi esetünkben tehát az intent (szándék) tartalmazni fogja a küldő objektumot (this) és a még nem létező DisplayMessageActivity objektumot (ezt később készítjük el) akarjuk aktiválni.

  1. Az üzenet vagyis az EditText-be (beviteli mező) írt nevet is át kell adnunk az újonnan elindított activity-nek. Ehhez létre kell hoznod az EditText megfelelőjét a MainActivity.java programban.
public void SendName(View view) {
    Intent intent = new Intent(this,
                        DisplayMessageActivity.class);
    EditText etName = (EditText) 
                      findViewById(R.id.etName);
}

“Megjegyzés: A pontosvesszőig lehet egy sor az utasítás!”

Az etName egy EditText osztályba tartozó példánya.
A findViewById(R.id.etName) azt az erőforrás mutatót adja vissza, amelyik a Activity_main.xml-ben létrehozott etName elemet azonosítja. Ezt cast-olni (szerepet azonosítani) kell ezért van a findViewById előtt az (EditText).

  1. Kérdezzük le, mit írt a felhasználó a beviteli mezőbe.
public void SendName(View view) {
    Intent intent = new Intent(this, 
                        DisplayMessageActivity.class);
    EditText etName = (EditText) 
                      findViewById(R.id.etName);
    String name = etName.getText().toString();
}

A String osztály name példányát hoztuk létre és egyből definiáltuk is a tartalmát is. A getText() eljárás lekérdezi a tartalmat a toString() metódus (method – eljárás)  pedig szöveggé (string) alakítja.

  1. Adjuk hozzá az intent példányunkhoz egy extra értéket, vagyis az üzenetünket is ágyazzuk bele az intent-be.
public void SendName(View view) {
    Intent intent = new Intent(this, 
                        DisplayMessageActivity.class);
    EditText etName = (EditText) 
                      findViewById(R.id.etName);
    String name = etName.getText().toString();
    intent.putExtra(EXTRA_MESSAGE, name);
}

A putExtra() fogja beágyazni az intentbe az EXTRA_MESSAGE constanson keresztűl a name string tartalmát. Észrevetted, hogy EXTRA_MESSAGE konstansunk sincs.

  1. Hozzuk létre az EXTRA_MESSAGE constanst a MainActivity osztályunk elején.
    1. Tedd a kurzort az EXTRA_MESSAGE szövegbe.
    2. Nyomj [Alt]+[ENTER] billentyűkombinációt és válaszd a Create constant filed ‘EXTRA_MESSAGE’ menüpontot.
    3. Cseréld a private hozzáférést public-ra.
public class MainActivity extends AppCompatActivity {

   public static final String EXTRA_MESSAGE =   "hu.batsanyigimnazium.corvus.myanotherview.MESSAGE";

Amikor majd lekérdezzük az extra üzenetét az intent-nek, akkor így egy nyilvános (public) állandó (constant) tartalmát fogjuk lekérdezni. A konstans tartalmazza a saját csomagod kulcsát (Package name key) és MESSAGE szót.

Indtsuk el az activity-t!

  1. A ‘SendName’ eljárás egésztsd ki a startActivity(intent) utasítással. Ezzel aktiválod az előkészített intent segítségével az új activity-t.

Természetesen még nem működik, hiszen adósok vagyunk a  DisplayMessageActivity.class osztállyal.

<<<II. rész IV. rész>>>

Egy másik activity indítása II. rész

Egy másik activity indítása I. rész

A második részben elkészítjük a első activity user interface-t (innentől UI). Lesz View és ViewGroup, ImageView, EditText és Button.

A szerkesztőben az /app/res/layout/activity_main.xml-t egészítsd ki a következő view-kal. Hívhatnám objektumnak, elemnek is. Az objektum a legáltalánosabb megjelölése, mert az OOP (Object Orient Program) ezeknek az elemek egy-egy reprezentációi az elvégzendő feladatnak. Rendelkeznek tulajdonsággal, és viselkedéssel és általában származnak valamely másik objektumtól vagyis vannak örökölt tulajdonságaik és viselkedésük. Bocs.

Tegyünk az UI-ra egy képet.

  1. Töltsd le a bicikli tömörített állomány és csomagold ki olyan helyre, ahol megtalálod a képeket.
  2. Előkészítés:
    1. Az Android Studio /app/res mappájára kattints jobb egérgombbal. Válasz a New –> Android resource directory-t
    2. A Resource type legyen drawable.
    3. A Diectory name legyen drawable-ldpi.
    4. A Source set legyen main.
    5. A 1-4. pontot ismételd rendre: drawable-mdpi, drawable-hdpi és drawable-xhdpi directory nevekkel.
  3. A képek bemásolása a könyvtárakba.
    1. Keresd meg a kicsomagolt képeket
    2. Jelöld ki gomb_example_ldpi.png képet és másold (CTRL+C)
    3. Az Android Studio-ban kattints jobb egérgombbal a /app/res/drawable könyvtárra és válaszd a Paste menüpontot.
    4. A felugró ablakban jelöld a drawable-ldpi könyvtárat és OK.
    5. Ismételd a megfelelő állományokkal és könyvtárakkal a 2-4. pontot. (a gomb_example.png.nek a drawable-mdpi van a helye.

Erre a sok macerára azért volt szükség, hogy a különböző képpontszámú eszközökön mindig a legmegfelelőbb minőségű kép jelenjen meg. Ha minden képnek a meg van a megfelelő képpontszámú megfelelője, akkor az Android kiválasztja a megfelelőt és ezzel neked törődnöd nem kell.

  1. Jöhet az /app/res/layout/activity_main.xml módosítása
    1. Kezd el írni <Imag… és megjelenő menüből válaszd az ImageView-t. A válaszd az jelenti üss ENTERT!
    2. A layout_width és height tulajdonságot a listákból választva add meg wrap_content vagyis pontosan akkora legyen, mint amit tartalmaz.
    3. Kezd el írni andr… és válaszd android: a listából.
    4. Kezd el írni src és válaszd a listából.
    5. Nyomj CTRL+Space és válaszd a listából @drawable/
    6. Nyomj CTRL+Space és válaszd gomb_example a listából.
    7. Kezd el írni andr… válaszd android: a listából.
    8. Kezd el írni layou… és válaszd a listából layout_gravity-t
    9. Majd az új listából center_horizontal-t (Ezzel a képet a képernyő közepére helyezted vízszintesen.)
    10. Kezd el írni andr… válaszd android: a listából.
    11. Kezd el írni layout… és válasz a listából layout_marginTop-t
    12. Írd be 20sp (Az sp egy relatív képernyő függő egység)
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/gomb_example"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="20sp"/>

Egy új elrendezés és beviteli mező

  1. Most szúrjunk be egy ViewGroup-t, amely egy beviteli mezőt (EditText) és egy gombot tartalmaz, egymás mellett.
    1. Szúrj be egy új <Linearlayout> elrendezést (ViewGroup object), de ennek az orientation tulajdonságát állítsd horizontal-ra.
    2. Szúrj be egy EditText view-objektumot
    3. A width tulajdonsága legyen 0dp.
    4. A height tujadonság legyen wrap_content.
    5. Ekkor hibát jelez (piros aláhúzás) a szerkesztő. Ezért szúrj be egy android:layout_weigth tulajdonságot értéke legyen 1. (Ezzel azt érted el, hogy az objektum a képernyő szélességét foglalja el, de ha beszúrsz mellé egy gombot, akkor helyet hagy neki az android:layout_width=”match_parrent”-tel ellentétben.)
    6. Adj még hozzá egy android:id=”@+id/etName” tulajdonságot, amely ellátja egy azonosítóval, amely segítségével majd hozzáférünk a tartalmához. (A plusz jel csak akkor szükséges, ha egy új erőforrás-azonosító adsz meg és nem szükséges ha konkrét erőforrásokat például karakterláncok vagy elrendezést azonosítasz.)
    7. Adj még hozzá egy android:hint=”Please name” magyarázó szöveget.

Most itt tartasz:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <EditText
        android:id="@+id/etName"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Please name"/>
</LinearLayout>

Hozz létre egy String erőforrrást

A String erőforrás használatára azért van szükség, mert így nyelvfüggetlenné tudjuk tenni az alkalmazást. Ha egy külön xml állományban tároljuk a képernyőn megjelenő szövegeket, akkor könnyen meg tudjuk változtatni.

  1. Kattints bele a hint tulajdonság sorába.
  2. A sor elején egy villanykörte jelenik meg, kattints rá!
  3. Válaszd az Extract string resource menüt.
  4. Töltsd ki a nezőket:
    1. Resource name legyen etHint
    2. Source set legyen main
    3. File name  legyen a string.xml
  5. Kattints az OK-ra

Most már így néz ki a módosított android:hint:

android:hint="@string/please_name"

Az /app/res/values/string.xml állomány tartalma pedig ez:

<resources>
    <string name="app_name">Two Activity</string>
    <string name="etHint">please name</string>
</resources>

A gomb létrehozása

  1. Szúrj be egy <Button> objektumot.
  2. A width és height tulajdonságának értéke legyen wrap_content.
  3. Adj hozzá id-t, amely a “btnName” azonosító legyen.
  4. Adj hozzá text tulajdonságot értéke legyen “Send

A gomb így néz ki:

<Button
    android:id="@+id/btnName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Send"/>

A teljes /app/res/layout/activity_main.xml tartalma:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/gomb_example"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20sp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <EditText
            android:id="@+id/etName"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="@string/please_name"/>
        <Button
            android:id="@+id/btnName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Send"/>
    </LinearLayout>
</LinearLayout>
<<< I. rész III. rész >>>

Egy másik activity indítása I. rész

Minden valamirevaló összetett alkalmazás valamilyen kezdőképernyővel, tájékoztatóval, promoval indul. Ehhez fogok támpontot nyújtani az Android Developer Traning-je segítségével.

Applikáció rövid leírása

Az applikáció rendkívül egyszerű lesz és persze semmire se jó. Elhelyezünk egy képet a kezdőképernyőn és megkérdezzük a felhasználó nevét. Majd egy gombra kattintva megnyitunk egy új activity-t, amelyen üdvözöljük a felhasználó s nevén szólítjuk.

Készítsünk új applikációt Android Studio-val

  1. Kattins a File –> New –>  New Project menüpo.ntjára.
  2. Töltsd ki a következő mezőket, majd Next:
    • Application Name legyen “MyAnotherView”
    • Company domain legyen egyedi, mert ebből lesz a package name, például corvus.batsanyigimnazium.hu, ahol a corvus cseréld le valami sajátra, természetesen ékezet és szóköz nélkül.
    • Package name ha jól választottál Company domain-t akkor semmi dolgod vele. Ennek kell egyedinek lennie.
    • Project location legyen olyan, hogy megtaláld a könyvtárat, ha a intézőben keresed. 🙂
  3. Válaszd a Phone and Tablet lehetőséget, a többit ne jelöld be.
  4. A minimum SDK legyen API 10: Android 2.3.3 (Gingerbread) és kattints a Next-re.
  5. Válasz az Empty Activity-t a template-k közül és Next.
  6. Hagyj mindent így:
    • Activity name legyen MainActivity
    • Generate Layout file jelölt
    • Layout name: activity_main
  7. Kattints a Finish gombra.

Most kész van egy lefordítható és futtatható project, amelyik a “Hello World” feliratot jeleníti meg telefonon és az applikáció nevét.

Applikáció címkéjének megváltoztatása

Nyisd meg a /app/res/values/strings.xml állományt.

<resources>
    <string name="app_name">Two Activity</string>
</resources>

A szöveges erőforrások között turkálunk, az AndroidManifest.xml állományban csak egy erre mutató hivatkozás van. ha akarod itt megnézheted:

/app/manifest/AndroidManifest.xml

android:label="@string/app_name"

Emulátor használata

  1. Indísd el az AVD manager-t. Tools –> Android –> AVD Manager
  2. A AVD ablakban kattins a Create Virtual Device gombra.
  3. Válassz egy Nexus telefon, ha rám hallgatsz elég a Nexus 4.
  4. A kattints a Next gombra .
  5. Fogadd el egy Next-el a Marshmallow operációs rendszert.
  6. Majd kattints a Finish gombra

Saját telefon vagy tablet használata

  1. Kösd össze USB-n keresztül a számítógépet a telefonnal. Várd meg amíg telepíti a Windows az eszköz driver-t, és ne kapcsold háttértár módba.
  2. A eszközödön engedélyezned kell a Hibaelhárítás lehetőséget.
    • Settings (Beállítások) –> Developer options (Fejlesztői lehetőségek) –> USB Hibaelhárítás bejelölve
    • Ha nem találod a Fejlesztői lehetőségek menüt. a Telefonról menüben  (About phone) A Build number-re kattints hétszer és megjelenik a Fejlesztői lehetőségek menü.

Az applikáció futtatása

  1. Kattints az Eszköztáron a Run ikon-ra vagy SHIFT+F10
  2. Válaszd ki az eszközt a megjelenő ablakból.
    • Connected Device lehet saját eszköz vagy már futó emulátor
    • Available Emulators a még nem elindított AVD-k egyike.

Az emuátor nem indul tl gyorsan, sőt lassan, de ez még mindíg gyorsabb, mint az előző verzióban.

Készítsük el az Activity-k User Interface-t

Nyisd meg (bár szerintem nyitva van) az /app/res/layot/activity_main.xml állományt.

Két panel között választhatsz Design és Text, a szerkesztő felület alatt találod a két panel fület. Design a várható látvány grafikus felületen, a Text felületen fogunk dolgozni.

  1. Töröld a <TextView> elemet a kódból.
  2. A RelativeLayout helyett LinearLayout-on, tehát cseréld a <RelativeLayout> elemet <LinearLayout>-ra.
  3. Egészítsd ki a <LinearLayout> elemet a következő tulajdonsággal (attribute):
android:orientation="vertical"
  1. Töröld az összes android:padding és tools:content tulajdonságot.

A beszúrt tulajdonság (orientation) arra készteti az elrendezést (layout), hogy az benne megjelenített objektumokat egymás alatt rendezze el (vertical).

Most így néz ki az /app/res/layot/activity_main.xml állomány:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
</LinearLayout>

Ezzel előkészítettük az alkalmazást.

Összeadást gyakoroltató program Androidon

Az első összetett activity elkészítését bemutató videó gyakorlat. Az egyes részek igen hosszúra sikeredtek, és még így is az elmélet része erősen háttérbe lett szorítva a gyakorlathoz képest.

Az activity nem csinál mást, mint véletlenszerűen előállít két egész számot és a felhasználótól kérdezve az két szám összegét leellenőrzi annak válaszát.

A videók tartalma

  1. videó
    1. Az Android Studio telepítése
    2. AVD – Android Virtual Divices vagyis, hogy legyen min futtatni a programot
    3. A Helló Világ alkalmazás magyarázat nélkül
    4. Hol az apk?
  2. videó
    1. SumPractice activity létrehozása
    2. Mi az az API
    3. Még egyszer AVD bővebben
  3. videó
    1. UI (User Interface) létrehozása (amit a felhasználó lát)
    2. RelativeLayout (Relatív elrendezés)
    3. TextView, EditText és Button létrehozása a UI-on
  4. videó
    1. MainActivity.java vagyis csináljon már valamit az a program
    2. Véletlen szám előállítása és megjelenítése a UI-n
  5. videó
    1. Ellenőrizzük a felhasználó megoldását
    2. Enyhén bolondbiztossá tesszük a programot