码迷，mamicode.com
首页 > 其他好文 > 详细

使用PagerSlidingTabStrip实现顶部导航栏

时间：2018-04-18 21:22:57      阅读：331      评论：0      收藏：0      [点我收藏+]

标签：count()   bst   开发   之间   null   name   监听   接下来   abc   

在开发中，我们有时会遇到顶部导航栏滑动切换页面的设计，如网易新闻。实现的方式有很多种，今天我们使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏。

效果图如下。
技术分享图片

 



PagerSlidingTabStrip是github上的一个开源项目，项目地址如下。
https://github.com/astuetz/PagerSlidingTabStrip

（一）PagerSlidingTabStrip的使用

在使用之前，我们先来看一下PagerSlidingTabStrip中的自定义属性。

[html] view plain copy
 
  1. <declare-styleable name="PagerSlidingTabStrip">  
  2.     <attr name="pstsIndicatorColor" format="color" />  
  3.     <attr name="pstsUnderlineColor" format="color" />  
  4.     <attr name="pstsDividerColor" format="color" />  
  5.     <attr name="pstsIndicatorHeight" format="dimension" />  
  6.     <attr name="pstsUnderlineHeight" format="dimension" />  
  7.     <attr name="pstsDividerPadding" format="dimension" />  
  8.     <attr name="pstsTabPaddingLeftRight" format="dimension" />  
  9.     <attr name="pstsScrollOffset" format="dimension" />  
  10.     <attr name="pstsTabBackground" format="reference" />  
  11.     <attr name="pstsShouldExpand" format="boolean" />  
  12.     <attr name="pstsTextAllCaps" format="boolean" />  
  13. </declare-styleable>  


各属性的详细介绍如下。
pstsIndicatorColor：滑动条的颜色。
pstsIndicatorHeight：滑动条的高度。
pstsUnderlineColor：底部线条的颜色。（底部线条会填充屏幕宽度）
pstsUnderlineHeight：底部线条的高度。
pstsDividerColor：tab之间的竖直分割线的颜色。
pstsDividerPadding：tab之间的竖直分割线，距离顶部和底部的距离，即它的paddingTop和paddingBottom。
pstsTabPaddingLeftRight：单个tab内部的左间距和右间距，即它的paddingLeft和paddingRight。
pstsTabBackground：单个tab的背景。
pstsScrollOffset：当前tab滚动的偏移量。
pstsShouldExpand：设置为ture，每个tab的权重一样，均分屏幕宽度，默认值false。
pstsTextAllCaps：是否将tab中的字母转换成大写，默认值true。

下面，我们将PagerSlidingTabStrip使用到具体项目中。

 

首先将PagerSlidingTabStrip添加到工程module的gradle中。

[html] view plain copy
 
  1. dependencies {  
  2.     compile ‘com.astuetz:pagerslidingtabstrip:1.0.1‘  
  3. }  


接下来添加布局文件。

[html] view plain copy
 
  1. <com.astuetz.PagerSlidingTabStrip xmlns:tab="http://schemas.android.com/apk/res-auto"  
  2.           android:id="@+id/tab"  
  3.           android:layout_width="match_parent"  
  4.           android:layout_height="wrap_content"  
  5.           android:background="#fafafa"  
  6.           android:paddingBottom="10dp"  
  7.           android:paddingTop="10dp"  
  8.           android:textColor="#333333"  
  9.           android:textSize="13sp"  
  10.           tab:pstsDividerColor="@android:color/transparent"  
  11.           tab:pstsIndicatorColor="#ed5955"  
  12.           tab:pstsIndicatorHeight="2dp"  
  13.           tab:pstsShouldExpand="true"  
  14.           tab:pstsTabBackground="@android:color/transparent"  
  15.           tab:pstsUnderlineColor="@android:color/transparent"/>  

 

最后实现逻辑代码。

 

[java] view plain copy
 
  1. package net.csdn.blog.ruancoder;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.support.v4.app.FragmentActivity;  
  6. import android.support.v4.view.ViewPager;  
  7. import android.view.Window;  
  8.   
  9. import com.astuetz.PagerSlidingTabStrip;  
  10.   
  11. public class MainActivity extends FragmentActivity {  
  12.     @Override  
  13.     protected void onCreate(Bundle savedInstanceState) {  
  14.         super.onCreate(savedInstanceState);  
  15.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  16.         setContentView(R.layout.activity_main);  
  17.         final PagerSlidingTabStrip tabStrip = (PagerSlidingTabStrip) findViewById(R.id.tab);  
  18.         ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);  
  19.   
  20.         Fragment[] fragments = {new NewsFragment(), new TechFragment(), new FinanceFragment(), new InternetFragment(), new   
  21.                 PhoneFragment()};  
  22.         String[] titles = {"头条", "科技", "财经", "互联网", "手机"};  
  23.         TabPagerAdapter adapter = new TabPagerAdapter(getSupportFragmentManager(), fragments, titles);  
  24.         viewPager.setAdapter(adapter);  
  25.         tabStrip.setViewPager(viewPager);  
  26.     }  
  27. }  

 

 

Activity中使用到的TabPagerAdapter类：

 

[java] view plain copy
 
  1. package net.csdn.blog.ruancoder;  
  2.   
  3. import android.support.v4.app.Fragment;  
  4. import android.support.v4.app.FragmentManager;  
  5. import android.support.v4.app.FragmentPagerAdapter;  
  6.   
  7. public class TabPagerAdapter extends FragmentPagerAdapter {  
  8.     private Fragment[] mFragments;  
  9.     private String[] mTitles;  
  10.   
  11.     public TabPagerAdapter(FragmentManager fm, Fragment[] fragments, String[] titles) {  
  12.         super(fm);  
  13.         this.mFragments = fragments;  
  14.         this.mTitles = titles;  
  15.     }  
  16.   
  17.     @Override  
  18.     public Fragment getItem(int position) {  
  19.         return mFragments[position];  
  20.     }  
  21.   
  22.     @Override  
  23.     public int getCount() {  
  24.         return mFragments.length;  
  25.     }  
  26.   
  27.     @Override  
  28.     public CharSequence getPageTitle(int position) {  
  29.         return mTitles[position];  
  30.     }  
  31. }  


（二）PagerSlidingTabStrip的源码分析

(1).类的声明。

[java] view plain copy
 
  1. package com.astuetz;  
  2.   
  3. public class PagerSlidingTabStrip extends HorizontalScrollView {  
  4. }  


PagerSlidingTabStrip继承自HorizontalScrillView，当tab数量较多超出屏幕时，可以横向滚动。

(2).构造方法。

[java] view plain copy
 
  1. public PagerSlidingTabStrip(Context context, AttributeSet attrs, int defStyle) {  
  2.         super(context, attrs, defStyle);  
  3.   
  4.         tabsContainer = new LinearLayout(context);  
  5.         tabsContainer.setOrientation(LinearLayout.HORIZONTAL);  
  6.         tabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));  
  7.         addView(tabsContainer);  
  8.   
  9.         // 这里省略了初始化各参数的代码  
  10.   
  11.         rectPaint = new Paint();  
  12.         rectPaint.setAntiAlias(true);  
  13.         rectPaint.setStyle(Style.FILL);  
  14.   
  15.         dividerPaint = new Paint();  
  16.         dividerPaint.setAntiAlias(true);  
  17.         dividerPaint.setStrokeWidth(dividerWidth);  
  18.   
  19.         defaultTabLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);  
  20.         expandedTabLayoutParams = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f);  
  21.     }  


在构造方法中，先是创建了一个水平线性布局tabsContainer，并将其添加到PagerSlidingTabStrip中。因为PagerSlidingTabStrip继承自HorizontalScrillView，而HorizontalScrillView内部只能有一个子View，所以之后的tab都将添加到tabsContainer布局中。

接下来创建了两个画笔rectPaint和dividerPaint，分别用来绘制滑动条和竖直分隔线。

最后创建了两个布局参数LayoutParams，默认为defaultTabLayoutParams，自适应tab的宽度，以及expandedTabLayoutParams，tab均分屏幕宽度。当自定义属性pstsShouldExpand声明为true时，使用expandedTabLayoutParams，相反则使用defaultTabLayoutParams。


(3).setViewPager(ViewPager pager)方法。

 

 

[java] view plain copy
 
  1. public void setViewPager(ViewPager pager) {  
  2.         this.pager = pager;  
  3.   
  4.         if (pager.getAdapter() == null) {  
  5.             throw new IllegalStateException("ViewPager does not have adapter instance.");  
  6.         }  
  7.   
  8.         pager.setOnPageChangeListener(pageListener);  
  9.   
  10.         notifyDataSetChanged();  
  11.     }  

 

 

当我们获取到PagerSlidingTabStrip对象后，会调用它的setViewPager(ViewPager pager)方法。

在该方法内部，为ViewPager对象添加了滑动监听PageListener，并调用了notifyDataSetChanged()方法。


(4).notifyDataSetChanged()方法。

 

[java] view plain copy
 
  1. public void notifyDataSetChanged() {  
  2.   
  3.         tabsContainer.removeAllViews();  
  4.   
  5.         tabCount = pager.getAdapter().getCount();  
  6.   
  7.         for (int i = 0; i < tabCount; i++) {  
  8.   
  9.             if (pager.getAdapter() instanceof IconTabProvider) {  
  10.                 addIconTab(i, ((IconTabProvider) pager.getAdapter()).getPageIconResId(i));  
  11.             } else {  
  12.                 addTextTab(i, pager.getAdapter().getPageTitle(i).toString());  
  13.             }  
  14.   
  15.         }  
  16.   
  17.         updateTabStyles();  
  18.   
  19.         getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {  
  20.   
  21.             @SuppressWarnings("deprecation")  
  22.             @SuppressLint("NewApi")  
  23.             @Override  
  24.             public void onGlobalLayout() {  
  25.   
  26.                 if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {  
  27.                     getViewTreeObserver().removeGlobalOnLayoutListener(this);  
  28.                 } else {  
  29.                     getViewTreeObserver().removeOnGlobalLayoutListener(this);  
  30.                 }  
  31.   
  32.                 currentPosition = pager.getCurrentItem();  
  33.                 scrollToChild(currentPosition, 0);  
  34.             }  
  35.         });  
  36.   
  37.     }  


方法内部，遍历ViewPager的Adapter中的标题，生成Tab并添加到tabsContainer布局中。然后将滑动条滚动到第一个Tab下。

(5).OnPageChangeListener的实现类，PageListener类。

 

 

[java] view plain copy
 
  1. private class PageListener implements ViewPager.OnPageChangeListener {  
  2.         @Override  
  3.         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
  4.             currentPosition = position;  
  5.             currentPositionOffset = positionOffset;  
  6.   
  7.             scrollToChild(position, (int) (positionOffset * tabsContainer.getChildAt(position).getWidth()));  
  8.   
  9.             invalidate();  
  10.   
  11.             // ......  
  12.         }  
  13.   
  14.         @Override  
  15.         public void onPageScrollStateChanged(int state) {  
  16.             if (state == ViewPager.SCROLL_STATE_IDLE) {  
  17.                 scrollToChild(pager.getCurrentItem(), 0);  
  18.             }  
  19.             // ......  
  20.         }  
  21.   
  22.         @Override  
  23.         public void onPageSelected(int position) {  
  24.             // ......  
  25.         }  
  26.     }  


PageListener类监听ViewPager的滑动。

 

这里重点是onPageScrolled()方法，当ViewPager在滑动过程中该方法不断被回调。在其中执行了2行代码，scrollToChild()，移动tab；invalidate()，触发View的onDraw()的调用。

(6).核心方法onDraw()。

[java] view plain copy
 
  1. @Override  
  2.     protected void onDraw(Canvas canvas) {  
  3.         super.onDraw(canvas);  
  4.   
  5.         if (isInEditMode() || tabCount == 0) {  
  6.             return;  
  7.         }  
  8.   
  9.         final int height = getHeight();  
  10.   
  11.         // draw indicator line  
  12.         rectPaint.setColor(indicatorColor);  
  13.   
  14.         // 默认在当前被选中的tab底部绘制滑动条  
  15.         View currentTab = tabsContainer.getChildAt(currentPosition);  
  16.         float lineLeft = currentTab.getLeft();  
  17.         float lineRight = currentTab.getRight();  
  18.   
  19.         // 如果正在滑动，在当前tab和下一个tab之间绘制滑动条  
  20.         if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {  
  21.   
  22.             View nextTab = tabsContainer.getChildAt(currentPosition + 1);  
  23.             final float nextTabLeft = nextTab.getLeft();  
  24.             final float nextTabRight = nextTab.getRight();  
  25.   
  26.             lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset) * lineLeft);  
  27.             lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset) * lineRight);  
  28.         }  
  29.   
  30.         // 绘制滑动条，滑动条宽度为lineRight - lineLeft，高度为indicatorHeight  
  31.         canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint);  
  32.   
  33.         // 绘制底部线条，线条宽度为PagerSlidingTabStrip的宽度，高度为underlineHeight  
  34.         rectPaint.setColor(underlineColor);  
  35.         canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(), height, rectPaint);  
  36.   
  37.         // 在每个tab的右侧，绘制竖直分割线，分割线宽度为dividerWidth，高度为height - dividerPadding * 2  
  38.         dividerPaint.setColor(dividerColor);  
  39.         for (int i = 0; i < tabCount - 1; i++) {  
  40.             View tab = tabsContainer.getChildAt(i);  
  41.             canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(), height - dividerPadding, dividerPaint);  
  42.         }  
  43.     }  


通过在onPageScrolled()回调方法中得到的currentPosition和currentPositionOffset，实时绘制滑动条的位置，实现滑动条跟随手势移动。

最后附上完整工程下载链接。
http://download.csdn.net/detail/ruancoder/9582974

使用PagerSlidingTabStrip实现顶部导航栏

标签：count()   bst   开发   之间   null   name   监听   接下来   abc   

原文地址：https://www.cnblogs.com/wushanmanong/p/8877210.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！