| Để tạo được màn hình với nhiều
Tab container với android chúng ta có một cách khá đơn giản như sắp
trình bày bên dưới. Trước tiên có thể hình dung tab như sau:
Tạo một tab đơn giản: Vào layout > main.xml viết nội dung như sau:
<TabHost android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tabHost" xmlns:android="http://schemas.android.com/apk/res/android"> <TabWidget android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@android:id/tabs" /> <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@android:id/tabcontent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/tab1" android:orientation="vertical" android:paddingTop="60px"> <TextView android:layout_width="fill_parent" android:layout_height="100px" android:text="This is tab1" android:id="@+id/txt1" />
</LinearLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab2" android:orientation="vertical" android:paddingTop="60px"> <TextView android:layout_width="fill_parent" android:layout_height="100px" android:text="This is tab 2" android:id="@+id/txt2" />
</LinearLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab3" android:orientation="vertical" android:paddingTop="60px"> <TextView android:layout_width="fill_parent" android:layout_height="100px" android:text="This is tab 3" android:id="@+id/txt3" />
</LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab4" android:orientation="vertical" android:paddingTop="60px"> <TextView android:layout_width="fill_parent" android:layout_height="100px" android:text="This is tab 4" android:id="@+id/txt3" />
</LinearLayout> </FrameLayout>
</TabHost>
Trong activity:
@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);
TabHost tabHost = (TabHost) findViewById(R.id.tabHost); tabHost.setup();
TabSpec spec1 = tabHost.newTabSpec("");
//Set content cho tab tương ứng spec1.setContent(R.id.tab1); //Set tên và icon cho tab spec1.setIndicator("New songs", getResources().getDrawable(R.drawable.ic_tab_artists_white));
TabSpec spec2 = tabHost.newTabSpec(""); spec2.setIndicator("Top Viet Nam"); spec2.setContent(R.id.tab2);
TabSpec spec3 = tabHost.newTabSpec(""); spec3.setIndicator("Top Au My"); spec3.setContent(R.id.tab3); TabSpec spec4 = tabHost.newTabSpec(""); spec4.setIndicator("Top Han"); spec4.setContent(R.id.tab4);
tabHost.addTab(spec1); tabHost.addTab(spec2); tabHost.addTab(spec3); tabHost.addTab(spec4); } Kết quả sẽ như hình bên dưới:
Vậy
nếu muốn tạo icon cho tab với kiểu khi chọn vào thì thể hiện icon này
và khi không chọn thì thể hiện icon khác phải làm sao? Các bạn đế ý lại phương thức: spec1.setIndicator("New songs", getResources().getDrawable(R.drawable.ic_tab_artists_white)); ic_tab_artists_white là icon ic_tab_artists_white.png chúng ta copy dán vào trong drawable bây giờ đổi lại (R.drawable.ic_tab_artists_white) thành (R.drawable.ic_tab_songs) với ic_tab_songs la file ic_tab_songs.xml tạo ra trong thư mục drawable với nội dung sau:
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Khi chon hien mau xam --> <item android:drawable="@drawable/ic_tab_artists_grey" android:state_selected="true" /> <!-- Khi khong chon hien mau trang --> <item android:drawable="@drawable/ic_tab_artists_white" /> </selector>
Kết quả
Các hình icon có trong bài:  
| 
