Home » Lập trình » Học Android » BÀI 6. Android Tab Layout

BÀI 6. Android Tab Layout

Android cơ bản: Bài hôm nay chúng ta sẽ đi tìm hiểu về Tab Layout trong android, nó giúp cho ứng dụng của ta tiện lợi và khoa học hơn, mời các bạn theo dõi!

[Total: 0    Average: 0/5]

Android cơ bản: Ở bài trước chúng ta đã tìm hiểu về cách truyền dữ liệu giữa các Activity bạn nào chưa xem có thể xem lại nhé: Bài 5:Truyền dữ liệu giữa Activity này sang Activity khác

Chúng ta đi vào bài học thôi: Bài này ta sẽ bố trí 3 tab cơ bản

Đây là hình ảnh mà kết quả có được!

Android Tab Layout output

Trong bài này ta cần 3 màn hình tab, chúng ta cùng mở project eclipse IDE

 Để tạo 1 project ta click: File -> New -> Android Project và đặt tên activity là AndroidTabLayoutActivity

Ta extend TabActivity

public class AndroidTabLayoutActivity extends TabActivity {
 

Giờ ta sẽ thiết kế  màn hình chính ở main.xml trong res -> layout

<?xml version="1.0" encoding="utf-8"?>
 <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <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>

 

–  Ta cần 3 Activity và 3 file xml cho tab. Ta sẽ tạo 3 file Activity có tên như sau:

–   PhotosActivity.java,SongsActivity.java và VideosActivity.java

Click chuột phải vào package folder -> New -> Class để tạo mới class nhé!

» PhotosActivity.java
 package com.example.androidtablayout; import android.app.Activity;
 import android.os.Bundle; public class PhotosActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.photos_layout); }
 }

 

» SongsActivity.java
 package com.example.androidtablayout; import android.app.Activity;
 import android.os.Bundle; public class SongsActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.songs_layout); }
 }

 

» VideosActivity.java
 package com.example.androidtablayout; import android.app.Activity;
 import android.os.Bundle; public class VideosActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.videos_layout); }
 }

   Giờ ta cần 3 file xml  ta cũng click chuột phải vào res/layout -> New -> Android XML

để tạo, 3 file có tên photos_layout.xmlsongs_layout.xml và videos_layout.xml

» photos_layout.xml
 <?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
 <?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
 <?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>

  Mỗi tab cần 1 hình ảnh,chúng ta cần 3 kích thước cho mỗi biểu tượng mà cho và 3 thư mục khác nhau, 48 x 48 px32 x 32 px và 24 x 24 px thư mục tương ứng drawable-hdpidrawable-mdpi và  drawable-ldpi

Android icon sizes

Với mỗi biểu tượng ta cần 1 file cấu hình chúng, bạn phải tạo 3 file xml cấu hình biểu tượng và đặt trong thư mục drawable-hdpi

» icon_photos_tab.xml
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- When selected, use grey --> <item android:drawable="@drawable/photos_gray" android:state_selected="true" /> <!-- When not selected, use white--> <item android:drawable="@drawable/photos_white" />
 </selector>

 

» icon_songs_tab.xml
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- When selected, use grey --> <item android:drawable="@drawable/songs_gray" android:state_selected="true" /> <!-- When not selected, use white--> <item android:drawable="@drawable/songs_white" />
 </selector>

 

» icon_videos_tab.xml
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- When selected, use grey --> <item android:drawable="@drawable/videos_gray" android:state_selected="true" /> <!-- When not selected, use white--> <item android:drawable="@drawable/videos_white" />
 </selector>

 Giờ đến phần xử lý tại AndroidTabLayoutActivity.java ta tạo 3 TabSepcs và cho chúng vào TabHost

» AndroidTabLayoutActivity.java
 package com.example.androidtablayout; import android.app.TabActivity;
 import android.content.Intent;
 import android.os.Bundle;
 import android.widget.TabHost;
 import android.widget.TabHost.TabSpec; public class AndroidTabLayoutActivity extends TabActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); TabHost tabHost = getTabHost(); 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); TabSpec songspec = tabHost.newTabSpec("Songs"); songspec.setIndicator("Songs", getResources().getDrawable(R.drawable.icon_songs_tab)); Intent songsIntent = new Intent(this, SongsActivity.class); songspec.setContent(songsIntent); 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); tabHost.addTab(photospec); tabHost.addTab(songspec); tabHost.addTab(videospec); }
 }

Và cuối cùng ta phải thêm activity trong file AndroidManifest.xml

» AndroidManifest.xml
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.androidtablayout" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="8" /> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".AndroidTabLayoutActivity" 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>

 Xong. Chúng ta cùng chạy project nào!click chuột phải vào project folder -> Run As -> Android Application

Có chỗ nào vướng mắc các bạn để lại conment để chúng ta cùng trao đổi nhé! cảm ơn các bạn đã ghé thăm bikipcuocsong.com Chúc các bạn thành công!

Leave a Reply

Your email address will not be published. Required fields are marked *

*