android viewpager跳转到position android viewpager fragment 替换

转载

mob6454cc6dac54 2024-01-29 01:54:26

文章标签 android viewpager ide 页面切换 文章分类 Android 移动开发

相信各位在开发过程中都经常使用ViewPager和Fragment吧，在使用过程中，你是否对这两个控件的使用能理解透彻？是否知道他们之间事件处理是怎么做的？今天，博主带领大家来了解一下ViewPager+Fragment的每一步操作。

首先我们需要创建主界面布局和新建几个Fragment及对应的布局（博主偷懒，就写了两个为例）。

在主界面布局中添加ViewPager控件

<android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewPager"></android.support.v4.view.ViewPager>

创建Fragment碎片（Fragment中只引用了布局，不做任何的操作，相同的碎片多创建几个）

public class OneFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_one, container, false);
    }

}

接下来创建ViewPager的适配器，这里我们让自定义的适配器继承于FragmentPagerAdapter，并实现如下对应的方法。MyViewPagerAdapter构造器中FragmentManager用来接收碎片管理器，fragments参数用来接收Fragment集合。

public class MyViewPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> mFragments;

    public MyViewPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        mFragments=fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }
    
}

Activity主活动中开始将Fragment加载到页面中

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

List<Fragment> fragments=new ArrayList<Fragment>();
fragments.add(new OneFragment());
fragments.add(new TwoFragment());
MyViewPagerAdapter adapter = new MyViewPagerAdapter(getSupportFragmentManager(), fragments);

mViewPager.setAdapter(adapter);

到这一步为止，运行程序之后发现页面可以进行左右切换了。

接下来让我们添加页面切换的点击按钮，这里我偷懒简单模拟一下。

在主界面布局中ViewPager的上方添加如下内容（文字和指示器）：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="channel1"
            android:id="@+id/tv_channel_1"
            android:textColor="#00f"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="channel2"
            android:id="@+id/tv_channel_2"
            android:textColor="#fff"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:orientation="horizontal">

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00f"
            android:id="@+id/view1"/>

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#fff"
            android:id="@+id/view2"/>

    </LinearLayout>
<android.support.v4.view.ViewPager>.....

在主活动中为ViewPager添加页面切换监听器，实现页面监听。

mViewPager.addOnPageChangeListener(this);//让活动实现ViewPager.OnPageChangeListener接口（重写以下三个方法）

mTVChannel1 = (TextView) findViewById(R.id.tv_channel_1);
mTVChannel2 = (TextView) findViewById(R.id.tv_channel_2);
mView1 = (View) findViewById(R.id.view1);
mView2 = (View) findViewById(R.id.view2);

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
    if (position == 0) {
        mTVChannel1.setTextColor(Color.BLUE);
        mTVChannel2.setTextColor(Color.WHITE);
        mView1.setBackgroundColor(Color.BLUE);
        mView2.setBackgroundColor(Color.WHITE);

    } else if (position == 1) {
        mTVChannel1.setTextColor(Color.WHITE);
        mTVChannel2.setTextColor(Color.BLUE);
        mView1.setBackgroundColor(Color.WHITE);
        mView2.setBackgroundColor(Color.BLUE);
    }
}

@Override
public void onPageScrollStateChanged(int state) {

}

这样运行程序之后会发现当我们页面切换的时候，上面的文字和指示器和颜色会发生变化，当然我这里只是模拟，并没有仔细去设置，如果各位想尝试的，可以通过计算偏移量设置指示器的动画效果。

实现了页面切换改变文字和指示器的效果，但是我们还没有设置点击文字切换页面，我们继续：

为文字添加点击监听事件，在事件中设置如果点击一个文字就设置VIewPager的当前页面为文字对应的页面：

mTVChannel1.setOnClickListener(this);
mTVChannel2.setOnClickListener(this);
// 重写onClick()方法
@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.tv_channel_1:
            mViewPager.setCurrentItem(0);
            break;
        case R.id.tv_channel_2:
            mViewPager.setCurrentItem(1);
            break;
    }
}