首页 > 代码库 > 【Android界面实现】使用ScrollingTabsView实现有滑动标签的ViewPager效果
【Android界面实现】使用ScrollingTabsView实现有滑动标签的ViewPager效果
转载自:http://blog.csdn.net/zhaokaiqiang1992/article/details/40378285
在前面的文章中,我们使用支持包里面的PagerTabStrip实现了有滑动标签的viewPager效果,今天,再给大家介绍另外一种开源项目,来实现类似的效果。
在这篇文章中,我们将使用第三方开源项目ViewPagerExtensions实现。
先看效果
ViewPagerExtensions的github地址:https://github.com/astuetz/ViewPagerExtensions
首先给出整个项目的目录结构
在这个demo之中,我直接把资源文件全部放在了项目之中,方便使用。
首先,我们看一下布局文件activity_main.xml。
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- xmlns:app="http://schemas.android.com/com.heli17.tradeshowcloud"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <com.astuetz.viewpager.extensions.ScrollingTabsView
- android:id="@+id/scrolling_tabs"
- android:layout_width="fill_parent"
- android:layout_height="38dp"
- android:background="@drawable/tab_unselected_holo"
- app:dividerDrawable="@android:color/white" />
- <android.support.v4.view.ViewPager
- android:id="@+id/pager"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent" />
- </LinearLayout>
我们在布局文件中,添加了一个scrollingTabsView控件,这个就是上面指示器的自定义控件。
布局写好了之后,我们就可以在代码里面设置适配器了。
代码如下:
- package com.example.scrollingtabsdemo;
- import java.util.ArrayList;
- import android.app.Activity;
- 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.FragmentStatePagerAdapter;
- import android.support.v4.view.ViewPager;
- import android.view.View;
- import android.widget.Button;
- import com.astuetz.viewpager.extensions.ScrollingTabsView;
- import com.astuetz.viewpager.extensions.TabsAdapter;
- public class MainActivity extends FragmentActivity {
- private ViewPager viewPager;
- private ScrollingTabsAdapter scrollingTabsAdapter;
- private ScrollingTabsView scrollingTabs;
- private FragsAdapter pagerAdapter;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- viewPager = (ViewPager) findViewById(R.id.pager);
- // 设置适配器
- pagerAdapter = new FragsAdapter(getSupportFragmentManager());
- viewPager.setAdapter(pagerAdapter);
- // 设置缓存fragment的数量
- viewPager.setOffscreenPageLimit(2);
- viewPager.setCurrentItem(0);
- viewPager.setPageMargin(4);
- scrollingTabsAdapter = new ScrollingTabsAdapter(this);
- // 设置滑动标签的适配器和宿主ViewPager
- scrollingTabs = (ScrollingTabsView) findViewById(R.id.scrolling_tabs);
- scrollingTabs.setAdapter(scrollingTabsAdapter);
- scrollingTabs.setViewPager(viewPager);
- }
- /**
- * ViewPager适配器
- *
- * @author zhaokaiqiang
- *
- */
- private class FragsAdapter extends FragmentStatePagerAdapter {
- private ArrayList<Fragment> fragments;
- public FragsAdapter(FragmentManager fm) {
- super(fm);
- fragments = new ArrayList<Fragment>();
- for (int i = 0; i < scrollingTabsAdapter.mTitles.length; i++) {
- fragments.add(new MyFragment(i));
- }
- }
- @Override
- public int getCount() {
- return fragments.size();
- }
- @Override
- public Fragment getItem(int position) {
- return fragments.get(position);
- }
- }
- /**
- * 滑动标签适配器
- *
- * @author zhaokaiqiang
- *
- */
- private class ScrollingTabsAdapter implements TabsAdapter {
- private Activity mContext;
- public String[] mTitles = { "首页", "推荐", "最新", "娱乐", "设置" };
- public ScrollingTabsAdapter(Activity ctx) {
- this.mContext = ctx;
- }
- @Override
- public View getView(int position) {
- Button tab = (Button) mContext.getLayoutInflater().inflate(
- R.layout.tab_scrolling, null);
- tab.setText(mTitles[position]);
- return tab;
- }
- }
- }
在代码里面,我们需要设置两个适配器,一个是ViewPager的,用来更换显示的fragment,另外一个就是上面滑动的tab布局的,用来控制每一个tab显示的布局,在getView方法里面返回。
这里的R.layout.tab_scrolling是自定义的一个布局,代码如下:
- <?xml version="1.0" encoding="utf-8"?>
- <Button xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="0dp"
- android:layout_height="wrap_content"
- android:background="@drawable/tab_holo"
- android:gravity="center"
- android:paddingBottom="8dp"
- android:paddingLeft="30dip"
- android:paddingRight="30dip"
- android:paddingTop="8dp"
- android:textColor="@android:color/holo_blue_light"
- android:textSize="16sp" />
大家可以根据自己的需求进行更改。
这种滑动的tab适合界面比较多的情况,所以在Viewpagr的适配器的选择上使用的是FragmentPagerStateAdapter,如果滑动的界面在3个或者3个以下,推荐使用FixedTabsView,使用方法和这个完全一样,另外,ViewPager的适配器换成FragmentPagerAdapter比较合适。
这个项目的demo的github地址:https://github.com/ZhaoKaiQiang/ScrollingTabsDemo
【Android界面实现】使用ScrollingTabsView实现有滑动标签的ViewPager效果