当前位置: 代码迷 >> Android >> Android技术——视图切换(2)借助ViewPage实现Tab滑动导航
  详细解决方案

Android技术——视图切换(2)借助ViewPage实现Tab滑动导航

热度:59   发布时间:2016-04-28 01:59:41.0
Android技术——视图切换(二)借助ViewPage实现Tab滑动导航

一、早期android(android.support.v4)提供了一系列支持Fragment滑动切换的类,主要是:

1、ViewPager:它时Fragment容器,可以同时管理多个Fragment,并允许多个Fragment切换时提供动画效果。

2、FragmentPagerAdapter:Adapter类,用于为ViewPager提供多个Fragment。此类通常需要扩展。

3、PagerTitleStrip:与ViewPager结合使用,用于在ViewPager上显示“导航条”。

二、借助ViewPage实现Tab滑动导航的步骤如下:

step1:扩展得到自己的FragmentPagerAdapter

step2:扩展得到自己的SimpleOnPageChangeListener。这个主要时在ViewPager滑动选择时候被触发,因此在这里面通常是放置切换Fragment的代码。

step3:向ViewPager添加自己的FragmentPagerAdapter和自己的SimpleOnPageChangeListener。

示例如下:

(本项目是在上文“Android技术——滑动切换(一)实现Tab导航”项目基础上添加而来)

/Tab_Nav/src/com/example/tab_nav/MeiNvFragment_V4.java文件(其实这个类和上文中的MeiNvFragment的内容一模一样,只是MeiNvFragment_V4是继承自android.support.v4.app.Fragment而已)

package com.example.tab_nav;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
public class MeiNvFragment_V4 extends Fragment
{
    public static int[]  img_ids;
    public static String Fragment_Key = "Fragment_Key";
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {
        View v = inflater.inflate(R.layout.fragment_layout, null);
        ImageView img_meinv = (ImageView) v.findViewById(R.id.img_meinv);
        // 获取创建该Fragment时传入的参数Bundle
        Bundle args = getArguments();
        img_meinv.setImageResource(img_ids[args.getInt(Fragment_Key)]);
        return v;
    }
}

/Tab_Nav/src/com/example/tab_nav/ViewPagerActivity.java文件:

package com.example.tab_nav;
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.support.v4.view.ViewPager.SimpleOnPageChangeListener;
public class ViewPagerActivity extends FragmentActivity
// 由于FragmentPagerAdapter只在android.support.v4中定义
// 而android.support.v4.app.FragmentActivity的实例化需要传入android.support.v4.app.FragmentManager,
// 这个特殊的FragmentManager只能通过FragmentActivity的getSupportFragmentManager方法得到,
// 所以ViewPagerActivity必须继承android.support.v4.app.FragmentActivity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager);
        MeiNvFragment_V4.img_ids = new int[] { R.drawable.linzhiling,
                R.drawable.liuyan, R.drawable.yangmi };
        ViewPager pager = (ViewPager) findViewById(R.id.pager);
        // 为ViewPager添加FragmentPagerAdapter
        myFragmentPagerAdapter adapter = new myFragmentPagerAdapter(
                getSupportFragmentManager());
        pager.setAdapter(adapter);
        // 为ViewPager添加事件监听器
        mySimpleOnPageChangeListener listener = new mySimpleOnPageChangeListener(
                pager);
        pager.setOnPageChangeListener(listener);
    }
    // 扩展得到自己的FragmentPagerAdapter
    class myFragmentPagerAdapter extends FragmentPagerAdapter
    {
        public myFragmentPagerAdapter(FragmentManager fm)
        {
            super(fm);
            // TODO Auto-generated constructor stub
        }
        // 获取指定位置的Fragment
        @Override
        public Fragment getItem(int arg0)
        {
            Fragment f = new MeiNvFragment_V4();
            Bundle b = new Bundle();
            b.putInt(MeiNvFragment.Fragment_Key, arg0);
            f.setArguments(b);
            return f;
        }
        // 指出该Adapter包含Fragment的数目
        @Override
        public int getCount()
        {
            // TODO Auto-generated method stub
            return MeiNvFragment_V4.img_ids.length;
        }
        @Override
        public CharSequence getPageTitle(int position)
        {
            return "第" + (position + 1) + "个美女";
        }
    }
    // 扩展得到自己的SimpleOnPageChangeListener
    class mySimpleOnPageChangeListener extends SimpleOnPageChangeListener
    {
        private ViewPager pager;
        public mySimpleOnPageChangeListener(ViewPager p)
        {
            pager = p;
        }
        public void onPageSelected(int position)
        {
            pager.setCurrentItem(position);
        }
    }
}
/Tab_Nav/res/layout/activity_view_pager.xml文件:

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <android.support.v4.view.PagerTitleStrip
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top" >
    </android.support.v4.view.PagerTitleStrip>
</android.support.v4.view.ViewPager>
启动ViewPagerActivity 后的效果:


正在从第一个美女向第二个美女滑动中。


  相关解决方案