tutorial tạo tablayout trong android (1)

7/27/2019 Tutorial to TabLayout trong Android (1)

1/4

Tutorial to TabLayout trong Android

Trong tut ny mnh lm tab layout theo kiu mi tab ng vi 1 activity, qun l cc activity trn

qua 1 activity chnh (act ny s dng tabHost). Cch ny thun tin khi mi tab x l nhng act ring r

ca ngi dng.

Step1: Create 1 project tn HelloTabWidget

Step2: to cc activity ng vi cc tab, cn activity HelloTabWidgetActivity qun l tab s vit

sau.

Ta to 3 activity ArtistsActivity, AlbumsActivity, v SongsActivity ln lt ng vi

tab artist, albums, songs.

V d:

public class ArtistsActivity extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

TextView textview = new TextView(this);

textview.setText("This is the Artists tab");

setContentView(textview);

}

}

Activity trn ch n gin set 1 dng text lm ni dung cho tab artist, cc activity cho albums,

songs cng tng t.

To xong 3 activity ny, 1 bc cn lm l khai bo 3 ci activity ny vo trong manifest.xml, tathm on code ny vo gia cp th :

Thanh nin no lm theo tut trn google doc m b crash th c

th l do thiu on code trn.


2/4

Step3: Lin quan n phn giao din cho mi tab, ta chun b cho mi tab 2 ci icon, 1 cho

trng hp selected, 1 cho trng hp unselected. Trong doc cng c ring 1 tut thit k icon. Thng

thng, icon cho selected chn tng mu ti, icon cho unselected chn tng mu sng cho d nhn, d

gy ch :D. Mi tab cn 2 icon, nh trong tut ny c 3 tab, ta chun b 6 icon, t trong /res/drawable/

bao gm:

Ic_tab_albums_grey.png

Ic_tab_albums_white.png

Ic_tab_artists_grey.png

Ic_tab_artists_white.png

Ic_tab_songs_grey.png

Ic_tab_songs_white.png

Cng trong folder res/drawable ny , cn 3 file xml qun l ni dung mi tab, di y l v

d v file ic_tab_albums.xml cho tab artits, :

2 file ic_tab_artists.xml, ic_tab_songs.xml cng tng t.

Step 4:

File main.xml:


3/4

android:id="@android:id/tabs"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

Nh cc thanh nin thy th trong ny c s dng tabHost, tabWidget, 2 ci ny s c handle

trong HelloTabWidgetActivity. File main.xml ny th hin cc tab v c 1 navigation qua li gia cc

tab. Th LinearLayout cn v tr ca TabWidget(ci ny dng navigation) v FrameLayout (ci ny

th hin ni dung ca tab). TabHost s dng cc id tabs(trong TabWidget), id tabcontent(trong

FrameLayout) nhng ni dung vo cc th ny.

Step5:

H l lc code ci activity chnh HelloTabWidgetActivity, class ny phi k tha TabActivity.

Method onCreate() c code nh sau:

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Resources res = getResources(); // Resource object to get Drawables

TabHost tabHost = getTabHost(); // The activity TabHost

TabHost.TabSpec spec; // Resusable TabSpec for each tab

Intent intent; // Reusable Intent for each tab

// Create an Intent to launch an Activity for the tab (to be reused)

intent = new Intent().setClass(this, ArtistsActivity.class);

// Initialize a TabSpec for each tab and add it to the TabHost

spec = tabHost.newTabSpec("artists").setIndicator("Artists",

res.getDrawable(R.drawable.ic_tab_artists))

.setContent(intent);

tabHost.addTab(spec);

// Do the same for the other tabs

intent = new Intent().setClass(this, AlbumsActivity.class);

spec = tabHost.newTabSpec("albums").setIndicator("Albums",

res.getDrawable(R.drawable.ic_tab_albums))




4/4

intent = new Intent().setClass(this, SongsActivity.class);

spec = tabHost.newTabSpec("songs").setIndicator("Songs",

res.getDrawable(R.drawable.ic_tab_songs))



tabHost.setCurrentTab(2);}

Method ny dng text v icon cho mi tab, ng thi gn n vi activity tng ng. Mi tab c

to vi on code ny:

intent = new Intent().setClass(this, SongsActivity.class);

spec = tabHost.newTabSpec("songs").setIndicator("Songs",

res.getDrawable(R.drawable.ic_tab_songs))

.setContent(intent);tabHost.addTab(spec);

intent dng set content cho tab,nn n c setClass vi ci activity tng ng. spect c kiu

TabHost.TabSpec, n dng gn cc thuc tnh cho tab, trong v d trn ta new 1 tab tn songs bng

newTabSpec(songs), ri gn nh danh, icon , content cho n qua cch gi ln lt l setIndicator,

getDrawable, setContent( y l lc ci intent c dng).

Gn xong cc th cho tab ri th add n vo tabHost thi: dng ci ny nh tabHost.addTab(spec)

Ci tabHost kiu nh ci gc, cn cc tab ging cc cnh, th nn lc mnh to tab mi vi cc thuc

tnh mi, add tab mi vo mnh u gi cc hm ca tabHost.

Step7: Sa activity chnh trong manifest.xml thnh nh sau:

Ci ny b tiu ca application (NoTitleBar m), nhm ginh nhiu khong trng cho tab hn

thi.

Step8: Run no :D

tutorial tạo tablayout trong android (1)

Documents