Android 原生 Android ActionBar Tab （滑动）导航

本文内容

• 环境
• 项目结构
• 演示一：ActionBar Tab 导航
• 演示二：ActionBar Tab 带滑动导航

本文演示 Tab 导航。第一个演示，是基本的 Tab 导航，第二个是带滑动的 Tab 导航。

另外，个人觉得，通过本例能够知道，如何创建初始化 Fragment，并把 Fragment 放入“容器”中。容器既可以是 LinearLayout、RelativeLayout，也可以是 ViewGroup。这类似初始化 Web 应用程序页面的实现，困扰了我很久，不解决这个问题，无法自己写 Android APP。

Fragment 碎片，这个思想很好。它是 Android 3.0 新增的，有了 Fragment，就可以将 Activity 模块化。这就好像，现在的页面都用 div（层）的概念，我觉得，这大概借鉴了 photoshop 的 layer（图层）的理念。

下载 Demo

环境

---

• Windows 2008 R2 64 位
• Eclipse ADT V22.6.2，Android 4.4.2（API 19）
• SAMSUNG GT-8618，Android OS 4.1.2

项目结构

---

图 1 项目结构                                                           图 2 主程序界面

如图 1 所示，唯一需要注意的是，DummiyFragment1 和 DummiyFragment2 虽然内容完全相同，但它们继承的类不同。DummiyFragment1 继承 android.app.Fragment，而 DummiyFragment2 继承 android.support.v4.Fragment。

演示 ActionBar Tab 导航

---

图 3 Tab 导航

核心代码如下所示：

public class ActionBarTabNavTest extends Activity implements

        ActionBar.TabListener {

    private static final String SELECTED_ITEM = "selected_item";

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_tabnav);

        final ActionBar actionBar = getActionBar();

        // 设置ActionBar的导航方式：Tab导航

        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // 依次添加3个Tab页，并为3个Tab标签添加事件监听器

        actionBar

                .addTab(actionBar.newTab().setText("第一页").setTabListener(this));

        actionBar

                .addTab(actionBar.newTab().setText("第二页").setTabListener(this));

        actionBar

                .addTab(actionBar.newTab().setText("第三页").setTabListener(this));

    }

    @Override

    public void onRestoreInstanceState(Bundle savedInstanceState) {

        if (savedInstanceState.containsKey(SELECTED_ITEM)) {

            // 选中前面保存的索引对应的Fragment页

            getActionBar().setSelectedNavigationItem(

                    savedInstanceState.getInt(SELECTED_ITEM));

        }

    }

    // 将当前选中的Fragment页的索引保存到Bundle中

    @Override

    public void onSaveInstanceState(Bundle outState) {

        outState.putInt(SELECTED_ITEM, getActionBar()

                .getSelectedNavigationIndex());

    }

    @Override

    public void onTabUnselected(ActionBar.Tab tab,

            FragmentTransaction fragmentTransaction) {

    }

    // 当指定Tab被选中时激发该方法

    @Override

    public void onTabSelected(ActionBar.Tab tab,

            FragmentTransaction fragmentTransaction) {

        // 创建一个新的Fragment对象

        Fragment fragment = new DummyFragment1();

        // 创建一个Bundle对象，用于向Fragment传入参数

        Bundle args = new Bundle();

        args.putInt(DummyFragment2.ARG_SECTION_NUMBER, tab.getPosition() + 1);

        // 向fragment传入参数

        fragment.setArguments(args);

        // 获取FragmentTransaction对象

        FragmentTransaction ft = getFragmentManager().beginTransaction();

        // 使用fragment代替该Activity中的container组件

        ft.replace(R.id.container, fragment);

        // 提交事务

        ft.commit();

    }

    @Override

    public void onTabReselected(ActionBar.Tab tab,

            FragmentTransaction fragmentTransaction) {

    }

}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

演示 ActionBar Tab 带滑动导航

---

图 4 Tab 滑动导航

核心代码如下所示：

public class ActionBarTabSwipeNavTest extends FragmentActivity implements

        ActionBar.TabListener {

    ViewPager viewPager;

    ActionBar actionBar;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_tabswipenav);

        // 获取ActionBar对象

        actionBar = getActionBar();

        // 获取ViewPager

        viewPager = (ViewPager) findViewById(R.id.pager);

        // 创建一个FragmentPagerAdapter对象，该对象负责为ViewPager提供多个Fragment

        FragmentPagerAdapter pagerAdapter = new FragmentPagerAdapter(

                getSupportFragmentManager()) {

            // 获取第position位置的Fragment

            @Override

            public Fragment getItem(int position) {

                Fragment fragment = new DummyFragment2();

                Bundle args = new Bundle();

                args.putInt(DummyFragment2.ARG_SECTION_NUMBER, position + 1);

                fragment.setArguments(args);

                return fragment;

            }

            // 该方法的返回值i表明该Adapter总共包括多少个Fragment

            @Override

            public int getCount() {

                return 3;

            }

            // 该方法的返回值决定每个Fragment的标题

            @Override

            public CharSequence getPageTitle(int position) {

                switch (position) {

                case 0:

                    return "第一页";

                case 1:

                    return "第二页";

                case 2:

                    return "第三页";

                }

                return null;

            }

        };

        // 设置ActionBar使用Tab导航方式

        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // 遍历pagerAdapter对象所包含的全部Fragment。

        // 每个Fragment对应创建一个Tab标签

        for (int i = 0; i < pagerAdapter.getCount(); i++) {

            actionBar

                    .addTab(actionBar.newTab()

                            .setText(pagerAdapter.getPageTitle(i))

                            .setTabListener(this));

        }

        // 为ViewPager组件设置FragmentPagerAdapter

        viewPager.setAdapter(pagerAdapter); // ①

        // 为ViewPager组件绑定事件监听器

        viewPager

                .setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

                    // 当ViewPager显示的Fragment发生改变时激发该方法

                    @Override

                    public void onPageSelected(int position) {

                        actionBar.setSelectedNavigationItem(position);

                    }

                });

    }

    @Override

    public void onTabUnselected(ActionBar.Tab tab,

            FragmentTransaction fragmentTransaction) {

    }

    // 当指定Tab被选中时激发该方法

    @Override

    public void onTabSelected(ActionBar.Tab tab,

            FragmentTransaction fragmentTransaction) {

        viewPager.setCurrentItem(tab.getPosition()); // ②

    }

    @Override

    public void onTabReselected(ActionBar.Tab tab,

            FragmentTransaction fragmentTransaction) {

    }

}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

下载 Demo