android SlidingTabLayout实现ViewPager页卡滑动效果

来源：互联网发布：node.js安装编辑：程序博客网时间：2024/05/19 13:30

先来张效果图(可以滑动切换页卡)

主页面布局文件 remind_auction_new_list.xml :

主页面代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
publicclass MyRemindAuctionNewListActivity extendsActionBarActivity implementsIInit {
 
    privateSlidingTabLayout mSlidingTabLayout;
    privateViewPager mViewPager;
 
    privateRemindAdapter mRemindAdapter;
 
    @Override
    protectedvoid onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.remind_auction_new_list);
 
        init();
    }
 
    @Override
    publicvoid init() {
        ActionBarUtil.setup(this, R.string.my_remind);
 
        mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.stl_square);
        mViewPager =(ViewPager)findViewById(R.id.vp_square);
 
        // 设置ViewPager属性
        mRemindAdapter = newRemindAdapter(getSupportFragmentManager(), this);
        mViewPager.setOffscreenPageLimit(2);
        mViewPager.setAdapter(mRemindAdapter);
 
        // 定义 SlidingTabLayout
        mSlidingTabLayout.setDistributeEvenly(true);
        mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.primary));
        mSlidingTabLayout.setBackgroundColor(getResources().getColor(R.color.white));
        mSlidingTabLayout.setCustomTabView(R.layout.view_tab, R.id.tv_text);
        mSlidingTabLayout.setViewPager(mViewPager);// 加载ViewPager
 
    }
 
}

为ViewPager添加多个页卡的Adapter:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
publicclass RemindAdapter extendsFragmentStatePagerAdapter {
 
    privateString[] titles;
    privateContext ctx;
 
    publicRemindAdapter(FragmentManager fm, Context ctx) {
        super(fm);
        this.ctx = ctx;
        titles = ctx.getResources().getStringArray(R.array.remind_type);
    }
 
    @Override
    publicFragment getItem(intposition) {
        if(position == 0) {//专场提醒
            returnMyRemindAuctionListFragment.newInstance(0);
        }else{//卖家提醒
            returnMyRemindSallerListFragment.newInstance(1);
        }
    }
 
    @Override
    publicCharSequence getPageTitle(intposition) {
        returntitles[position];
    }
 
    @Override
    publicint getCount() {
        returntitles.length;
    }
}

每个页卡实际内容的Fragment:

publicclass MyRemindAuctionListFragment extendsBaseFragment implementsIPagination, IResponseHandler, SwipeRefreshLayout.OnRefreshListener {
 
    privateint mTag;
    privateListView mListView;//拍场列表
    privateListAdapter mAdapter;//拍场适配器
    privateMyRemindAuctionNewListActivity mActivity;
 
    //下拉刷新组件
    privateSwipeRefreshLayout mSwipeRefreshLayout;
    privateAuctionInfoViewModel mViewModel = newAuctionInfoViewModel();
    privateTextView mEmptyView;   // 空白视图
 
    publicstatic MyRemindAuctionListFragment newInstance(inttag) {
        MyRemindAuctionListFragment f = newMyRemindAuctionListFragment();
        f.mTag = tag;
        returnf;
    }
 
    @Override
    publicView onCreateView(LayoutInflater inflater, @NullableViewGroup container, @NullableBundle savedInstanceState) {
        View v = inflater.inflate(R.layout.remind_auction_list, null);
 
        mSwipeRefreshLayout = $(v, R.id.srl_refresh);
        mListView = $(v, R.id.remind_auction_listview);
        mEmptyView = $(v, R.id.tv_remind_warning);
 
        mSwipeRefreshLayout.setOnRefreshListener(this);
        mSwipeRefreshLayout.setColorSchemeResources(R.color.background_blue_standard, R.color.white, R.color.background_blue_standard, R.color.white);
        fetchData(FIRST);
 
        returnv;
    }
 
    @Override
    publicvoid onAttach(Activity activity) {
        super.onAttach(activity);
 
        if(activity instanceofMyRemindAuctionNewListActivity) {
            mActivity = ((MyRemindAuctionNewListActivity) activity);
        }
    }
 
    @Override
    publicvoid fetchNewData(inttag) {
        mViewModel.increasePageIndex();
        fetchData(FIRST);
    }
 
    @Override
    publicvoid fetchData(inttag) {
        mActivity.toggleProgress(true);
        GetMyRemindAuctionListParam param = newGetMyRemindAuctionListParam(Data.getUserID(), mViewModel.getPageIndex(), Data.PAGE_SIZE_MEDIUM);
        AuctionApi.getMyRemindAuctionList(this, param);
    }
 
    @Override
    publicvoid updateUI(Object response, inttag) {
        mActivity.toggleProgress(false);
        mSwipeRefreshLayout.setRefreshing(false);
 
        mViewModel.inflate(response);
 
        if(mAdapter == null) {
 
            mAdapter = newListAdapter(mActivity, mViewModel.getList(), R.layout.item_list_remind_auction) {
                @Override
                protectedvoid onBind(intposition, AuctionInfoViewModel item, ViewHolder holder) {
                    holder.setImageUrl(R.id.head_icon, item.getImageUrl());
                    holder.setText(R.id.title, item.getAuctionIDStr());
                    holder.setText(R.id.sub_title, item.getAuctionName());
                    holder.setText(R.id.tv_auction_status, item.getStatusStr());
                    ((TextView) holder.get(R.id.tv_auction_status)).setTextColor(getResources().getColor(item.getColor()));
                }
            };
 
            mListView.setAdapter(mAdapter);
            mEmptyView.setText(R.string.notice_auction_no_remind);
            mEmptyView.setGravity(Gravity.CENTER);
            mListView.setEmptyView(mEmptyView);
 
            /**
             *  上拉更多
             */
            mListView.setOnScrollListener(newAbsListView.OnScrollListener() {
                @Override
                publicvoid onScrollStateChanged(AbsListView view, intscrollState) {
                    switch(scrollState) {
                        caseSCROLL_STATE_IDLE:
 
                            if(mListView.getLastVisiblePosition() == mViewModel.getList().size() - 1) {
                                if(!mViewModel.isComplete()) {
                                    fetchNewData(FIRST);
                                }
                            }
                            break;
                    }
                }
 
                @Override
                publicvoid onScroll(AbsListView view, intfirstVisibleItem, intvisibleItemCount, inttotalItemCount) {
                }
            });
        }else{
            mAdapter.notifyDataSetChanged();
        }
 
        mListView.setOnItemClickListener(newonItemClickListener());
    }
 
    @Override
    publicvoid onRefresh() {
        refresh();
    }
 
    @Override
    publicvoid refresh() {// 重置页索引、适配器
        mViewModel.reset();
        fetchData(FIRST);
    }
 
    @Override
    publicint getTotal() {
        if(mAdapter == null)return0;
        returnmAdapter.getCount();
    }
 
    /**
     * 监听事件,以此启动不同页面
     */
    classonItemClickListener implementsAdapterView.OnItemClickListener {
        @Override
        publicvoid onItemClick(AdapterView<!--?--> parent, View view, intposition, longid) {
 
            inttemp = mViewModel.getList().get(position).getStatus();
            intauctionID = mViewModel.getList().get(position).getAuctionID();
 
            Intent mIntent = newIntent();
            switch(temp) {
                case1:
                    mIntent.setClass(getActivity(), AuctionPreviewActivity.class);
                    break;
                case2:
                    mIntent.setClass(getActivity(), AuctionPreviewActivity.class);
                    break;
                case3:
                    mIntent.setClass(getActivity(), AuctionPreviewActivity.class);
                    break;
                default:
                    break;
            }
            mIntent.putExtra(EnumIntentKey.AUCTION_ID.toString(), auctionID);
            startActivity(mIntent);
        }
    }
}
</auctioninfoviewmodel></auctioninfoviewmodel>


最近在使用ActionBar的时候，如果使用的是最新版V7包或者最新的SDK平台，就会发现 ActionBar的导航功能已经不建议使用了。主要的原因是ActionBar自带Tab导航自定义性差（只能通过style修改），而且不再建议使用ActionBar。SlidingTabLayout就是ActionBar导航的替代品，使用它可以轻松的实现导航功能。

使用SlidingTabLayout需要准备2个类，分别是 SlidingTabLayout，与SlidingTabStrip。点击下载 ，放进项目中时只用修改下包名即可。
SlidingTabLayout主要配合ViewPager实现Tab导航，且需要在ActionBarActivity中使用，具体代码如下：
[java] view plaincopy
public class MainActivity extends ActionBarActivity {  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        ViewPager pager= (ViewPager) findViewById(R.id.pager);  
        SlidingTabLayout tab= (SlidingTabLayout) findViewById(R.id.tab);  
  
        MyAdapte adapter= new MyAdapte();  
        pager.setAdapter(adapter);  
        tab.setViewPager(pager);  
    }  
  
    int[] colors={0xFF123456,0xFF654321,0xFF336699};  
  
    class MyAdapte extends PagerAdapter{  
        String[] titles={"AA","BB","CC"};  
  
        ArrayList<LinearLayout> layouts=new ArrayList<LinearLayout>();  
        MyAdapte() {  
  
            for (int i = 0; i < 3; i++) {  
                LinearLayout l=new LinearLayout(MainActivity.this);  
                l.setBackgroundColor(colors[i]);  
                l.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));  
                layouts.add(l);  
            }  
  
        }  
  
        @Override  
        public int getCount() {  
            return layouts.size();  
        }  
  
        @Override  
        public boolean isViewFromObject(View view, Object o) {  
            return view==o;  
        }  
  
        @Override  
        public Object instantiateItem(ViewGroup container, int position) {  
            LinearLayout l=layouts.get(position);  
            container.addView(l);  
            return l;  
        }  
  
        @Override  
        public void destroyItem(ViewGroup container, int position, Object object) {  
            container.removeView(layouts.get(position));  
        }  
<span style="white-space:pre">    </span>//Tab上显示的文字  
        @Override  
        public CharSequence getPageTitle(int position) {  
            return titles[position];  
        }  
    }  
}  
布局如下：
[java] view plaincopy
<LinearLayout 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:orientation="vertical"  
    tools:context=".MainActivity">  
  
    <com.example.wanggang.slindingtablayouttest001.SlidingTabLayout  
        android:id="@+id/tab"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content" />  
  
    <android.support.v4.view.ViewPager  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:id="@+id/pager" />  
</LinearLayout>  

运行效果如下：
       
如果要修改 选中效果 的颜色,或者加上选中颜色过度效果，或者 分割线的颜色，可以为 SlidingTabLayout设置属性
[java] view plaincopy
tab.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {  
            @Override  
            public int getIndicatorColor(int position) {  
                return colors[position];//每个选项卡所对应的颜色  
            }  
<span style="white-space:pre">    </span>    //分割线颜色  
            @Override  
            public int getDividerColor(int position) {  
                return 0x00FFFFFF;  
            }  
        });  
效果如下:


根据以上的运行效果可以看出，每个Tab上面显示的内容都是文本。如果要显示图片，就需要将图片变成  ImageSpan，通过PagerAdapter  的 getPageTitle() 返回到 SlidingTabLayout。
[java] view plaincopy
<span style="white-space:pre">    </span>int[] imageResId = {  
                R.drawable.ic_launcher,  
                R.drawable.ic_launcher,  
                R.drawable.ic_launcher  
        };  
  
        @Override  
        public CharSequence getPageTitle(int position) {  
            Drawable image = getResources().getDrawable(imageResId[position]);  
            image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());  
            SpannableString sb = new SpannableString(" ");  
            ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);  
            sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
            return sb;  
            //return titles[position];  
        }  

  但是由于SlidingTabLayout自带的TextView会调用 setAllCaps(true)，会取消所有的 ImageSpan 的效果。所以需要自定义TabView。
res/layout/custom_tab.xml
[java] view plaincopy
<TextView xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:textSize="12sp"  
    android:gravity="center"  
    android:textStyle="bold"  
    android:padding="16dp" />  
然后在 tab.setViewPager(pager) 之前调用 tab.setCustomTabView(R.layout.custom_tab,0) 设置自定义TabView
[java] view plaincopy
tab.setCustomTabView(R.layout.custom_tab,0);  
tab.setViewPager(pager);  

运行效果如下：

最后，我们会发现，所有的TabView都没有铺满屏幕宽度。如果要每个TabView都平分屏幕宽度，只需在自定义的TextView 上加上权重属性即可。
[java] view plaincopy
<TextView xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="0dp"  
    android:layout_weight="1"  
    android:layout_height="wrap_content"  
    android:textSize="12sp"  
    android:gravity="center"  
    android:textStyle="bold"  
    android:padding="16dp" />  

效果如下：


源码下载

0 0