Android 开源框架ViewPageIndicator或ActionBarSherlock实现tab滑动分页效果

最新推荐文章于 2021-05-31 17:41:51 发布

原创最新推荐文章于 2021-05-31 17:41:51 发布 · 4.3k 阅读

0 ·

CC 4.0 BY-SA版权

android UI 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何使用ViewPageIndicator和ActionBarSherlock在Android中实现tab滑动分页效果，强调了导入库的注意事项、风格设置以及在不同Android版本上的适配问题。文中详细阐述了两种方法的实现步骤，包括主页面布局、监听事件的设置，以及style的配置。最后，作者推荐使用ViewPageIndicator，并提供了相关的GitHub和下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考自：http://blog.youkuaiyun.com/xiaanming/article/details/9971721

http://blog.youkuaiyun.com/xiaanming/article/details/10766053

博主说的很清楚了，总结几个问题

一，共同的问题

1，项目都需要导入对应的类库，由于类库中包含android-support-v4.jar，所以项目中一定要删除android-support-v4.jar，否则冲突报错。

打开查看添加library界面，会发现你添加的library的路径出现D:/work/...?类似的情况，但是别的工程使用的时候又不会出错。

二，对于使用ActionBarSherlock类库项目的问题

1，在android4.1上面怎么设置style没效果，这个库是在android2.X上面使用ActionBar，android3.0以后就是使用Andriod自带的ActionBar了，所以在android3.0以上使用的style为android自带的style，所以我们要在引用的时候加上android:。

还有必须在values，values-v11，values-v14都如此设置style，并且style样式改成背景白色"@style/Theme.Sherlock.Light"，才是想要的结果。

两个测试机器，对于去除自带的tab蓝色下划线<item name="android:actionBarDivider">@null</item>，一个机器起作用，另外一个不行。

2，在切换横竖屏幕的时候，会由tab效果切换成spinner效果，viewpage效果不变，不太清楚是怎么造成的。

关于ActionBarSherlock类库的项目

1，主页面布局，只有一个viewpager，每个页面fragment加到List，加载到adapter给viewpager

<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"
    android:background="@android:color/white">
    
    <android.support.v4.view.ViewPager    
        android:id="@+id/viewPager"    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content" />   

</RelativeLayout>

2，主页面

其实主要涉及的就是在ViewPager监听方法setOnPageChangeListener中的两个设置

点击Tab的时候切换不同的Fragment界面 mViewPager.setCurrentItem(tab.getPosition());

滑动ViewPager的时候设置相对应的Tab被选中mActionBar.setSelectedNavigationItem(arg0);

package com.example.viewpagerandtabdemo;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.ActionBar.Tab;
import com.actionbarsherlock.app.SherlockFragmentActivity;

public class MainActivity extends SherlockFragmentActivity implements ActionBar.TabListener, OnPageChangeListener{
	/**
	 * 顶部Tab的title
	 */
	private String [] mTabTitles;
	
	/**
	 * ViewPager对象的引用
	 */
	private ViewPager mViewPager;
	
	/**
	 * 装载Fragment的容器，我们的每一个界面都是一个Fragment
	 */
	private List<Fragment> mFragmentList;
	
	/**
	 * ActionBar对象的引用
	 */
	private ActionBar mActionBar;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//从资源文件在获取Tab的title
		mTabTitles = getResources().getStringArray(R.array.tab_title);
		mFragmentList =  new ArrayList<Fragment>();
		
		mViewPager = (ViewPager) findViewById(R.id.viewPager);
		//设置Adapter
		mViewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager(), mFragmentList));
		//设置监听
		mViewPager.setOnPageChangeListener(this);
		
		
		//获取Action实例我们使用getSupportActionBar()方法
		mActionBar = getSupportActionBar();
		
		//隐藏Title
		mActionBar.setDisplayShowTitleEnabled(false);
		//隐藏Home logo
		mActionBar.setDisplayShowHomeEnabled(false);
		//设置ActionBar的导航模式为Tab
		mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
		
		
		//为ActionBar添加Tab并设置TabListener
		for(int i=0; i<mTabTitles.length; i++){
			 ActionBar.Tab tab = mActionBar.newTab();
			 tab.setText(mTabTitles[i]);
			 tab.setTabListener(this);
			 mActionBar.addTab(tab, i);
		}
		
		
		//将Fragment加入到List中，并将Tab的title传递给Fragment
		for(int i=0; i<mTabTitles.length; i++){
			Fragment fragment = new ItemFragment();
			Bundle args = new Bundle();
			args.putString("arg", mTabTitles[i]);
			fragment.setArguments(args);
			
			mFragmentList.add(fragment);
		}
		
	}
	
	

	@Override
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
		//点击ActionBar Tab的时候切换不同的Fragment界面
		mViewPager.setCurrentItem(tab.getPosition());
	}

	@Override
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {

	}

	@Override
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
		
	}
	
	
	@Override
	public void onPageScrollStateChanged(int arg0) {
		
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
		
	}

	@Override
	public void onPageSelected(int arg0) {
		//滑动ViewPager的时候设置相对应的ActionBar Tab被选中
		mActionBar.setSelectedNavigationItem(arg0);
	}


}

3，style

注意，文本不居中，在tabview里加上对旗下元素居中就好了<item name="android:gravity">center</item>

<resources xmlns:android="http://schemas.android.com/apk/res/android">

   

       <style name="Themes.ActionBarTab" parent="@style/Theme.Sherlock.Light">

        <!-- 去除ActionBar的Divider -->
        <item name="actionBarDivider">@null</item> 
		<item name="android:actionBarDivider">@null</item>
        
        <!-- 设置ActionBar Tab的高度 -->
        <item name="actionBarSize">45dip</item>
		<item name="android:actionBarSize">45dip</item>
        
        <!-- 设置ActionBar Tab字体的样式 -->
        <item name="actionBarTabTextStyle">@style/Widget.Sherlock.ActionBar.TabText</item>
		<item name="android:actionBarTabTextStyle">@style/Widget.Sherlock.ActionBar.TabText</item>
        
        <!-- 设置ActionBar Tab的样式,例如下面的红色指引，Tab之间的间隙等等 -->
        <item name="actionBarTabStyle">@style/Widget.Sherlock.ActionBar.TabView</item>
		<item name="android:actionBarTabStyle">@style/Widget.Sherlock.ActionBar.TabView</item>
        
        <!-- 设置ActionBar的样式，这里简单的设置了ActionBar的背景 -->
        <item name="actionBarStyle">@style/Widget.Slider.ActionBar</item>
		<item name="android:actionBarStyle">@style/Widget.Slider.ActionBar</item>
    </style>
    
    
     <style name="Widget.Slider.ActionBar" parent="@style/Widget.Sherlock.ActionBar">  
        <item name="backgroundStacked">@drawable/base_action_bar_bg</item>
		<item name="android:backgroundStacked">@drawable/base_action_bar_bg</item>
    </style>

    <style name="Widget.Sherlock.ActionBar.TabText" parent="android:Widget.Holo.ActionBar.TabText">
        <item name="android:textColor">@drawable/selector_tabtext</item>
        <item name="android:textSize">15sp</item>
        
    </style>

    <style name="Widget.Sherlock.ActionBar.TabView" parent="Widget">
        <item name="android:background">@drawable/tab_indicator</item>
        <item name="android:paddingLeft">8dip</item>
        <item name="android:paddingRight">8dip</item>
        <item name="android:gravity">center</item>
        
    </style> 
   
    
</resources>

关于ViewPageIndicator类库的项目

此类库的demo囊括了几乎所有viewpager会用到的效果，专业

1，主页面布局

除了viewpager，多了一个TabPageIndicator，在页面类中需要把两个关联下就可以了

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

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:background="@drawable/base_action_bar_bg"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

</LinearLayout>

2，主页面

注意这里的setOnPageChangeListener绑定的是TabPageIndicator，而TabPageIndicator和viewpager需要关联好就行了

注意这里不需要ActionBarSherlock类库的项目中的两处tab和viewpager的关联设定了，类库写好了应该，方便

package com.example.viewpageindicator;

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.OnPageChangeListener;
import android.widget.Toast;

import com.viewpagerindicator.TabPageIndicator;

public class MainActivity extends FragmentActivity {
	/**
	 * Tab标题
	 */
	private static final String[] TITLE = new String[] { "头条", "房产", "另一面", "女人",
														"财经", "数码", "情感", "科技" };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//ViewPager的adapter
		FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager());
        ViewPager pager = (ViewPager)findViewById(R.id.pager);
        pager.setAdapter(adapter);

        //实例化TabPageIndicator然后设置ViewPager与之关联
        TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
        indicator.setViewPager(pager);
        
        //如果我们要对ViewPager设置监听，用indicator设置就行了
        indicator.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
//				Toast.makeText(getApplicationContext(), TITLE[arg0], Toast.LENGTH_SHORT).show();
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});
        
	}

	
	/**
	 * ViewPager适配器
	 * @author len
	 *
	 */
    class TabPageIndicatorAdapter extends FragmentPagerAdapter {
        public TabPageIndicatorAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
        	//新建一个Fragment来展示ViewPager item的内容，并传递参数
        	Fragment fragment = new ItemFragment();  
            Bundle args = new Bundle();  
            args.putString("arg", TITLE[position]);  
            fragment.setArguments(args);  
        	
            return fragment;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return TITLE[position % TITLE.length];
        }

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

}

3，style

注意这里只在values中添加style就行，values-v11，values-v14不需要就能实现效果

<style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/tab_indicator</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textSize">14sp</item>
        <item name="android:dividerPadding">8dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">@drawable/selector_tabtext</item>
    </style>

总结：肯定选择ViewPageIndicator了

github地址 ActionBarSherlock https://github.com/JakeWharton/ActionBarSherlock

ViewPagerIndicator https://github.com/JakeWharton/ViewPagerIndicator

demo地址 ActionBarSherlock http://download.youkuaiyun.com/detail/superjunjin/8580595

ViewPagerIndicator http://download.youkuaiyun.com/detail/superjunjin/8580609