【攻克Android (16)】Tab标签导航

最新推荐文章于 2022-11-11 18:48:50 发布

XiangdongLee

最新推荐文章于 2022-11-11 18:48:50 发布

阅读量129

点赞数

分类专栏：攻克Android系列文章标签：移动开发

本文链接：https://blog.csdn.net/XiangdongLee/article/details/84732382

版权

攻克Android系列专栏收录该内容

39 篇文章 0 订阅

订阅专栏

[b][size=large]本文围绕以下四个部分展开： [/size][/b]

[b][size=large]一、Tab[/size][/b]
[size=medium][b]附代码补充[/b][/size]
[b][size=large]二、ListNav[/size][/b]
[b][size=large]三、SwipeTab[/size][/b]
[size=medium][b]附代码补充[/b][/size]
[b][size=large]四、SwipeView[/size][/b]

[b][size=large]一、Tab[/size][/b]

[size=medium]进入主界面后，选中“新闻”，显示的是“新闻”页面。[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4685/5c4627b6-bc18-33f0-aae0-fd56a59ec666.png[/img][/align]

[size=medium]点击“科技”后，显示“科技”页面。[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4687/3b7e11e2-6925-377e-9998-8133bed6105b.png[/img][/align]

[size=medium]点击“游戏”后，显示“游戏”页面。[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4689/361cb92e-4f64-3a4f-8316-eb4889e0cb69.png[/img][/align]

[size=medium][b]1.activity_main.xml 中，写一个帧布局，此帧布局显示时会被碎片替换[/b][/size]

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:id="@+id/container"
             tools:context=".MainActivity">

  <!--
  改 此布局 为 帧布局。
  此帧布局 显示时会被 Fragment 替换。

  由于此帧布局要被替换，因此 给其添加 id:
  android:id="@+id/container"
  -->
</FrameLayout>

[size=medium][b]2.创建三个碎片：NewsFragment & fragment_news.xml，TechFragment & fragment_tech.xml，GameFragment & fragment_game.xml ，并在三个碎片的布局中填入内容。[/b][/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4693/0c892211-e736-326a-84a6-04e36ec59a41.png[/img][/align]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context="com.xiangdong.tab.NewsFragment">

  <!-- 可用其他的布局方式，放置其他的控件
  碎片里面的内容，由自己决定。
  -->
  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:textAppearance="?android:attr/textAppearanceLarge"
      android:text="@string/news"/>

</LinearLayout>

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4695/ab253a24-b354-35ac-96a2-29b278840bd3.png[/img][/align]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              tools:context="com.xiangdong.tab.TechFragment">

  <!-- 可用其他的布局方式，放置其他的控件
  碎片里面的内容，由自己决定。
  -->
  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:textAppearance="?android:attr/textAppearanceLarge"
      android:text="@string/tech"/>

</LinearLayout>

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4697/8ff7c81c-60c0-37f1-bcde-02e76ef17a67.png[/img][/align]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              tools:context="com.xiangdong.tab.GameFragment">

  <!-- 可用其他的布局方式，放置其他的控件
  碎片里面的内容，由自己决定。
  -->
  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:textAppearance="?android:attr/textAppearanceLarge"
      android:text="@string/game"/>

</LinearLayout>

[size=medium][b]3.声明变量（ActionBar应用栏）。[/b][/size]

private ActionBar actionBar;

[size=medium][b]4.初始化应用栏。[/b][/size]

// 4. 初始化应用栏
        actionBar = this.getActionBar();
        // 4.1 设置应用图标
        actionBar.setDisplayHomeAsUpEnabled(true);  // 允许改 actionBar
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);

[size=medium][b]5.设置导航模式。[/b][/size]

actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

[size=medium][b]补充：[/b][/size]

[size=medium][color=red]ActionBar.NAVIGATION_MODE_LIST[/color]：列表导航模式[/size]
[size=medium][color=red]ActionBar.NAVIGATION_MODE_STANDARD[/color]：标准导航模式[/size]
[size=medium][color=red]ActionBar.NAVIGATION_MODE_TABS[/color]：标签导航模式[/size]

[size=medium][b]6.应用栏（actionBar）上添加标签（tabs）。[/b][/size]

actionBar.addTab(actionBar.newTab().
                setText(getString(R.string.news)).setTabListener(tabListener));
        actionBar.addTab(actionBar.newTab().
                setText(getString(R.string.tech)).setTabListener(tabListener));
        actionBar.addTab(actionBar.newTab().
                setText(getString(R.string.game)).setTabListener(tabListener));

[size=medium][b]7.标签导航监听器（事件）。[/b][/size]

private ActionBar.TabListener tabListener = new ActionBar.TabListener() {
        // 选中标题
        @Override
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
            switch (tab.getPosition()) {
                // 用 Fragment 替换 帧布局
                case 0:
                    ft.replace(R.id.container, new NewsFragment());
                    break;
                case 1:
                    ft.replace(R.id.container, new TechFragment());
                    break;
                case 2:
                    ft.replace(R.id.container, new GameFragment());
            }
        }

        // 取消选中
        @Override
        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // no op 没有操作
        }

        // 再次选中
        @Override
        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // no op
        }
    };

[size=medium][b]附代码补充[/b][/size]

[size=medium]（1）strings.xml [/size]

<resources>
  <string name="app_name">Tab</string>

  <string name="action_settings">Settings</string>

  <string name="news">新闻</string>
  <string name="tech">科技</string>
  <string name="game">游戏</string>
</resources>

[size=medium]（2）activity_main.xml [/size]

[size=medium]（3）三个碎片的布局文件 [/size]

[size=medium]（4）activity_main.xml [/size]

[size=medium]（5）MainActivity [/size]

package com.xiangdong.tab;

import android.app.ActionBar;
import android.app.Activity;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends Activity {
    // 2. 创建所有的 XxxFragment & fragment_Xxx.xml
    // 3. 声明变量（ActionBar）
    private ActionBar actionBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 4. 初始化应用栏
        actionBar = this.getActionBar();
        // 4.1 设置应用图标
        actionBar.setDisplayHomeAsUpEnabled(true);  // 允许改 actionBar
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
        // 5. 设置导航模式
        // 5.1 ActionBar.NAVIGATION_MODE_LIST 列表导航模式
        // 5.2 ActionBar.NAVIGATION_MODE_STANDARD 标准导航模式
        // 5.3 ActionBar.NAVIGATION_MODE_TABS 选项卡导航模式
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // 6. actionBar 上添加tabs（应用栏上添加选项卡）
        actionBar.addTab(actionBar.newTab().
                setText(getString(R.string.news)).setTabListener(tabListener));
        actionBar.addTab(actionBar.newTab().
                setText(getString(R.string.tech)).setTabListener(tabListener));
        actionBar.addTab(actionBar.newTab().
                setText(getString(R.string.game)).setTabListener(tabListener));
    }

    // 7.标签导航监听器 （事件）
    private ActionBar.TabListener tabListener = new ActionBar.TabListener() {
        // 选中标题
        @Override
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
            switch (tab.getPosition()) {
                // 用 Fragment 替换 帧布局
                case 0:
                    ft.replace(R.id.container, new NewsFragment());
                    break;
                case 1:
                    ft.replace(R.id.container, new TechFragment());
                    break;
                case 2:
                    ft.replace(R.id.container, new GameFragment());
            }
        }

        // 取消选中
        @Override
        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // no op 没有操作
        }

        // 再次选中
        @Override
        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // no op
        }
    };


    // --------------------------------------------------------------------------
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

[b][size=large]二、ListNav[/size][/b]

[size=medium]进入主界面，点击上面的下拉列表，出现三个列表导航：“新闻”、“科技”和“游戏”：[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4706/e479e9a7-699c-3201-8fab-d96c87bf9d47.png[/img][/align]

[size=medium]当点击“新闻”之后，主界面弹出一段文字：[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4708/c429717f-180d-3078-9182-05862edd83de.png[/img][/align]

[size=medium]当点击“科技”之后，主界面弹出一段文字：[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4710/5af6a8e5-e8aa-3ea3-a642-8f3dc092c1c6.png[/img][/align]

[size=medium]当点击“游戏”之后，主界面弹出一段文字：[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4712/f09ab747-f50f-3ce4-aeee-88b9ae785651.png[/img][/align]

[size=medium][b]1. strings.xml 。[/b][/size]

<resources>
  <string name="app_name">ListNav</string>

  <string name="action_settings">Settings</string>

  <string-array name="list">
    <item>新闻</item>
    <item>科技</item>
    <item>游戏</item>
  </string-array>
</resources>

[size=medium][b]2. MainActivity 。[/b][/size]

package com.xiangdong.listnav;

import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.SpinnerAdapter;
import android.widget.Toast;

// 低于5.0版本，MainActivity 会 extends ActionBarActivity（已过时）。
// 5.0+ 版本，MainActivity extends Activity
public class MainActivity extends Activity {
    private ActionBar actionBar;
    private String[] list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        list = getResources().getStringArray(R.array.list);

        // 初始化应用栏
        actionBar = this.getActionBar();
        // 设置应用图标
        actionBar.setDisplayHomeAsUpEnabled(true);  // 允许改 actionBar
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);

        // 通过适配器加载指定的文本数据，设置显示方式
        SpinnerAdapter adapter = ArrayAdapter.createFromResource(
                this, R.array.list,
                android.R.layout.simple_spinner_dropdown_item);

        // 设置导航模式：列表导航
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);

        // 设置列表导航回调
        actionBar.setListNavigationCallbacks(
                adapter,
                new ActionBar.OnNavigationListener() {
                    /**
                     * 选中列表导航项
                     * @param itemPosition 位置
                     * @param itemId ID
                     * @return true 事件已处理完毕
                     */
                    @Override
                    public boolean onNavigationItemSelected(int itemPosition, long itemId) {
                        String text = String.format("List Nav index: %d, %s", itemPosition, list[itemPosition]);
                        Toast.makeText(getApplicationContext(), text, Toast.LENGTH_SHORT).show();
                        return true;
                    }
                }
        );
    }


    // ------------------------------------------------------------------------------------
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

[b][size=large]三、SwipeTab 滑动标签[/size][/b]

[size=medium]进入主界面后，默认显示的是“新闻”的内容。既可以点击应用栏的不同标签来显示不同页面：“新闻”、“科技”和“游戏”；又可以左右滑动，来显示不同的页面，当滑到最左边或最右边再滑动的时候，就滑动不了了。[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4736/0a830cc1-1289-3f4b-9b54-87059b383633.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4738/5f4090ac-1ee2-3c27-9bba-8da5b00eb9ac.png[/img][/align]

[size=medium][b]1. strings.xml 中，加入字符串[/b] [/size]

<resources>
  <string name="app_name">SwipeTab</string>

  <string name="action_settings">Settings</string>

  <string name="news">新闻</string>
  <string name="tech">科技</string>
  <string name="game">游戏</string>
</resources>

[size=medium][b]2. 创建三个碎片：NewsFragment & fragment_news.xml，TechFragment & fragment_tech.xml，GameFragment & fragment_game.xml 。并写三个碎片的布局文件。[/b] [/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4742/5d86e60a-a3a7-3eb7-b4c9-6699c5a97cfd.png[/img][/align]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context="com.xiangdong.swipetab.NewsFragment">

  <!-- 可用其他的布局方式，放置其他的控件
  碎片里面的内容，由自己决定。
  -->
  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:textAppearance="?android:attr/textAppearanceLarge"
      android:text="@string/news"/>

</LinearLayout>

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4744/e9ac5199-7a7c-30c9-be73-e2dc9ca03d7d.png[/img][/align]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              tools:context="com.xiangdong.swipetab.TechFragment">

  <!-- 可用其他的布局方式，放置其他的控件
  碎片里面的内容，由自己决定。
  -->
  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:textAppearance="?android:attr/textAppearanceLarge"
      android:text="@string/tech"/>

</LinearLayout>

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4746/02a84c22-226e-37bd-b2f1-8b84585762ae.png[/img][/align]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              tools:context="com.xiangdong.swipetab.GameFragment">

  <!-- 可用其他的布局方式，放置其他的控件
  碎片里面的内容，由自己决定。
  -->
  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:textAppearance="?android:attr/textAppearanceLarge"
      android:text="@string/game"/>

</LinearLayout>

[size=medium][b]3. activity_main.xml ：要用 v4支持包下面的分页控件。[/b] [/size]

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/pager"
    tools:context=".MainActivity"/>

    <!--
    MainActivity 中要获得此分页控件，因此要写 id。
    -->

[size=medium]导入v4支持包，解决兼容性的方法：[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4740/0b143fbc-4fac-3c49-9588-bd55f3434510.png[/img][/align]

[size=medium][b]4. MainActivity ：加载主布局文件（代码自动产生）。[/b] [/size]

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 加载主布局文件
        setContentView(R.layout.activity_main);
    }

[size=medium][b]5. MainActivity ：默认继承的是 Activity。修改继承类为v4支持包下面的 FragmentActivity 。[/b] [/size]

public class MainActivity extends FragmentActivity {}

[size=medium][b]6. MainActivity 。声明变量。[/b] [/size]

private ActionBar actionBar;
    private String[] tabs = new String[3];
    private ViewPager viewPager;
    private TabFragmentAdapter adapter;

[size=medium][b]7. MainActivity 初始化变量。[/b] [/size]

// 初始化应用栏
        actionBar = this.getActionBar();
        // 设置应用图标
        actionBar.setDisplayHomeAsUpEnabled(true);  // 允许改 actionBar
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);

        tabs[0] = getString(R.string.news);
        tabs[1] = getString(R.string.tech);
        tabs[2] = getString(R.string.game);

[size=medium][b]8. 创建自定义的 Fragment 适配器类。[/b] [/size]

private class TabFragmentAdapter extends FragmentPagerAdapter {

        public TabFragmentAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            switch (i) {
                case 0:
                    // 需要兼容低版本： android.support.v4.app.Fragment;
                    return new NewsFragment();
                case 1:
                    return new TechFragment();
                case 2:
                    return new GameFragment();
                default:
                    return null;
            }
        }

        @Override
        public int getCount() {
            return tabs.length;
        }
    }

[size=medium][b]9. 创建 ViewPager 适配器。[/b] [/size]

adapter = new TabFragmentAdapter(this.getSupportFragmentManager());

        // 获得分页控件 （来自activity_main.xml）
        viewPager = (ViewPager) findViewById(R.id.pager);
        // 分页控件 关联 适配器
        viewPager.setAdapter(adapter);

[size=medium][b]10. 设置 Pager 改变的监听器 (事件)。[/b] [/size]

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                // Pager 改变后，选中对应的 Tab 【翻页的时候，上面的Tab也在改变】
                actionBar.setSelectedNavigationItem(i);
            }

            @Override
            public void onPageScrollStateChanged(int i) {
                //
            }
        });

[size=medium][b]11. 标签监听事件【Tab改变的时候，相当于在翻页】。[/b] [/size]

private ActionBar.TabListener tabListener = new ActionBar.TabListener() {
        // 如果不与翻页发生关系，那么这里面还得写switch。
        // 如果与翻页的适配器关联，因为翻页里面已经写了switch，因此这儿就不用写了。
        // 关联后，点击选项，就相当于翻了页。
        @Override
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 点击 Tab， ViewPager 改变选中项
            viewPager.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // no op
        }

        @Override
        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // no op
        }
    };

[size=medium][b]12. 设置应用栏导航模式，文本/监听事件。[/b] [/size]

actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        for (int i = 0; i < tabs.length; i++) {
            actionBar.addTab(actionBar.newTab().setText(tabs[i]).
                    setTabListener(tabListener));
        }
    }

[size=medium][b]附代码补充[/b][/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4755/d649f7ed-a151-3994-a183-73234d5c41e1.png[/img][/align]

[size=medium]（1）strings.xml [/size]

[size=medium]（2）activity_main.xml [/size]

[size=medium]（3）MainActivity [/size]

package com.xiangdong.swipetab;

import android.app.ActionBar;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends FragmentActivity {
    // 4. 修改继承类为 FragmentActivity

    // 5. 声明变量
    private ActionBar actionBar;
    private String[] tabs = new String[3];
    private ViewPager viewPager;
    private TabFragmentAdapter adapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 加载主布局文件
        setContentView(R.layout.activity_main);

        // 6. 初始化变量

        // 初始化应用栏
        actionBar = this.getActionBar();
        // 设置应用图标
        actionBar.setDisplayHomeAsUpEnabled(true);  // 允许改 actionBar
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);

        tabs[0] = getString(R.string.news);
        tabs[1] = getString(R.string.tech);
        tabs[2] = getString(R.string.game);

        // 8.创建 ViewPager 适配器
        adapter = new TabFragmentAdapter(this.getSupportFragmentManager());

        // 获得分页控件 （来自activity_main.xml）
        viewPager = (ViewPager) findViewById(R.id.pager);
        // 分页控件 关联 适配器
        viewPager.setAdapter(adapter);

        // 9. 设置 Pager 改变的监听器 (事件)
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                // Pager 改变后，选中对应的 Tab 【翻页的时候，上面的Tab也在改变】
                actionBar.setSelectedNavigationItem(i);
            }

            @Override
            public void onPageScrollStateChanged(int i) {
                //
            }
        });

        // 11. 设置应用栏导航模式，文本/监听事件
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        for (int i = 0; i < tabs.length; i++) {
            actionBar.addTab(actionBar.newTab().setText(tabs[i]).
                    setTabListener(tabListener));
        }
    }

    // 7. 创建自定义的 Fragment 适配器类
    private class TabFragmentAdapter extends FragmentPagerAdapter {

        public TabFragmentAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            switch (i) {
                case 0:
                    // 需要兼容低版本： android.support.v4.app.Fragment;
                    return new NewsFragment();
                case 1:
                    return new TechFragment();
                case 2:
                    return new GameFragment();
                default:
                    return null;
            }
        }

        @Override
        public int getCount() {
            return tabs.length;
        }
    }

    // 10. 标签监听事件 【Tab改变的时候，相当于在翻页】
    private ActionBar.TabListener tabListener = new ActionBar.TabListener() {
        // 如果不与翻页发生关系，那么这里面还得写switch。
        // 如果与翻页的适配器关联，因为翻页里面已经写了switch，因此这儿就不用写了。
        // 关联后，点击选项，就相当于翻了页。
        @Override
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 点击 Tab， ViewPager 改变选中项
            viewPager.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // no op
        }

        @Override
        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // no op
        }
    };

    // ------------------------------------------------------------
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

[b][size=large]四、SwipeView[/size][/b]

[size=medium]进入主界面后，默认显示的是“新闻”页面。向左滑，滑不了了。[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4763/bc93d272-b699-3d54-8413-5f644240b401.png[/img][/align]

[size=medium]向右滑，显示的是“科技”页面。[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4765/13f8fef8-8fad-3951-bd79-6a3a45e9506a.png[/img][/align]

[size=medium]继续向右滑，显示的是“游戏”页面。再向右滑，滑不了了。[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4767/3dba5c94-b362-3791-814c-09c22ceb5713.png[/img][/align]

[size=medium][b]1. strings.xml [/b][/size]

<resources>
  <string name="app_name">SwipeView</string>

  <string name="news">新闻</string>
  <string name="tech">科技</string>
  <string name="game">游戏</string>

  <string name="action_settings">Settings</string>
</resources>

[size=medium][b]2. 创建三个碎片：NewsFragment & fragment_news.xml，TechFragment & fragment_tech.xml，GameFragment & fragment_game.xml 。并写三个碎片的布局文件 [/b][/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4769/9bddea70-f2d0-35f5-aa9c-32061fbb8485.png[/img][/align]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

  <!-- 可用其他的布局方式,放置其他的控件-->

  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:text="@string/news"
      android:textAppearance="?android:attr/textAppearanceLarge"/>

</LinearLayout>

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4771/aa1de7c7-2158-38c5-a601-c7c0ae7d04bf.png[/img][/align]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              tools:context=".TechFragment">

  <!-- 可用其他的布局方式,放置其他的控件-->

  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:text="@string/tech"
      android:textAppearance="?android:attr/textAppearanceLarge"/>

</LinearLayout>

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/4773/e6b5bbb8-fea2-3910-80cc-00df654febe0.png[/img][/align]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              tools:context=".GameFragment">

  <!-- 可用其他的布局方式,放置其他的控件-->

  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:text="@string/game"
      android:textAppearance="?android:attr/textAppearanceLarge"/>

</LinearLayout>

[size=medium][b]3. MainActivity [/b][/size]

package com.android.swipeview;

import android.app.ActionBar;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends FragmentActivity {

    private ActionBar actionBar;
    private String[] titles = new String[3];
    private ViewPager viewPager;
    private TabFragmentAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        actionBar = getActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);

        titles[0] = getString(R.string.news);
        titles[1] = getString(R.string.tech);
        titles[2] = getString(R.string.game);

        adapter = new TabFragmentAdapter(getSupportFragmentManager());
        viewPager = (ViewPager) findViewById(R.id.pager);
        viewPager.setAdapter(adapter);
    }

    private class TabFragmentAdapter extends FragmentPagerAdapter {

        public TabFragmentAdapter(FragmentManager fm) {
            super(fm);
        }

        // 设置 Page 的标题文字
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }

        @Override
        public Fragment getItem(int i) {
            switch (i) {
                case 0:
                    return new NewsFragment();
                case 1:
                    return new TechFragment();
                case 2:
                    return new GameFragment();
                default:
                    return null;
            }
        }

        @Override
        public int getCount() {
            return titles.length;
        }
    }

    // --------------------------------------------------------------------------
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

XiangdongLee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【攻克Android (16)】Tab标签导航

[b][size=large]本文围绕以下四个部分展开： [/size][/b][b][size=large]一、Tab[/size][/b] [size=medium][b]附代码补充[/b][/size][b][size=large]二、ListNav[/size][/b][b][size=large]三、SwipeTab[/size][/b] ...
复制链接

扫一扫