仿网易新闻的ViewpagerIndicator

最新推荐文章于 2021-05-27 06:28:55 发布

原创最新推荐文章于 2021-05-27 06:28:55 发布 · 775 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用ActionBarSherlock和ViewPager实现Android应用中的TabView页面切换功能，包括布局设计、代码实现及遇到的问题解决。通过实践，熟悉了ActionBarSherlock的用法，并成功实现了页面间的数据交互。

以前写过类似的效果,但是是使用viewpagerindicator的开源框架来完成的.

今天刚巧看了一篇博客(http://blog.youkuaiyun.com/xiaanming/article/details/9971721),打算实现一下,顺便也熟悉一下ActionBarSherlock的用法.

使用ViewPagerIndicator的方式可以参考:http://blog.youkuaiyun.com/xiaanming/article/details/10766053

ActionBarSherlock

ActionBar是3.0以后才有的,如果要向下兼容,就要用到ActionBarSherlock的jar包了.下载地址https://github.com/JakeWharton/ActionBarSherlock

ActionBarSherlock的导入和一般lib一样,但是需要注意:V7包的V4包会和ActionBarSherlock的V4包冲突,可以不用V7包.

还有就是所有的style中的theme都要改成Theme.Sherlock前缀的.如下

遇到的问题:MainActivity报错 ======The hierarchy of the type is inconsistent========

原因:在eclipse里建了两个项目，分别是A projiect和B projiect，项目A引用了一些JAR包，然后项目B引用了项目A，但是B没有引用A的JAR包

解决:原来是当前项目的lib中V4包没有build....

开始动工

1.activity布局

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mio.tabviewpage.MainActivity" >

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

</RelativeLayout>

2.activity代码

/**
 * 需要实现两个监听
 * TabListener:				tab改变--->Viewpage改变
 * OnPageChangeListener:	ViewPage改变--->tab改变
 * @author mio
 *
 */
public class MainActivity extends SherlockFragmentActivity implements
		ActionBar.TabListener,OnPageChangeListener {

	private String[] mTabTitles = { "首页", "新闻", "关注", "声音" };
	private ViewPager mViewPager;
	/**
	 * 装载Fragment的容器，我们的每一个界面都是一个Fragment
	 */
	private List<Fragment> mFragmentList;
	private ActionBar mActionBar;

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

	private void init() {
		mViewPager = (ViewPager) findViewById(R.id.vp);
		mFragmentList =  new ArrayList<Fragment>(); 
		mViewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager(),
				mFragmentList));

		// 获取ActionBar实例我们使用getSupportActionBar()方法
		mActionBar = getSupportActionBar();
		// 隐藏Title
		mActionBar.setDisplayShowTitleEnabled(false);
		// 隐藏Home logo
		mActionBar.setDisplayShowHomeEnabled(false);
		// 设置ActionBar的导航模式为Tab
		mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
		// 设置监听
		mViewPager.setOnPageChangeListener(this);

		// 为ActionBar添加Tab并设置TabListener
		// 为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();
			// 将tab的名称传递给Fragment
			Bundle args = new Bundle();
			args.putString("arg", mTabTitles[i]);
			fragment.setArguments(args);

			mFragmentList.add(fragment);
		}

	}

	/**
	 * 点击ActionBar Tab的时候切换不同的Fragment界面
	 */
	@Override
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
		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.Frangment代码

  
    @Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
            Bundle savedInstanceState) {  
          
        View contextView = inflater.inflate(R.layout.fragment_item, container, false);  
        TextView mTextView = (TextView) contextView.findViewById(R.id.textview);  
          
        //获取Activity传递过来的参数  
        Bundle mBundle = getArguments();  
        String title = mBundle.getString("arg");  
          
        mTextView.setText(title);  
          
        return contextView;  
    }  
  
    @Override  
    public void onActivityCreated(Bundle savedInstanceState) {  
        super.onActivityCreated(savedInstanceState);  
    }

4.adapter代码

public class TabPagerAdapter extends FragmentStatePagerAdapter {

	private List<Fragment> list;

	public TabPagerAdapter(FragmentManager fm,List<Fragment> list) {
		super(fm);
		this.list=list;
	}

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

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

}

5.fragment的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="127dp"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

最终效果图: