自定义的带tab的可左右滑动的viewpager之一简单实现

关注

原创最新推荐文章于 2026-09-08 11:34:18 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

利用ViewPager实现可左右滑动的Action Tab 1. ViewPager要点： ViewPager 是一个布局管理类（layout manager），用于提供页面的左右滑动功能，类似于ListView，也有为ViewPager提供数据（Fragment）的 adapter 控制类（FragmentPagerAdapter, FragmentStatePagerAdapter）。ViewPager 经常和 Fragment 一阅读详情

项目大量使用，所以自己封装的带tab的可左右滑动的viewpager，灵活方便。上部为一个自定义的线性布局，下部为viewpager，点击上部自定义的tab下面的viewpager跟着切换，滑动下部的viewpager，上部的自定义的tab背景也跟着变换。效果如下：

实现：

1、activity_main.xml：使用的时候在你需要的地方加入一个线性布局，id为llTabSwipPager(此处必须，除非你修改，下同)

<RelativeLayout 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=".MainActivity" >

    <LinearLayout
        android:id="@+id/llTabSwipPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:orientation="vertical" >
    </LinearLayout>

</RelativeLayout>

2、custom_tab_view.xml：自定义的Tab页面注释部分写在了代码中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/llCustomTabView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/llTab"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:orientation="horizontal" >

        <!--
             <RelativeLayout
            android:id="@+id/tab0"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/bg_view_pager_scroll_selected" >

            <TextView
                android:id="@+id/tv0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:text="TAB0" />
        </RelativeLayout>
        -->

    </LinearLayout>

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

</LinearLayout>

3、还有一些自己用到的fragment布局就不贴了

4、MainActivity.java：使用方法，首先初始化你的fragment，然后拿到llTabSwipPager，最后创建一个TabSwipPager对象，设置第一步创建的fragment为TabSwipPager的数据源即可

package com.ttdevs.customviewpager;

import java.util.ArrayList;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.widget.LinearLayout;

import com.ttdevs.customviewpager.custom.TabSwipPager;

public class MainActivity extends FragmentActivity {

	private LinearLayout llTabSwipPager;
	private TabSwipPager tabSwipPager;

	private ArrayList<Fragment> fragmentsList;
	private String[] tags;

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

	private void initView() {
		initData();

		llTabSwipPager = (LinearLayout) findViewById(R.id.llTabSwipPager);

		tabSwipPager = new TabSwipPager(getApplicationContext(), getSupportFragmentManager(), llTabSwipPager);
		if (!tabSwipPager.setFragmentList(fragmentsList, tags)) {
			System.out.println("初始化失败");
			finish();
		}
	}

	private void initData() {
		fragmentsList = new ArrayList<Fragment>();
		fragmentsList.add(new UserMethedFragment());
		fragmentsList.add(new AFragment());
		fragmentsList.add(new BFragment());
		fragmentsList.add(new CFragment());

		tags = new String[] { "使用方法", "战机A", "战机B", "战机C" };

	}
}

5、自定义部分的代码：

a、TabSwipPager.jaa：

package com.ttdevs.customviewpager.custom;

import java.util.ArrayList;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;

public class TabSwipPager {

	private CustomViewManager customView;

	private Context context;
	private LinearLayout parentView, llTab;
	private FragmentManager fm;
	private ViewPager viewPager;
	private PagerAdapter pagerAdapter;

	public TabSwipPager(Context context, FragmentManager fm, LinearLayout parentView) {
		this.context = context;
		this.fm = fm;
		this.parentView = parentView;
	}

	public boolean setFragmentList(ArrayList<Fragment> fragmentsList, String[] tags) {
		if (tags.length != fragmentsList.size()) {
			return false;
		}

		customView = new CustomViewManager(context, tags);
		llTab = customView.getTabView();
		viewPager = customView.getViewPager();

		pagerAdapter = new PagerAdapter(fm, fragmentsList, viewPager, llTab);
		viewPager.setAdapter(pagerAdapter);

		parentView.addView(customView.getCustomTabView(), new LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.MATCH_PARENT));
		return true;
	}

}

b、PagerAdapter.java

package com.ttdevs.customviewpager.custom;

import java.util.ArrayList;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.LinearLayout;

import com.ttdevs.customviewpager.R;

public class PagerAdapter extends FragmentPagerAdapter implements OnPageChangeListener, OnClickListener {
	private ArrayList<Fragment> fragmentsList;
	private ViewPager viewPager;
	private LinearLayout llTab;

	public PagerAdapter(FragmentManager fm, ArrayList<Fragment> fragments, ViewPager viewPager, LinearLayout llTab) {
		super(fm);
		this.fragmentsList = fragments;
		this.viewPager = viewPager;
		this.llTab = llTab;

		this.viewPager.setOnPageChangeListener(this);
		
		for (int i = 0; i < llTab.getChildCount(); i++) {
			llTab.getChildAt(i).setOnClickListener(this);
		}
	}

	@Override
	public Fragment getItem(int position) {

		// Fragment fragment = new DummySectionFragment();
		// Bundle args = new Bundle();
		// args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position +
		// 1);
		// fragment.setArguments(args);

		return fragmentsList.get(position);
	}

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

	// ******************OnPageChangeListener***************
	@Override
	public void onPageScrollStateChanged(int state) {
		System.out.println("onPageScrollStateChanged:" + state);
	}

	@Override
	public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
		System.out.println("onPageScrolled:" + position + ">>" + positionOffset + ">>" + positionOffsetPixels);
	}

	@Override
	public void onPageSelected(int position) {
		System.out.println("onPageSelected:" + position);
		for (int i = 0; i < llTab.getChildCount(); i++) {
			if (position == i) {
				llTab.getChildAt(i).setBackgroundResource(R.drawable.bg_view_pager_scroll_selected);
			} else {
				llTab.getChildAt(i).setBackgroundResource(R.drawable.bg_view_pager_scroll_unselect);
			}
		}
	}

	// ******************OnPageChangeListener***************

	@Override
	public void onClick(View view) {
		for (int i = 0; i < llTab.getChildCount(); i++) {
			if (view.equals(llTab.getChildAt(i))) {
				llTab.getChildAt(i).setBackgroundResource(R.drawable.bg_view_pager_scroll_selected);
				viewPager.setCurrentItem(i);
			} else {
				llTab.getChildAt(i).setBackgroundResource(R.drawable.bg_view_pager_scroll_unselect);
			}
		}
	}
}

c、CustomViewManager.java

package com.ttdevs.customviewpager.custom;

import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.WindowManager.LayoutParams;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.ttdevs.customviewpager.R;

public class CustomViewManager {
	private Context context;
	private LinearLayout llCustomTabView, llTab;
	private ViewPager viewPager;
	private String[] tags;

	public CustomViewManager(Context context, String[] tags) {
		this.context = context;
		this.tags = tags;
		// 获取全部布局
		llCustomTabView = (LinearLayout) LayoutInflater.from(context).inflate(R.layout.custom_tab_view, null);
		// 拿到存放TAB的布局
		llTab = (LinearLayout) llCustomTabView.findViewById(R.id.llTab);
		viewPager = (ViewPager) llCustomTabView.findViewById(R.id.pager);
		viewPager.setPageMargin(6);
		viewPager.setPageMarginDrawable(android.R.drawable.divider_horizontal_bright);
		
		createCustomView();
	}

	public LinearLayout getCustomTabView() {
		return llCustomTabView;
	}

	public LinearLayout getTabView() {
		return llTab;
	}

	public ViewPager getViewPager() {
		return viewPager;
	}

	private void createCustomView() {
		// 添加TABS
		for (int i = 0; i < tags.length; i++) {
			RelativeLayout tab = new RelativeLayout(context);
			tab.setId(i);
			if (i == 0) {
				tab.setBackgroundResource(R.drawable.bg_view_pager_scroll_selected);
			} else {
				tab.setBackgroundResource(R.drawable.bg_view_pager_scroll_unselect);
			}

			TextView tv = new TextView(context);
			tv.setId(i);
			tv.setTextColor(Color.BLACK);
			tv.setText(tags[i]);

			RelativeLayout.LayoutParams tvlp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
					LayoutParams.WRAP_CONTENT);
			tvlp.addRule(RelativeLayout.CENTER_IN_PARENT);
			tab.addView(tv, tvlp);

			LinearLayout.LayoutParams tablp = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT);
			tablp.weight = 1;
			llTab.addView(tab, tablp);

		}
	}
}

第一次按照自己的需求写一个暂定义为自定义控件的东西吧，竟然一次通过，自己也是很吃惊，以前总要调试几下，小小的激动一下下。细节写的可能不够好，欢迎指教～～