1. Mở tập tin MainActivity và cho lớp này thừa kế từ TabActivity
1
| public class MainActivity extends TabActivity { |
2. Mở activity_main.xml dưới res/layout và thiết kế lại giao diện như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <TabHost xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent"/> </LinearLayout></TabHost> |
3. Chúng ta cần 3 activity và 3 tập tin xml layout tương ứng cho mỗi tab. Vì vậy, tạo 3 activity là: PhotosActivity.java, SongsActivity.java, và VideosActivity.java
PhotosActivity.java
1
2
3
4
5
6
7
8
| public class PhotosActivity extends Activity{ @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.photos_layout); }} |
SongsActivity.java
1
2
3
4
5
6
7
8
| public class PhotosActivity extends Activity{ @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.songs_layout); }} |
VideosActivity.java
1
2
3
4
5
6
7
8
| public class PhotosActivity extends Activity{ @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.videos_layout); }} |
Tiếp theo, chúng ta tạo 3 xml layout nằm trong res/layout là: photos_layout.xml, songs_layout.xml, và videos_layout.xml
photos_layout.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Screen Design for Photos --> <TextView android:text="PHOTOS HERE" android:padding="15dip" android:textSize="18dip" android:layout_width="fill_parent" android:layout_height="wrap_content"/> </LinearLayout> |
songs_layout.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Screen Design for the SONGS --> <TextView android:text="SONGS HERE" android:padding="15dip" android:textSize="18dip" android:layout_width="fill_parent" android:layout_height="wrap_content"/></LinearLayout> |
videos_layout.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Screen Design for VIDEOS --> <TextView android:text="VIDEOS HERE" android:padding="15dip" android:textSize="18dip" android:layout_width="fill_parent" android:layout_height="wrap_content"/></LinearLayout> |
4. Mở tập tin MainActivity.java và thêm vào đoạn code như dưới đây. Trong đoạn code này, chúng ta tạo ra ba TabSpec và thêm chúng vào TabHost
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabHost tabHost = getTabHost(); // Tab for Photos TabSpec photospec = tabHost.newTabSpec("Photos"); photospec.setIndicator("Photos", getResources().getDrawable(R.drawable.icon_photos_tab)); Intent photosIntent = new Intent(this, PhotosActivity.class); photospec.setContent(photosIntent); // Tab for Songs TabSpec songspec = tabHost.newTabSpec("Songs"); // setting Title and Icon for the Tab songspec.setIndicator("Songs", getResources().getDrawable(R.drawable.icon_songs_tab)); Intent songsIntent = new Intent(this, SongsActivity.class); songspec.setContent(songsIntent); // Tab for Videos TabSpec videospec = tabHost.newTabSpec("Videos"); videospec.setIndicator("Videos", getResources().getDrawable(R.drawable.icon_videos_tab)); Intent videosIntent = new Intent(this, VideosActivity.class); videospec.setContent(videosIntent); // Adding all TabSpec to TabHost tabHost.addTab(photospec); // Adding photos tab tabHost.addTab(songspec); // Adding songs tab tabHost.addTab(videospec); // Adding videos tab } |
5. Thêm vào tập tin AndroidManifest.xml phần khai báo thông tin cho 3 Activity đã tạo ra ở trên
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.code5s.tabhostlayoutdemo" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="com.code5s.tabhostlayoutdemo.MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <!-- Songs Activity --> <activity android:name=".SongsActivity" /> <!-- Videos Activity --> <activity android:name=".VideosActivity" /> <!-- Photos Activity --> <activity android:name=".PhotosActivity" /> </application></manifest> |
No comments:
Post a Comment