现在的位置: 首页 > 综合 > 正文

ActionBarSherlock与Viewpager及Fragment结合实现仿新闻客户端顶部滑动切换效果

2018年06月05日 ⁄ 综合 ⁄ 共 5809字 ⁄ 字号 评论关闭

ActionBarSherlock与Fragment的结合使用非常广泛,再加上Viewpager的滑动效果,可以实现很多很炫的效果。

MainActivity.java:

public class MainActivity extends SherlockFragmentActivity implements TabListener,OnPageChangeListener{

	/*定义顶部Tab的title*/
	private String[] mTabTitles;
	/*ViewPager对象的引用*/
	private ViewPager mViewpager;
	/*装载Fragment的容器,每一个界面都是一个Fragment*/
	private List<Fragment> mFragment;
	/*ActionBar对象的引用*/
	private ActionBar mActionBar;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		/*从资源文件中获取Tab的体title*/
		mTabTitles = this.getResources().getStringArray(R.array.tab_title);
		
		/*创建一个Fragment集合*/
		mFragment = new ArrayList<Fragment>();
		
		/*获取Viewpager对象*/
		mViewpager = (ViewPager) this.findViewById(R.id.viewPager);
		
		/*设置Adapter*/
		mViewpager.setAdapter(new TabPagerAdapter(this.getSupportFragmentManager(), mFragment));
		
		/*设置viewPager切换的监听*/
		mViewpager.setOnPageChangeListener(this);
		/*获取ActionBar*/
		mActionBar = this.getSupportActionBar();
		/*设置不隐藏title*/
		mActionBar.setDisplayShowTitleEnabled(false);
		/*设置不隐藏Home Logo*/
		mActionBar.setDisplayHomeAsUpEnabled(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 ItemFreagment();
			Bundle args = new Bundle();
			args.putString("arg", mTabTitles[i]);
			fragment.setArguments(args);
			
			mFragment.add(fragment);
		}
	}

	

	public boolean onCreateOptionsMenu(com.actionbarsherlock.view.Menu menu) {

		getSupportMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
		// TODO Auto-generated method stub
		
	}

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

	@Override
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
		/*设置当前选中*/
		mViewpager.setCurrentItem(tab.getPosition());
		
	}

	@Override
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
		// TODO Auto-generated method stub
		
	}

}

适配器TabPagerAdapter.java:

public class TabPagerAdapter extends FragmentStatePagerAdapter {

	/*定义一个Fragment的集合*/
	private List<Fragment> list;
	
	/*构造函数*/
	public TabPagerAdapter(FragmentManager fm,List<Fragment> list) {
		super(fm);
		this.list = list;
		
	}

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

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

}

ItemFragment.java:

public class ItemFreagment extends SherlockFragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

		View rootView =inflater.inflate(R.layout.fragment_item, container, false);
		TextView mTextView = (TextView) rootView.findViewById(R.id.textview);
		
		/*获取Activity传过来的参数*/
		Bundle mBundle = getArguments();
		String title = mBundle.getString("arg");
		
		mTextView.setText(title);
		
		
		return rootView;
	}
	
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
	}
	
	@Override
	public void onPause() {
		// TODO Auto-generated method stub
		super.onPause();
	}
}

activity_main.xml:

<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>

fragment_item.xml:

<?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="fill_parent"
        android:layout_height="fill_parent"
        android:textColor="@android:color/background_dark"
        android:textSize="18sp"
        android:gravity="center"/>

</RelativeLayout>

values/styles.xml:

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
    
    <style name="Theme.ActionBarTab" parent="@style/Theme.Sherlock">
        
        <!-- 去除ActionBar的Divider分割线 
        <item name="actionBarDivider">@null</item>-->
        
        <!-- 设置ActionBar Tab的高度 -->
        <item name="actionBarSize">45dp</item>
        
          <!-- 设置ActionBar Tab字体的样式 -->
        <item name="actionBarTabTextStyle">@style/Widget.Sherlock.ActionBar.TabText</item>
        
        <!-- 设置ActionBar Tab的样式,例如下面的红色指引,Tab之间的间隙等等 -->
        <item name="actionBarTabStyle">@style/Widget.Sherlock.ActionBar.TabView</item>
        
        <!-- 设置ActionBar的样式,这里简单的设置了ActionBar的背景 -->
        <item name="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>
    </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>
    </style> 
</resources>

另外不要忘记修改主题样式!


demo效果展示:

demo下载:http://download.csdn.net/detail/lzm1340458776/7320867

抱歉!评论已关闭.