MojAndroid

 

Zá­kla­dom di­zaj­nu kaž­dej ap­li­ká­cie je pô­so­bi­vá gra­fi­ka. V tej­to čas­ti se­riá­lu sa bu­de­me ve­no­vať sta­tic­kej gra­fi­ke, te­da gra­fic­kým ob­raz­com de­fi­no­va­ných pri návr­hu ap­li­ká­cie a ulo­že­ným v kó­de XML aj dy­na­mic­kej gra­fi­ke vy­kres­ľo­va­nej po­mo­cou kó­du po­čas be­hu ap­li­ká­cie.

 

Sta­tic­ká gra­fi­ka

Sta­tic­kú gra­fi­ku de­fi­no­va­nú v sú­bo­roch XML mô­že­te vy­tvá­rať po­mo­cou tried Co­lorDrawab­le, Sha­peD­rawab­le a Gra­dientDrawab­le. Sú­bo­ry XML s de­fi­ní­ciou sta­tic­kej gra­fi­ky bý­va­jú umies­tne­né v po­dad­re­sá­ri res/drawab­le. Sú­bo­ry sa iden­ti­fi­ku­jú po­mo­cou ich náz­vu pred prí­po­nou xml. Ten­to ná­zov mu­sí byť pí­sa­ný ma­lý­mi pís­me­na­mi. Aby to ne­bo­lo ta­ké jed­no­duc­hé, vo vy­šších ver­ziách od 2.0 sú k dis­po­zí­cii tri po­dad­re­sá­re:

 

– res/drawab­le-ldpi

– res/drawab­le-mdpi

– res/drawab­le-hdpi

 

pre rôz­ne gra­fic­ké roz­lí­še­nie dis­ple­ja. LDPI je pre níz­ku hus­to­tu pixelov (100 – 140 dpi), MDPI pre stred­nú hus­to­tu (140 – 180 dpi) a HDPI pre vy­so­kú hus­to­tu (190 – 250 dpi). Sú­vi­sí to s gra­fi­kou, kto­rú ste de­fi­no­va­li pre za­ria­de­nie, prí­pad­ne emu­lá­tor.

 

– QVGA 320 × 240, 120 dpi, uh­lop­rieč­ka 3,3″

– WQVGA­432 432 × 240, 120 dpi, uh­lop­rieč­ka 3,9″

– HVGA 480 × 320, 160 dpi, uh­lop­rieč­ka 3,6″

– WVGA800 800 × 480, 240 dpi, uh­lop­rieč­ka 3,9″

– WVGA854 854 × 480, 240 dpi, uh­lop­rieč­ka 4,1″

 

Po­stup vy­tvo­re­nia „gra­fi­ky XML“ je jed­no­duc­hý. Do prís­luš­né­ho ad­re­sá­ra umies­tni­te sú­bor XML a vhod­ne ho po­me­nuj­te, pri­čom v náz­ve od­po­rú­ča­me po­užiť len ma­lé pís­me­ná. V na­šom prí­pa­de chce­me vy­kres­liť za­ob­le­né orá­mo­va­nie dis­ple­ja, pre­to sme vy­bra­li ná­zov oval.xml. V sú­bo­re sú de­fi­no­va­né gra­fic­ké pr­vky, nap­rík­lad:

<?xml ver­sion="1.0" en­co­ding="utf-8"?>
<sha­pe xmlns:
an­droid="http://sche­mas.an­droid.com/apk/res/an­droid"
  an­droid:sha­pe="rec­tang­le">
    <so­lid
      an­droid:co­lor="#0000ff"/>
    <stro­ke
      an­droid:width="10dp"
      an­droid:co­lor="#00FF00"/>
    <cor­ners
      an­droid:ra­dius="15dp" />
    <pad­ding
      an­droid:left="10dp"
      an­droid:top="10dp"
      an­droid:right="10dp"
      an­droid:bot­tom="10dp"
    />
</sha­pe>

V sú­bo­re Main.xml zob­ra­ze­nie ap­li­ku­je­me. Všim­ni­te si zvý­raz­ne­ný ria­dok kó­du.

<?xml ver­sion="1.0" en­co­ding="utf-8"?>
<Li­nearLayout xmlns:an­droid="http://sche­mas.an­droid.com/apk/res/an­droid"
    an­droid:orien­ta­tion="ver­ti­cal"
    an­droid:layout_width="fill_pa­rent"
    an­droid:layout_height="fill_pa­rent"
    >
<View  
    an­droid:layout_width="fill_pa­rent"
    an­droid:layout_height="wrap_con­tent"
    an­droid:background="@drawab­le/oval"/>
</Li­nearLayout>

Po­dob­ným jed­no­duc­hým po­stu­pom mô­že­te zob­ra­ziť na po­za­die ob­rá­zok. Ob­ráz­ky tre­ba umies­tniť ta­kis­to do ad­re­sá­ra res/drawab­le. Od­kaz v sú­bo­re main.xml bu­de v rov­na­kom tva­re ako od­kaz na sú­bor XML s de­fi­ní­ciou gra­fi­ky:

<View  
    an­droid:layout_width="fill_pa­rent"
    an­droid:layout_height="wrap_con­tent"
    an­droid:background="@drawab­le/an­der"/>

Dy­na­mic­ká gra­fi­ka – kres­le­nie zá­klad­ných gra­fic­kých tva­rov

Za­tiaľ čo sta­tic­ká gra­fi­ka de­fi­no­va­ná v kó­de XML sa ho­dí skôr na vy­kres­ľo­va­nie po­za­dia, na vy­kres­ľo­va­nie dy­na­mic­kej gra­fi­ky, či už jed­no­du­chých hier, di­ag­ra­mov, ale­bo schém pro­ce­sov a po­dob­ne, sa po­uží­va ap­li­kač­ný kód. Na kres­le­nie vy­tvo­rí­me sa­mos­tat­nú rov­no­men­nú trie­du. Vy­tvo­rí­te ju tak, že v zlož­ke src pro­jek­tu ap­li­ku­je­te kon­texto­vé me­nu (New – Class) na ba­lí­ček com.examp­le.na­zov_pro­jek­tu.

Ako pr­vý krok tre­ba za­ria­diť od­ov­zda­nie „be­hu“ ap­li­ká­cie od trie­dy Ac­ti­vi­ty trie­de Gra­fi­ka.

pub­lic class gra­fi­ka extends Ac­ti­vi­ty
{    @Overri­de
    pub­lic void on­Crea­te(Bund­le sa­ve­dIn­stan­ceS­ta­te)
    {
        su­per.on­Crea­te(sa­ve­dIn­stan­ceS­ta­te);
        set­Con­ten­tView(new Kres­le­nie(this));
    }
}

Po­znám­ka: Im­pli­cit­ne po vy­tvo­re­ní ap­li­ká­cie je tá­to ak­ti­vi­ta nas­me­ro­va­ná na R.layout.main.

Obr. 1 Vy­tvo­re­nie no­vej trie­dy

Trie­da Gra­fi­ka ob­sa­hu­je prík­lad kó­du na vy­kres­le­nie obdĺžni­ka, vy­kres­le­nie čia­ry a vý­pis textu v gra­fic­kom mó­de:

pac­ka­ge com.examp­le.gra­fi­ka;
im­port an­droid.con­tent.Con­text;
im­port an­droid.grap­hics.Can­vas;
im­port an­droid.grap­hics.Paint;
im­port an­droid.view.View;
 pub­lic class Kres­le­nie extends View  
{
    pub­lic Kres­le­nie(Con­text con­text){su­per(con­text);}
    @Overri­de
    pro­tec­ted void on­Draw(Can­vas can­vas)
    {
        Paint paint = new Paint();
        paint.set­Co­lor(0xff0000ff);
        can­vas.drawRect(10, 10, 100, 50, paint);
        paint.set­Co­lor(0xffffff00);
        can­vas.drawText("Gra­fic­ky vý­pis textu", 10, 70, paint);
        can­vas.drawLi­ne(10, 80, 110, 80, paint);
    }
}

Do­ty­ko­vý dis­plej

Pri prís­tro­joch s do­ty­ko­vým dis­ple­jom sa ná­met na ďal­šiu gra­fic­kú ap­li­ká­ciu pl­nú dy­na­mi­ky po­nú­ka sám: Čo tak kres­liť pr­stom po ob­ra­zov­ke? Na ten­to účel troc­hu pre­ro­bí­me trie­du Kres­le­nie z pred­chád­za­jú­ce­ho prík­la­du.

 

Obr. 2 Prík­lad na kres­le­nie zá­klad­ných gra­fic­kých tva­rov

Prin­cíp je jed­no­duc­hý. V ob­služ­nej pro­ce­dú­re on­Touc­hE­vent bu­de­me sní­mať ako uda­los­ti do­ty­ky (Mo­tio­nE­vent.AC­TION_DOWN) a po­hy­by prs­ta (Mo­tio­nE­vent.AC­TION_MO­VE) a uk­la­dať sú­rad­ni­ce miest, kde ste sa dis­ple­ja dotk­li, do po­ľa. Pre jed­no­duc­hosť bu­de­me se­riali­zo­vať, to zna­me­ná uk­la­dať sú­rad­ni­ce x a y sé­rio­vo do jed­no­roz­mer­né­ho po­ľa. Nás­led­ne vy­kres­lí­me čia­ru ako spoj­ni­cu med­zi dvo­ma po­sled­ný­mi bod­mi. Všim­ni­te si nas­ta­ve­nie hrúb­ky čia­ry. Naj­skôr pri­daj­te re­fe­ren­cie na sní­ma­nie po­hy­bu po do­ty­ko­vej ob­ra­zov­ke a po­le ob­jek­tov na ulo­že­nie sú­rad­níc.

an­droid.view.Mo­tio­nE­vent;
im­port ja­va.util.ArrayList;

Obr. 3 Prík­lad na kres­le­nie pr­stom

Po iden­ti­fi­ká­cii uda­los­ti do­ty­ku ale­bo po­su­nu prs­ta sa expli­cit­ne vy­vo­lá uda­losť in­va­li­da­te(). V ob­slu­he tej­to uda­los­ti sa za­vo­lá me­tó­da on­Draw na prek­res­le­nie ob­ra­zov­ky:

pub­lic class Kres­le­nie extends View  
{
    pub­lic Kres­le­nie(Con­text con­text) {su­per(con­text);}
    ArrayList<Float> pt = new ArrayList<Float>();
    @Overri­de
    pub­lic boo­lean on­Touc­hE­vent        (Mo­tio­nE­vent event)
    {
        int e = event.ge­tAc­tion();
        if (e == Mo­tio­nE­vent.AC­TION_DOWN || e == Mo­tio­nE­vent.AC­TION_MO­VE)
        {
          pt.add(event.getX());  pt.add(event.ge­tY());
                in­va­li­da­te();
        }
        re­turn true;
    }
    @Overri­de
    pro­tec­ted void on­Draw(Can­vas can­vas)
    {
        Paint paint = new Paint();
        paint.set­Co­lor(0xffffffff);
        paint.setStro­keWidth(4);
        for(int i =2; i < pt.si­ze(); i+=2)
        {
        can­vas.drawLi­ne(pt.get        (i-2), pt.get(i-1),
                        pt.get(i), pt.get(i+1) , paint);
        }
    }
}

Autor: Ľuboslav Macko
Zdroj: ITnews.sk

MojAndroid.sk TIP: prečítajte si aj ďalšie časti seriálu Ako stvoriť Android

  1. Ako stvoriť Android / 1. časť (Infoware)
  2. Ako stvoriť Android / 2. časť: Vytvárame prvú aplikáciu
  3. Ako stvoriť Android / 3.časť: vytvárame prvú Android aplikáciu
  4. Ako stvoriť Android / 4. časť: Funkčné používateľské rozhranie
  5. Ako stvoriť Android / 5.časť: Grafika – práve čítate

 

 

 

 

19.7.2011

Pravidlá diskusie

Portál MojAndroid.sk si vyhradzuje právo zmazať neslušné, rasistické a vulgárne príspevky, ako aj osobné útoky na redakciu, či diskutérov v komentároch pod článkom bez ďalšieho upozornenia. V prípade uverejňovania odkazov na externé stránky, je komentár automaticky preposlaný do redakcie na schválenie.

+