Uzi maalumu kwa ajili ya kujifunza namna ya kutengeneza Android Apps

Kwenye App hii ya welcome tumeona katika kuunda interface tumetumia drag na drop, lakini kuna namna namna nyingine ya kuunda hizo interface kwa kutumia xml files, kila ambacho tulichokuwa tunakiweka kwenye huwa kinatokea kwenye screen katika muundo text (xml codes), angalia jinsi interface hiyo iliyo katika xml file.
1. ili kupata kuona xml text, ukiangalia kwa chini kuna sehemu zimeandikwa text na design, utachagua text
14.PNG

uandishi wa xml files kwa ajili ya android app huwa katika muundo
Code: 
android:property_unayotaka_kutumia=thamani_ya_hiyo_property

Code: 
TextView
Hii ni object maalumu kwa ajili ya text, imekuja moja kwa moja kwa sababu tulidrag text, lakini unaweza kuandika na ukiifuta ile text ya kwenye screen itaondoka pia.

Code: 
layout_width
Hii ni kwa ajili ya upana ambapo contents zinaweza kuanza kuwekwa wrap_content kwa maana basi umetaka upana wa contents umatch na size ya screen. pia unaweza kuweka vipimo halisi kama dp.

Mengine unaweza kuyaelewa kuangalia. Tutajua zaidi kadri tutakavyosonga mbele.
 
TUONGEZE BAADHI YA VITU KWENYE APP​
App yetu ya kwanza imekamilika pasipo kugusa java file ambapo ndipo logic zinafanyika, kwenye kuongeza vitu, tutaongeza button ambayo tutaipa jina "bonyeza hapa" kwa hiyo kufanikisha hili tutafuata hatua zifuatazo.

1. Kwenye upande wa widget chagua button kisha na kuidrop sehemu ya kwenye screen unayoitaka, kwa mara ya kwanza ukiidrop button neno linalotokea ni "New Button", kulibadilisha neno hilo utaenda sehemu ya properties ambayo tumeshaeleze kwenye picha za nyuma. kisha andika neno unalotaka.

2. Lakini njia hiyo sio rafiki kama hilo neno linaweza likatumika katika sehemu zaidi ya moja basi huna budi kurudi katika resources file kama zinavyoonekana chini, string.xml ni file ambalo linatumiaka kuweka maneno mbalimbali hivyo utaclick hapo na kuongeza line ifuatayo.

Code: 
<string name="buttonName">bonyezaHapa</string>
b1.png


Ukiangalia kwenye upande wa kushoto kuna forder mbalimbali na kila moja wapo lina matumizi yake maalumu ambayo nitaeleza, cha msingi kwa sisi chagua hilo file la strings.xml
Ufafanuzi, kwenye hiyo code kuna neno string ambayo ni tag kwa ajili ya texts, name hili ni jina ambalo litawakilisha text ambayo utakayoiweka, baada ya hapo utaandika maneno ambayo unataka yaonekane ni mwishowe ni kuclose hiyo tag,.

Baada ya hapo chagua activity_main.xml ili uweze kufuta neno "new button", na uongeze line String/buttonName, hii maana yake @ inalenga iangalie folder string ambayo kuna file strings.xm na kisha inaangalia jina string itakoweza kutumika kwa kuweka kiwakilishi chake baada ya hapo neno la button litabadilika.

b2.PNG


Hapo kuna android:text="String/buttonName" ambayo nimeshafafanua na android:id="@+id/button" hii ni id ambayo inawezesha hii layout ku-interact na java file (MainActivity.java), pia kwenye "TextView" upande android:text="Welcome Muaminifu", hili neno "Welcome Muaminifu" tutalifuta, lengo tunataka hili neno litokee tuu pale ambapo user ataclick button iliyoandika bonyezahapa tu ili kuifanya app kuwa more interactive.

b3.PNG
 
Code: 
package com.mwaminifuhalisi.tadi.welcomeapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private Button mybuton;
    private TextView mytext;
    private String nenoLangu="Welcome Muaminifu";

    [USER=268677]Override[/USER]
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mybuton=(Button)findViewById(R.id.button);
        mytext=(TextView)findViewById(R.id.textView);
        mybuton.setOnClickListener(new View.OnClickListener() {
            [USER=268677]Override[/USER]
            public void onClick(View v) {
                mytext.setText(nenoLangu);
            }
        });
    }
}
 
mwaminifuhalisi said:
Code: 
package com.mwaminifuhalisi.tadi.welcomeapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private Button mybuton;
    private TextView mytext;
    private String nenoLangu="Welcome Muaminifu";

    [USER=268677]Override[/USER]
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mybuton=(Button)findViewById(R.id.button);
        mytext=(TextView)findViewById(R.id.textView);
        mybuton.setOnClickListener(new View.OnClickListener() {
            [USER=268677]Override[/USER]
            public void onClick(View v) {
                mytext.setText(nenoLangu);
            }
        });
    }
}
Click to expand...
Kutoka kwenye hii code kuna line chache ambazo tumeongeza, by default baadhi ya lines huwa zinaongezwa pindi tu unapoanzisha project mpya.

Tulichoongeza sasa ni Objects za TextView pamoja na button kisha button tukafanya method,override kama inavyoonekana na kuweka text zitakazotokea pindi mtumiaji wa app akiclick button:

Baada ya hapo tutaendelea na app ya pili
 
Guys hapo kidogo nimeelewa but ngoja nifanye practical ili iweje but ningeomba somo linalofuata liwe la kuunda app za kuhack
 
3.PNG


Za siku wanajamvi

Katika app ya tip calculator tutakuatana na vitu kama kuingiza namba, event handling na seekbar pia hii app itatumia Gridlayout ambayo itahusisha rows na colums. kwa hisani ya "deitel inc development series, android 6 programming".
Cha kwanza tunatakiwa kuanza kudesign interface na fuata hatua zifuatazo

Kabla ya yatupaswa tuibadili RelativeLayout na kuwa GridLayout hivyo kwenye design nenda upande wa Text na kisha futa RelativeLayout na kuandika GridLayout.

Halafu kwenye upande wa sehemu ya property ambayo inapatikana chini upande wa kulia yakupasa u-set idadi ya columns na rows, hivyo nenda kwenye sehemu iliyoandikwa "layout:columnCount" na uandike 2 kwa maana app yetu tutamua columns mbili, upande wa rows usiongeze chochote kwa maana zitakuwa zinaongezeka zenyewe automatik kila tukiongeza component.

1. Delete default neno la helowword na kisha nenda kwenye upande wa widgets drag na drop medium text kwenye component tree baada ya GridLayout. hivyo neno litalotokea ni hellow World, kisha iset colum iwe 2 kwa maana itachukuwa column zote hii inafanyika kwenye layout:ColumnSpan, hii ni sehemu ambayo tutaweka neno "Ingiza Kias" hili litakuwa kwenye row 1(ambayo ni row 0 kwenye android studio na programming kiujumla), kwenye property ya "Id" iclick na uipe jina lolote kwa mimi naita "amountTextView".

2. Kwenye column ya kwanza pia tutaweka sehemu ambayo mtumiaji ataingiza kiasi anachotaka kiwe kinafanyiwa calculation, hivyo sehemu ambayo ina class za inputs ni ile iliyoandikwa palette ipo upande wa kushoto kwa chini baada ya sehemu ya widget ambapo pameandikwa Text Fields, kuna sehemu ya plaintext, password number nk, kwa kuwa apps inahusisha kuingiza number basi drag na uidrop hiyo pallete ya Number na uipeleke sehemu ya component Tree na litatokea neno editText, nenda sehemu ya property na utafute property ya Id na uipe jina lolote kwa hapa tutaita "amountEditText", kumbuka kila uongezapo component kwenye gridlayout linaenda kwenye cell nyingine mpaka ufanye setting ili na yenyewe itokee kwenye row ya 1(row 0) hivyo upande wa property tafuta layout:column andika 0 na row 0 kisha layout:columnCount andika 2, hapo tunakuwa tumemaliza components za row ya kwanza, next kuongeza component kwenye row zinazofuata.

3.PNG

564867
 
Mkuu samahani kidogo hii JAVA unayoizungumzia ni tofauti na javascript? Mi bado ni mchanga kwenye ulimwengu huu wa programming baada ya kumaliza kujifunza html + CSS sasa nmeanza kujifunza javascript sasa ndo hii hii unayoizungumzia au ni kitu kingine?

Sent using Jamii Forums mobile app
 
Different conventions for using single line comments

1. At the beginning

// Before code
System.out.println("...");

2. At the end

void play(); // After code

Different conventions for using multi line comments

1. At the beginning ( usually before starting to code)

/*
* By: Java Learner
* Date: April 2, 2017
*
* Description:
* Some information about
* your code.
*/

/* As a single line comment */
/* Before code */
System.out.println("...");

2. In the middle ( not usual )

System.out /* middle */.println("...");

3. At the end

void stop(); /* After code */

** A mixture of single line and multi line comment act as a swich in order to disable or enable a block of code for debugging purposes.

//*
Block A. (enable)
/*/
Block B. (disable)
//*/
---------------------
/*
Block A. (disable)
/*/
Block B. (enable)
//*/

Sent using Jamii Forums mobile app
 
Mr.genius said:
Mkuu samahani kidogo hii JAVA unayoizungumzia ni tofauti na javascript? Mi bado ni mchanga kwenye ulimwengu huu wa programming baada ya kumaliza kujifunza html + CSS sasa nmeanza kujifunza javascript sasa ndo hii hii unayoizungumzia au ni kitu kingine?

Sent using Jamii Forums mobile app
Click to expand...

Java na Javascript ni vitu viwili tofauti!
Jaribu ku google uone tofauti zake!
 
mwaminifuhalisi,
Tulipoishia Tuliweza kuweka sehemu ambayo inamwezeha mtumiaji kuweka namba na pia tuliweka sehemu yenye Text ambayo itakuwa na "hint" ya kumwambia mtumiaji ingiza kiasi. Zote EditText na TextViews zipo kwenye row na ikiwa na vipimo sawa vya column na muionekane unapaswa uwe kama hivi.

5.PNG


Nitafafanua hatua zote mpaka za kupata hiyo interface na kisha tutaanza kufanya programming ya application.
 
Kutoka kwenye picha hapo juu kuna "feature" inaitwa seekBar lakini pia imetanguliwa na text yenye namba 15 hii ni asilimia.
Kazi ya seekBar kwenye application yetu ni kuonyesha mabadiliko ambayo yanakuwa yanafanywa na mtumiaji pale aingizapo kiasi na ikishakukokotoa inatoa kiasi cha jumla au mtumiaji anai-move hiyo seekBar basi kiwango kiwe kinajionyesha kuendana na asilimia.
Lengo la app hii ni kufanya mahesabu ya bei ya bidhaa mtu alizotumia sehemu husika kama vile mgahawani kwa maana kila anapoingiza kiasi kilichotumiwa itaonyesha jumla na asilimia.

KUWEKA SEEKBAR PAMOJA NA TEXTVIEW​
Row ya kwanza Tumeshamilizana nayo ambayo ina objects za EditText na TextView ambazo tumeziita amountEditText na amountTextView.

Layout ambayo tunayoitumia ni GridLayout ambayo ina rows na columns. Hivyo kuongeza interface ya TextView na seekBar ni kwenda kwenye upande wa Palete halafu shuka mpaka sehemu yenye "Medium TextView" idrag na kisha idrop kwenye upande Component Tree kulia kabisa kama picha ya post hapo juu inavyoonekana. na kisha ipe jina la percentTextView. ili kuipa jina hilo ama lolote ulipendalo nenda kwenye sehemu ya properties kwa chini kulia na tafuta property iliyoandikwa "text" kisha andika jina unalotaka ila kwa hapa naita percentTextView.

Baada ya kuweka percentTextView kwenye row ya pili column ya kwanza sasa tunaweka seekBar kwenye column ya pili ya row ya kwanza na tutaiita (percentSeekBar).

Nenda tena upande wa palete kwenye sehemu iliyoandikwa widget na ui-drag SeekBar na kisha uidrop baada ya percentSeekBar upande wa Component Tree. ili kuipa jina unalotaka hii object nenda kwenye sehemu ya property na uandike jina unalotaka, kwangu natumia "percentSeekBar).

Hapo tumeshamaliza kuweka views kwenye row ya 2, hatua inayofuata ni kuweka rows kwenye row ya 3 na ya 4.
 
KUONGEZA VIEWS KWENYE ROW YA 3​
Kutoka kwenye Picha #48 kwenye row ya nne ina neno Total na sehemu inayofuta ina rangi kama nyekundu fulani hivi, hapo ni sehemu ya kuonyesha jumla ya kiasi kilichoingizwa baada ya kukokotoa.

Lakini pia row ya tatu kuna neno tip na cell inayofuata ina rangi nyekundu ila si sana hapa ni sehemu ambayo itaonyesha kitu kama summary. Jinsi ya kuongeza hivyo havina tofauti na hatua zilizotangulia na unatakiwa ufanye ifuatavyo.

Nenda upande wa widget kisha drag na drop "Medium Text" kwenda kwenye Component Tree kisha nenda kwenye property ya text na uipe jina la "tipLabelTextView" ama jina lolote.

Halafu rudi tena upande wa widget na drag na drop tena "Medium Text" kwenda kwenye Component Tree window kama inavyoonekana kwenye picha post #48. kisha kwenye sehemu ya property nenda sehemu ya text na uandike "tipTextView" ama neno lolote ulipendalo.

Na kwa upande wa row ya 4 hatua ni za kama row ya 3,.........

Nenda upande wa widget kisha drag na drop "Medium Text" kwenda kwenye Component Tree kisha nenda kwenye property ya text na uipe jina la "totalLabelTextView" ama jina lolote.

Halafu rudi tena upande wa widget na drag na drop tena "Medium Text" kwenda kwenye Component Tree window kama inavyoonekana kwenye picha post #48. kisha kwenye sehemu ya property nenda sehemu ya text na uandike "totalTextView" ama neno lolote ulipendalo.

Hapo tutakuwa tumeshamzalisha kutengeneza prototype ya interface tunayooitaka kilichobaki ni kufanya configuration na kuipa majina views zetu kama zinavyoonekana kwenye post namba 48.
 
hello niko na shauku ya kutaka kujua njia hii coz nimezoea kundengeza app kupitia website za watu kama vile www.Appgyser.Com na nyingine tofauti ila hii njia siijui kama hakuna watu wenye kuhitaji njoo hata tufundishane inbox
 
You must log in or register to reply here.

Similar Discussions

Back
Top Bottom
Forums
New posts
Post thread
Back