Hiện kết quả từ 1 tới 2 của 2
Like Tree1Likes
  • 1 Post By hgkhtncntt

Chủ đề: Hướng Dẩn Sử Dụng Android Tab Layout


  1. #1
    Thành Viên Mới Avatar của hgkhtncntt
    Tham gia
    Dec 2013
    Bài gửi
    8

    Hướng Dẩn Sử Dụng Android Tab Layout

    Trong bài viết trước (Giới thiệu về các loại Layout trong Android) chúng ta đã biết đến 3 loại Layout (Linear Layout, Relative Layout và Table Layout). Trong bài viết này, chúng ta sẻ được biết đến 1 loại Layout nữa là Tab Layout. Chúng ta sẻ làm một tab layout đơn giản có 3 tab.
    App của mình : https://play.google.com/store/apps/d...eAppAndroiFree
    Source code bài viêt : https://www.mediafire.com/download/q...dTabLayout.rar

    Hình ảnh về tab layout mà chúng ta sẻ làm :

    Như hình ở phía trên, chúng ta có 3 tab vì vậy chúng ta phải có 3 Activity riêng biệt để hiển thị nội dung theo từng tab. Bây giờ chúng tao sẻ tạo một project đơn giản bằng eclipse.
    1. Tạo một project mới File->New-> Android Project và đặt tên Acvitity là AndroidTabLayoutActivity
    2. Mở file AndroidTabLayoutActivity và extend nó từ class TabActivity.
    public class AndroidTabLayoutActivity extends TabActivity {

    3. Bây giờ bạn mở file main.xml và viết những dòng code dưới đây :
    Mã:
    <?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>
    Bây giờ chúng ta cần 3 Activity và 3 layout cho 3 tabs. Chuột phải vào package folder -> New -> Class rồi lần lượt tạo 3 class PhotosActivity.java, SongsActivity.java, VideosActivity
    Mã:
    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); } }
    Bây giờ chúng ta tạo 3 file xml layout cho 3 Activity ở trên. Chuột phải vào res/layout-> New -> Android XML và đặt tên là photos_layout.xml, songs_layout.xml và videos_layout.xml. Và viết những dòng code dưới đây vào từng file tương ứng.
    Mã:
    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_ style="width: match_parentpx" 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_ style="width: match_parentpx" 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_ style="width: match_parentpx" 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>
    5. Mỗi tab chúng ta cần các icon tương ứng cho chúng. Chúng ta cần 3 kích thước cho mỗi icon. Có 3 kích thước 48 x 48 px, 32 x 32 px, 24 x 24 px và đặt chúng vào tương ứng vào drawable-hdpi,drawable-mdpi và drawable-ldpi. Các bạn có thể lấy hình ảnh trong source code mà tôi đính kèm bài viết. Hình ảnh dưới đây miêu tả các icon của chúng ta.

    6. Trạng thái của icon trong android có thể được định nghĩa trong file xml để định nghĩa trạng thái mặc định và trạng thái hover. Chúng ta sẻ định nghĩa cho 3 icon của chúng ta. Chúng ta sẻ tạo 3 file xml trong thư mực drawable-hdpi. Dưới đây là code của 3 file xml tương ứng.
    Mã:
    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>
    1.
    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>
    7. Bây giờ chúng ta sẻ viết code cho file AndroidTabLayoutActivity.java. Trong đoạn code dưới đây chúng ta sẻ tạo 3 TabSepcs và add chúng vào TabHost
    Mã:
    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();
             
            // Tab for Photos
            TabSpec photospec = tabHost.newTabSpec("Photos");
            // setting Title and Icon for the Tab
            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");        
            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
        }
    }
    8. Bây giờ chúng ta đã hoàn thành project, trước khi build chúng ta kiểm tra lại thử xem activity của chúng ta đã được khai báo trong file AndroidManifest.xml hay chưa.
    Mã:
    <?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>
    9. Bây giờ các bạn build ứng dụng thử nhé. Chúc may mắn J

    Chủ đề tương tự:

    Lần sửa cuối bởi hgkhtncntt; 16-12-13 lúc 03:10 PM
    trvhung likes this.

  2. #2
    Thành Viên Mới Avatar của huynhnhan886
    Tham gia
    Dec 2013
    Bài gửi
    3
    Thank bạn rất nhiều.



Đánh dấu

Quyền viết bài

  • Bạn không thể gửi chủ đề mới
  • Bạn không thể gửi trả lời
  • Bạn không thể gửi file đính kèm
  • Bạn không thể sửa bài viết của mình
  •