Android ViewPager + Fragment 自定义滑动标签

最新推荐文章于 2021-05-26 20:00:43 发布
原创 最新推荐文章于 2021-05-26 20:00:43 发布 · 544 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android #View

本文介绍了如何使用Fragment、ViewPager和HorizontalScrollView创建一个简单的分类导航页。通过自定义View，实现滑动标签的功能，包括在ScrollView中添加TextView作为TabIndicator，并实现了线的动态移动效果。提供了一个GitHub上的Demo链接供参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


Fragment+ViewPager+HorizontalScrollView

简单的分类导航页实现

效果图：


下面的是自定义的View

public class TabPageIndicator extends HorizontalScrollView implements ViewPager.OnPageChangeListener {

    /**
     * attrs
     */
    private int mTabPaddingLeft=16;
    private int mTabPaddingRight=16;

    private int mTextColor= Color.BLACK;
    private int mSelectTextColor=Color.RED;
    private int mTextSize=10;

    private int mCurrentPosition;
    private int mSelectPosition;


    private int mTabCount;

    private float mOffset;

    private Paint mSelectLinePaint;
    private int mLineColor=Color.RED;
    private int mLineHeight=4;


    /**
     * Horizontal LinearLayout;
     */
    private LinearLayout mLinearLayout;

    private ViewPager mPager;

    private ViewPager.OnPageChangeListener mListener;

    public TabPageIndicator(Context context) {
        this(context,null);
    }

    public TabPageIndicator(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }

    public TabPageIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setFillViewport(true);//子控件不满全屏时，设置ScrollView 全屏
        setWillNotDraw(false);//取消重绘的Tag ？
        initView(context);

        mSelectLinePaint=new Paint();
    }

    private void initView(Context context) {
        mLinearLayout=new LinearLayout(context);
        mLinearLayout.setOrientation(LinearLayout.HORIZONTAL);
        mLinearLayout.setLayoutParams(new ViewGroup.LayoutParams
                (ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT));
        mLinearLayout.setGravity(Gravity.CENTER_VERTICAL);

        addView(mLinearLayout);

    }


    /**
     * Indicator 添加ViewPager 关联
     * @param pager
     */
    public void setViewPager(ViewPager pager){
        this.mPager=pager;

        if (mPager!=null)
            mPager.setOnPageChangeListener(this);

        notifyDataSetChange();

    }

    private void notifyDataSetChange() {
        mLinearLayout.removeAllViews();
        PagerAdapter adapter = mPager.getAdapter();
        mTabCount = adapter.getCount();

        for (int i=0;i<mTabCount;i++){
            CharSequence pageTitle = adapter.getPageTitle(i);
            addTab(pageTitle,i);
        }

        getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }

                mCurrentPosition = mPager.getCurrentItem();
                mOffset=0;
                scrollToChild();
            }
        });

    }

    private void addTab(CharSequence pageTitle, final int position) {
        TextView tabView=new TextView(getContext());
        if (position==mSelectPosition){
            tabView.setTextColor(mSelectTextColor);
        }else {
            tabView.setTextColor(mTextColor);
        }

        tabView.setTextSize(TypedValue.COMPLEX_UNIT_PX,mTextSize);
        tabView.setText(pageTitle);
        tabView.setPadding(mTabPaddingLeft,0,mTabPaddingRight,0);

        mLinearLayout.addView(tabView,position);

        tabView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                mPager.setCurrentItem(position);
                updateTextSelectState(position);
            }
        });

    }


    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if (mListener!=null){
            mListener.onPageScrolled(position,positionOffset,positionOffsetPixels);
        }
        mCurrentPosition=position;
        mOffset=positionOffset;

        /**
         * 下方的两个方法注意顺序
         */

        scrollToChild();
        invalidate();


    }

    @Override
    public void onPageSelected(int position) {
        if (mListener!=null){
            mListener.onPageSelected(position);
        }

        updateTextSelectState(position);

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (mListener!=null){
            mListener.onPageScrollStateChanged(state);
        }
    }

    private void scrollToChild() {
        int measuredWidth = this.getMeasuredWidth();
        View tabView = mLinearLayout.getChildAt(mCurrentPosition);
        int width = tabView.getWidth();
        float offset = width * mOffset;
        int left = tabView.getLeft();
        int scrollWitch= (int) (left-measuredWidth/2 + offset);
        smoothScrollTo(scrollWitch,0);


    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (mTabCount==0){
            return;
        }
        mSelectLinePaint.setAntiAlias(true);
        mSelectLinePaint.setColor(mLineColor);


        View currentTab = mLinearLayout.getChildAt(mCurrentPosition);
        float lineLeft=currentTab.getLeft();
        float lineRight=currentTab.getRight();

        if (mOffset>0f && mCurrentPosition<mTabCount-1){
            View nextTab = mLinearLayout.getChildAt(mCurrentPosition + 1);
//            lineLeft=nextTab.getLeft()*mOffset-(1f-mOffset)*currentTab.getLeft();
//            lintRight=nextTab.getRight()*mOffset-(1f-mOffset)*currentTab.getRight();

            final float nextTabLeft = nextTab.getLeft();
            final float nextTabRight = nextTab.getRight();

            lineLeft = (mOffset * nextTabLeft + (1f - mOffset) * lineLeft);
            lineRight = (mOffset * nextTabRight + (1f - mOffset) * lineRight);
        }

        canvas.drawRect(lineLeft,getMeasuredHeight()-mLineHeight,lineRight,getMeasuredHeight(),mSelectLinePaint);

    }

    public void updateTextSelectState(int position){
        if (mTabCount==0){
            return;
        }

        TextView lastSelectView = (TextView) mLinearLayout.getChildAt(mSelectPosition);
        lastSelectView.setTextColor(mTextColor);
        TextView currentSelectView = (TextView) mLinearLayout.getChildAt(position);
        currentSelectView.setTextColor(mSelectTextColor);
        mSelectPosition=position;

    }

    public void setTextSize(int textSize){
        this.mTextSize=textSize;
    }

    public void setTabPadding(int tabPadding){
        this.mTabPaddingLeft=tabPadding;
        this.mTabPaddingRight=tabPadding;
    }


}

首先是添加TabIndicator和ViewPager的关联，新建TextView添加到ScrollView的子View 水平线性布局里面，并设置TextView的样式

 /**
     * Indicator 添加ViewPager 关联
     * @param pager
     */
    public void setViewPager(ViewPager pager){
        this.mPager=pager;

        if (mPager!=null)
            mPager.setOnPageChangeListener(this);

        notifyDataSetChange();

    }

    /**
     * 新建Tab加入线性布局里面
     */
    private void notifyDataSetChange() {
        mLinearLayout.removeAllViews();
        PagerAdapter adapter = mPager.getAdapter();
        mTabCount = adapter.getCount();

        for (int i=0;i<mTabCount;i++){
            CharSequence pageTitle = adapter.getPageTitle(i);
            addTab(pageTitle,i);
        }

        getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }

                mCurrentPosition = mPager.getCurrentItem();
                mOffset=0;
                scrollToChild();
            }
        });

    }

    private void addTab(CharSequence pageTitle, final int position) {
        TextView tabView=new TextView(getContext());
        if (position==mSelectPosition){
            tabView.setTextColor(mSelectTextColor);
        }else {
            tabView.setTextColor(mTextColor);
        }

        tabView.setTextSize(TypedValue.COMPLEX_UNIT_PX,mTextSize);
        tabView.setText(pageTitle);
        tabView.setPadding(mTabPaddingLeft,0,mTabPaddingRight,0);

        mLinearLayout.addView(tabView,position);

        tabView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                mPager.setCurrentItem(position);
                updateTextSelectState(position);
            }
        });

    }


重写Viewpager的滚动事件，同时tab 超过中间位置时ScrollView也一起滚蛋

invalidate() 不断重绘，画下面的那条线，看着那根线也一起移动

<pre name="code" class="java">@Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if (mListener!=null){
            mListener.onPageScrolled(position,positionOffset,positionOffsetPixels);
        }
        mCurrentPosition=position;
        mOffset=positionOffset;

        /**
         * 下方的两个方法注意顺序
         */

        scrollToChild();
        invalidate();


    }

    @Override
    public void onPageSelected(int position) {
        if (mListener!=null){
            mListener.onPageSelected(position);
        }

        updateTextSelectState(position);

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (mListener!=null){
            mListener.onPageScrollStateChanged(state);
        }
    }

ScrollView 滚动

 private void scrollToChild() {
        int measuredWidth = this.getMeasuredWidth();
        View tabView = mLinearLayout.getChildAt(mCurrentPosition);
        int width = tabView.getWidth();
        float offset = width * mOffset;
        int left = tabView.getLeft();
        int scrollWitch= (int) (left-measuredWidth/2 + offset);
        smoothScrollTo(scrollWitch,0);


    }

画下面那条线

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (mTabCount==0){
            return;
        }
        mSelectLinePaint.setAntiAlias(true);
        mSelectLinePaint.setColor(mLineColor);


        View currentTab = mLinearLayout.getChildAt(mCurrentPosition);
        float lineLeft=currentTab.getLeft();
        float lineRight=currentTab.getRight();

        if (mOffset>0f && mCurrentPosition<mTabCount-1){
            View nextTab = mLinearLayout.getChildAt(mCurrentPosition + 1);
//            lineLeft=nextTab.getLeft()*mOffset-(1f-mOffset)*currentTab.getLeft();
//            lintRight=nextTab.getRight()*mOffset-(1f-mOffset)*currentTab.getRight();

            final float nextTabLeft = nextTab.getLeft();
            final float nextTabRight = nextTab.getRight();

            lineLeft = (mOffset * nextTabLeft + (1f - mOffset) * lineLeft);
            lineRight = (mOffset * nextTabRight + (1f - mOffset) * lineRight);
        }

        canvas.drawRect(lineLeft,getMeasuredHeight()-mLineHeight,lineRight,getMeasuredHeight(),mSelectLinePaint);

    }



Activity 里面的很简单，就不粘贴了，直接看Demo吧！


Demo地址：https://github.com/limushan/TabPageIndicator


https://github.com/astuetz/PagerSlidingTabStrip 这是一个大神写的Demo 借鉴了里面的思路并且精简了一下，一般我们可能用不到他写的这么多功能，
















                

        

    

    
  



    



                



	

		

			

				
					
Android viewpager+fragment 自定义滑动标签

				
			

			

				

					leo_viv的专栏
				

				

					02-22
					
					449
					
				

			

		

		

			
				
参考自：http://blog.csdn.net/airk000/article/details/37818335
一、自定义控件PagerSlidingTab.java内容如下：
package com.leo.viewpagerfragment;


import android.content.Context;
import android.graphics.Canvas;
i

			
		

	



                

            
              



	

		

			

				
					
android实现滑动标签页效果

				
			

			

				

					一直很安静的博客
				

				

					04-27
					
					1280
					
				

			

		

		

			
				
实现效果：

实现功能：

ViewPager+Fragment实现加载界面
SQLite数据获取并显示到ListView上
ListView的item监听并携带数据跳转到其他界面
使用SharedPreference存储部分测试数据

实现过程：
各方法和变量的作用请详见代码注释。

listview的数据显示请见Android Studio获取SQLite数据并显示到ListView上
Fra...

			
		

	



              


  
              

                


	

		

			

				
					
自定义viewpager的顶部标签栏

				
			

			

				

					01-13
				

			

		

		

			
				
viewpager顶部标签栏，效果类似网易新闻的客户端

			
		

	





	

		

			

				
					
自定义ViewPager标签条

				
			

			

				

					MaPengHao的专栏
				

				

					09-29
					
					447
					
				

			

		

		

			
				
自定义这个标签条的初衷在于我想让ViewPager的标签条不滑出屏幕之外，我记得之前有过一个属性设置了就可以了，但是我现在找不到了...于是我就费劲的定义了一个，在此记录下来。
首先，看布局：

xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="matc

			
		

	



		

			
		



	

		

			

				
					
自定义滚动标签

				
			

			

				

					ZhangHaoChuanBK的博客
				

				

					12-15
					
					417
					
				

			

		

		

			
				
自动滚动标签

			
		

	





	

		

			

				
					
自定义的带tab的可左右滑动的viewpager之一 简单实现

				
			

			

				

					ttdevs
				

				

					08-25
					
					2886
					
				

			

		

		

			
				
自己封装的带tab的可左右滑动的viewpager，灵活方便。上部为一个自定义的线性布局，下部为viewpager，点击上部自定义的tab下面的viewpager跟着切换，滑动下部的viewpager，上部的自定义的tab背景也跟着变换。

			
		

	





	

		

			

				
					
Android ViewPager + Fragment实现滑动页面效果

				
			

			

				

					01-20
				

			

		

		

			
				
在Android应用开发中，`ViewPager` 是一个非常重要的组件，它允许用户通过左右滑动来浏览多个页面。结合`Fragment`，我们可以创建出一个动态、交互性强的滑动页面效果，这种技术常用于构建诸如相册、轮播图或者Tab...

			
		

	





	

		

			

				
					
Android实现ViewPager+Fragment左右滑动

				
			

			

				

					03-09
				

			

		

		

			
				
在Android开发中，`ViewPager`和`Fragment`的结合使用是一种常见的实现屏幕间左右滑动切换的机制。这种设计模式可以提供高效的用户体验，使得用户在多个内容之间进行平滑的过渡，常见于应用的引导页、TabLayout或者...

			
		

	





	

		

			

				
					
viewpager+fragment循环滑动

				
			

			

				

					08-24
				

			

		

		

			
				
在Android开发中，`ViewPager`和`Fragment`的结合使用是一种常见的实现页面滑动切换的手段，尤其适用于展示多个相似内容的场景，如轮播图、应用的引导页等。`ViewPager`允许用户左右滑动来浏览不同的`Fragment`，而`...

			
		

	





	

		

			

				
					
android 中viewpager+fragment仿微信底部TAG完美渐变

				
			

			

				

					08-30
				

			

		

		

			
				
在Android开发中，为了实现类似微信底部标签栏（TAG）的动态渐变效果，我们可以结合使用ViewPager和Fragment。这个功能让应用的用户界面更加现代化和交互性更强，为用户提供更好的体验。下面我们将详细讨论如何在...

			
		

	





	

		

			

				
					
安卓FragmentTab选项卡相关-页卡滑动标题固定位置以标题颜色与下划线表示当前页卡所在位置.rar

				
			

			

				

					07-29
				

			

		

		

			
				
页卡滑动，标题固定位置，以标题颜色与下划线表示当前页卡所在位置.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。

			
		

	





	

		

			

				
					
viewpager+fragment实现自定义view定时轮转效果

				
			

			

				

					12-26
				

			

		

		

			
				
通过viwepager和fragment结合fragmentPagerAdapter实现自定义view定时轮转效果

			
		

	





	

		

			

				
					
android-SYBViewPager(自定义下划线标题的ViewPager源码

				
			

			

				

					09-21
				

			

		

		

			
				
android-SYBViewPager(自定义下划线标题的ViewPager源码，0分提供下载

			
		

	





	

		

			

				
					
自定义的可滑动的tab选项卡

				
			

			

				

					12-07
				

			

		

		

			
				
实现自定义的可滑动的tab选项卡，可设置不同的的选项卡指示器风格，包括下划线，仿小米三角形，方形背景三个指示器风格，使用方便，可根据项目需要设置喜欢的颜色，风格，拿到项目中可以直接使用

			
		

	





	

		

			

				
					
ViewPager之标签的自定义

				
			

			

				

					weixin_33759269的博客
				

				

					04-05
					
					193
					
				

			

		

		

			
				
这篇算是自定义viewgroup的第一篇文章
PagerTitleStrip

ViewPager有一个功能是添加标签,也就是PagerTitleStrip.先来看一下官方文档:
java.lang.Object
   ↳     android.view.View
         ↳     android.view.ViewGroup
               ↳     android...

			
		

	





	

		

			

				
					
带Tag的VIewpager

				
			

			

				

					LangK范儿
				

				

					09-19
					
					754
					
				

			

		

		

			
				
直接贴代码
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.support.v4.vi

			
		

	





	

		

			

				
					
使用ViewPager自定义滑动标题栏

				
			

			

				

					yaoyaoyao_123的博客
				

				

					01-19
					
					455
					
				

			

		

		

			
				
MainActivity中的代码：



public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private Fragment[] fragments;
    private TextView[] textView;
    private LinearLayout...

			
		

	





	

		

			

				
					
一个带分类 tag 的 ViewPager

				
			

			

				

					未来很长，但我会努力的走下去。
				

				

					08-27
					
					322
					
				

			

		

		

			
				
ViewTager

项目地址：auv1107/ViewTager 

简介：一个带分类 tag 的 ViewPager

viewpager-分类-category-tag-

一个带分类 tag 的 ViewPager，因此命名为 ViewTager。

在目前流行的 APP 中应用很多，比如

网易新闻
			触宝输入法
		
			
		1. 结构



2. 用法

2.1 引用


#...

			
		

	





	

		

			

				
					
android 自定义viewpager,使用 ViewPager 在 Fragment 之间滑动

				
			

			

				

					weixin_35778830的博客
				

				

					05-26
					
					271
					
				

			

		

		

			
				
屏幕滑动是两个完整屏幕之间的切换，在设置向导或幻灯片等界面中很常见。本节课向您介绍如何使用支持库提供的屏幕滑动动画使用 AndroidX。创建视图创建一个稍后将用于 Fragment 内容的布局文件。您还需要为 Fragment 的内容定义一个字符串。以下示例包含一个显示了一些文本的文本视图：android:id="@+id/content"android:layout_width="match_...

			
		

	





	

		

			

				
					
利用ViewPager+Fragment实现滑动切换选项卡

				
			

			

				

					
				

			

		

		

			
				
在Android开发中，实现选项卡效果的滑动切换功能是一种常见需求，ViewPager配合Fragment是实现该功能的标准方式之一。ViewPager是Android Support库中提供的一个组件，用于在屏幕上左右滑动切换视图，而Fragment则是...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值