การสร้าง Tab บน Android ด้วยการใช้ TabHost และ ActionBar Tab

1
<TabHost
2
    android:id="@+id/tabhost"
3
    xmlns:android="http://schemas.android.com/apk/res/android"
4
    android:layout_width="match_parent"
5
    android:layout_height="match_parent">
6

7
    <LinearLayout
8
        android:id="@+id/linear"
9
        android:layout_width="match_parent"
10
        android:layout_height="match_parent"
11
        android:orientation="vertical">
12

13
        <TabWidget
14
            android:id="@android:id/tabs"
15
            android:layout_width="match_parent"
16
            android:layout_height="wrap_content">
17
        </TabWidget>
18

19
        <FrameLayout
20
            android:id="@android:id/tabcontent"
21
            android:layout_width="match_parent"
22
            android:layout_height="match_parent">
23
        </FrameLayout>
24

25
    </LinearLayout>
26

27
</TabHost>

1
 @Override
2
protected void onCreate(Bundle savedInstanceState) {
3
    super.onCreate(savedInstanceState);
4
    setContentView(R.layout.activity_my);
5

6
    TabHost tabHost = (TabHost) findViewById(R.id.tabhost);
7

8
    TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1")
9
            .setIndicator("KitKat")
10
            .setContent(new Intent(this, Tab1.class));
11

12
    TabHost.TabSpec tabSpec2 = tabHost.newTabSpec("tab2")
13
            .setIndicator("Jelly Bean")
14
            .setContent(new Intent(this, Tab2.class));
15

16
    TabHost.TabSpec tabSpec3 = tabHost.newTabSpec("tab3")
17
            .setIndicator("Gingerbread")
18
            .setContent(new Intent(this, Tab3.class));
19

20
    tabHost.addTab(tabSpec);
21
    tabHost.addTab(tabSpec2);
22
    tabHost.addTab(tabSpec3);
23
}

1
<?xml version="1.0" encoding="utf-8"?>
2
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3
              android:orientation="vertical"
4
              android:id="@+id/linear"
5
              android:layout_width="match_parent"
6
              android:layout_height="match_parent">
7

8
</LinearLayout>

1
package com.devahoy.android.simpletab;
2

3
import android.app.Activity;
4
import android.graphics.Color;
5
import android.os.Bundle;
6
import android.widget.LinearLayout;
7

8
public class Tab1 extends Activity {
9

10
    @Override
11
    protected void onCreate(Bundle savedInstanceState) {
12
        super.onCreate(savedInstanceState);
13
        setContentView(R.layout.tab);
14

15
        LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linear);
16
        linearLayout.setBackgroundColor(Color.parseColor("#f62355"));
17
    }
18
}

1
package com.devahoy.android.simpletab;
2

3
import android.app.Activity;
4
import android.graphics.Color;
5
import android.os.Bundle;
6
import android.widget.LinearLayout;
7

8
public class Tab2 extends Activity {
9

10
    @Override
11
    protected void onCreate(Bundle savedInstanceState) {
12
        super.onCreate(savedInstanceState);
13
        setContentView(R.layout.tab);
14

15
        LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linear);
16
        linearLayout.setBackgroundColor(Color.parseColor("#00b06b"));
17
    }
18
}

1
package com.devahoy.android.simpletab;
2

3
import android.app.Activity;
4
import android.graphics.Color;
5
import android.os.Bundle;
6
import android.widget.LinearLayout;
7

8
public class Tab3 extends Activity {
9

10
    @Override
11
    protected void onCreate(Bundle savedInstanceState) {
12
        super.onCreate(savedInstanceState);
13
        setContentView(R.layout.tab);
14

15
        LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linear);
16
        linearLayout.setBackgroundColor(Color.parseColor("#3982d7"));
17
    }
18
}

1
<?xml version="1.0" encoding="utf-8"?>
2
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3
    package="com.devahoy.android.simpletab" >
4

5
    <application
6
        android:allowBackup="true"
7
        android:icon="@drawable/ic_launcher"
8
        android:label="@string/app_name"
9
        android:theme="@style/AppTheme" >
10
        <activity
11
            android:name=".MyActivity"
12
            android:label="@string/app_name" >
13
            <intent-filter>
14
                <action android:name="android.intent.action.MAIN" />
15

16
                <category android:name="android.intent.category.LAUNCHER" />
17
            </intent-filter>
18
        </activity>
19

20
        <activity android:name=".Tab1" />
21
        <activity android:name=".Tab2" />
22
        <activity android:name=".Tab3" />
23
    </application>
24

25
</manifest>

1
Caused by: java.lang.IllegalStateException: Did you forget to call 'public void setup(LocalActivityManager activityGroup)'?

1
public class MyActivity extends Activity {
2

3
    LocalActivityManager mLocalActivityManager;
4

5
    @Override
6
    protected void onCreate(Bundle savedInstanceState) {
7
        super.onCreate(savedInstanceState);
8
        setContentView(R.layout.activity_my);
9

10
        mLocalActivityManager = new LocalActivityManager(this, false);
11
        mLocalActivityManager.dispatchCreate(savedInstanceState);
12

13
        TabHost tabHost = (TabHost) findViewById(R.id.tabhost);
14
        tabHost.setup(mLocalActivityManager);
15

16
        ...
17
    }
18
}

1
package com.devahoy.android.simpletab;
2

3
import android.app.Activity;
4
import android.app.LocalActivityManager;
5
import android.content.Intent;
6
import android.os.Bundle;
7
import android.widget.TabHost;
8

9

10
public class MyActivity extends Activity {
11

12
    LocalActivityManager mLocalActivityManager;
13

14
    @Override
15
    protected void onCreate(Bundle savedInstanceState) {
16
        super.onCreate(savedInstanceState);
17
        setContentView(R.layout.activity_my);
18
        mLocalActivityManager = new LocalActivityManager(this, false);
19
        mLocalActivityManager.dispatchCreate(savedInstanceState);
20

21
        TabHost tabHost = (TabHost) findViewById(R.id.tabhost);
22
        tabHost.setup(mLocalActivityManager);
23

24
        TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1")
25
                .setIndicator("KitKat")
26
                .setContent(new Intent(this, Tab1.class));
27
        TabHost.TabSpec tabSpec2 = tabHost.newTabSpec("tab2")
28
                .setIndicator("Jelly Bean")
29
                .setContent(new Intent(this, Tab2.class));
30
        TabHost.TabSpec tabSpec3 = tabHost.newTabSpec("tab3")
31
                .setIndicator("Gingerbread")
32
                .setContent(new Intent(this, Tab3.class));
33

34
        tabHost.addTab(tabSpec);
35
        tabHost.addTab(tabSpec2);
36
        tabHost.addTab(tabSpec3);
37
    }
38

39
    @Override
40
    protected void onPause() {
41
        super.onPause();
42
        mLocalActivityManager.dispatchPause(!isFinishing());
43

44
    }
45

46
    @Override
47
    protected void onResume() {
48
        super.onResume();
49
        mLocalActivityManager.dispatchResume();
50
    }
51
}

1
package com.devahoy.android.simpletab;
2

3
import android.app.ActionBar;
4
import android.app.Activity;
5
import android.app.FragmentTransaction;
6
import android.os.Bundle;
7

8
public class ActionBarTabActivity extends Activity {
9

10
    @Override
11
    protected void onCreate(Bundle savedInstanceState) {
12
        super.onCreate(savedInstanceState);
13

14
        ActionBar actionBar = getActionBar();
15
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
16
    }
17
}

1
package com.devahoy.android.simpletab;
2

3
import android.app.ActionBar;
4
import android.app.Activity;
5
import android.app.FragmentTransaction;
6
import android.os.Bundle;
7

8
public class ActionBarTabActivity extends Activity implements ActionBar.TabListener {
9

10
    @Override
11
    protected void onCreate(Bundle savedInstanceState) {
12
        super.onCreate(savedInstanceState);
13

14
        ActionBar actionBar = getActionBar();
15
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
16

17
        for (int i = 1; i <= 3; i++) {
18
            ActionBar.Tab tab = actionBar.newTab()
19
                    .setText("Tab#" + i)
20
                    .setTabListener(this);
21
            actionBar.addTab(tab);
22
        }
23
    }
24

25
    @Override
26
    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
27

28
    }
29

30
    @Override
31
    public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
32

33
    }
34

35
    @Override
36
    public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
37

38
    }
39
}

1
package com.devahoy.android.simpletab;
2

3
import android.app.ActionBar;
4
import android.app.Activity;
5
import android.app.Fragment;
6
import android.app.FragmentTransaction;
7
import android.graphics.Color;
8
import android.os.Bundle;
9
import android.view.LayoutInflater;
10
import android.view.View;
11
import android.view.ViewGroup;
12
import android.widget.LinearLayout;
13

14
public class ActionBarTabActivity extends Activity {
15

16
    @Override
17
    protected void onCreate(Bundle savedInstanceState) {
18
        super.onCreate(savedInstanceState);
19

20
        ActionBar actionBar = getActionBar();
21
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
22

23
        for (int i = 1; i <= 3; i++) {
24
            ActionBar.Tab tab = actionBar.newTab()
25
                    .setText("Tab#" + i)
26
                    .setTabListener(this);
27
            actionBar.addTab(tab);
28
        }
29
    }
30

31
    public static class MyFragment extends Fragment {
32

33
        private String color;
34
        @Override
35
        public void onCreate(Bundle savedInstanceState) {
36
            super.onCreate(savedInstanceState);
37
            Bundle args = getArguments();
38
            color = args.getString("color");
39
        }
40

41
        @Override
42
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
43

44
            View view = inflater.inflate(R.layout.tab, container, false);
45

46
            LinearLayout linearLayout = (LinearLayout) view.findViewById(R.id.linear);
47
            linearLayout.setBackgroundColor(Color.parseColor(color));
48

49
            return view;
50
        }
51
    }
52
}

1
package com.devahoy.android.simpletab;
2

3
import android.app.ActionBar;
4
import android.app.Activity;
5
import android.app.Fragment;
6
import android.app.FragmentTransaction;
7
import android.graphics.Color;
8
import android.os.Bundle;
9
import android.view.LayoutInflater;
10
import android.view.View;
11
import android.view.ViewGroup;
12
import android.widget.LinearLayout;
13

14
public class ActionBarTabActivity extends Activity implements ActionBar.TabListener {
15

16
    @Override
17
    protected void onCreate(Bundle savedInstanceState) {
18
        ...
19
    }
20

21
    @Override
22
    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
23

24
    }
25

26
    @Override
27
    public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
28

29
    }
30

31
    @Override
32
    public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
33

34
    }
35
}

1
@Override
2
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
3

4
    Fragment fragment = new MyFragment();
5
    Bundle args = new Bundle();
6

7
    switch (tab.getPosition()) {
8
        case 0:
9
            args.putString("color", "#2574a9");
10
            fragment.setArguments(args);
11
            break;
12
        case 1:
13
            args.putString("color", "#36d5b5");
14
            fragment.setArguments(args);
15
            break;
16
        case 2:
17
            args.putString("color", "#f9640f");
18
            fragment.setArguments(args);
19
            break;
20
    }
21

22
    ft.replace(android.R.id.content, fragment);
23
}