Android实现带Tab页引导的ViewPager

转载 2013年12月03日 15:28:16


Tab页很适合用来做平行功能之间的引导,而各功能页面用ViewPager来展示会显得比较平滑、过渡自然,所以自然就有了许多软件将二者结合,用于展示主功能界面,比如网易新闻和360优化大师的主界面,那么下面就来做一个这样的带Tab页的ViewPager吧~

  基本需求:1,点击Tab页,ViewPager做出相应滑动,且Tab页中有表示切换的动画

         2,滑动ViewPager,Tab页中有表示切换的动画

       3,Tab页可以动态添加并自行计算所占宽度

  基本思路是:用一个横向LinearLayout管理动态加载的Tab页,下方是ViewPager,再用代码将二者关联起来就可以了,代码如下

public class TabViewPager extends LinearLayout
{
    /* 数据段begin */
    public final static String TAG = "TabViewPager";
    private Context mContext;
    
    private LinearLayout mTabHost;
    private ImageView mUnderline;
    private ViewPager mViewPager;
    
    //tab及underline宽度,也是underline的最小移动距离
    private int mTabWidth;
    /* 数据段end */
    
    /* 函数段begin */
    public TabViewPager(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        
        mContext = context;
        
        inflate(mContext, R.layout.tab_view_pager, this);
        initViews();
    }
    
    private void initViews()
    {
        mTabHost = (LinearLayout) findViewById(R.id.tab_host);
        mUnderline = (ImageView) findViewById(R.id.tab_underline);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
    }
    
    public void initTabs(String[] tabTitles, int parentWidth)
    {
        LinearLayout.LayoutParams tabHostLayoutParams;
        TextView tab;
        
        mTabWidth = parentWidth / tabTitles.length;
        
        //设置宽度
        if (tabTitles.length > 0)
        {
            tabHostLayoutParams = new LinearLayout.LayoutParams(mTabWidth, LinearLayout.LayoutParams.WRAP_CONTENT);
        }
        else
        {
            return;
        }
        
        //动态添加tab
        for (int loopVal = 0; loopVal < tabTitles.length; loopVal++)
        {
            tab = new TextView(mContext);
            tab.setText(tabTitles[loopVal]);
            tab.setTextSize(22);
            tab.setTextColor(getResources().getColor(R.color.white));
            
            tabHostLayoutParams.weight = 1;
            tabHostLayoutParams.gravity = Gravity.CENTER_VERTICAL;
            tab.setLayoutParams(tabHostLayoutParams);
            tab.setGravity(Gravity.CENTER);
            
            tab.setOnClickListener(new TabOnClickListener(loopVal));
            
            mTabHost.addView(tab);
        }
        
        //设置underline宽度,使得下划线与tab宽度保持一致
        FrameLayout.LayoutParams frameLayoutParams = new FrameLayout.LayoutParams(mTabWidth, FrameLayout.LayoutParams.WRAP_CONTENT);
        frameLayoutParams.gravity = Gravity.BOTTOM;
        mUnderline.setLayoutParams(frameLayoutParams);
        mUnderline.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_view_pager_underline));
    }
    
    public void setAdapter(PagerAdapter pagerAdapter)
    {
        mViewPager.setAdapter(pagerAdapter);
        //滑动viewPager时也要执行mUnderline的移动动画
        mViewPager.setOnPageChangeListener(new OnPageChangeListener()
        {
            private int currentPosition = -1;
            private int nextPosition = -1;
            
            @Override
            public void onPageSelected(int position)
            {
                nextPosition = position;
                //mUnderline的移动动画
                mUnderline.startAnimation(new UnderlineTranslateAnimation(currentPosition * mTabWidth, nextPosition * mTabWidth, 0, 0));
            }
            
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
            {
                currentPosition = position;
            }
            
            @Override
            public void onPageScrollStateChanged(int state)
            {
            }
        });
    }
    
    public void setCurrentItem(int position)
    {
        //记录当前的位置后再设置选中位置
        int currentPosition = mViewPager.getCurrentItem();
        mViewPager.setCurrentItem(position);
        int nextPosition = mViewPager.getCurrentItem();
        
        //mUnderline的移动动画
        mUnderline.startAnimation(new UnderlineTranslateAnimation(currentPosition * mTabWidth, nextPosition * mTabWidth, 0, 0));
    }
    /* 函数段end */
    
    /* 内部类begin */
    private class TabOnClickListener implements OnClickListener
    {
        private int viewPosition = -1;
        
        public TabOnClickListener(int position)
        {
            viewPosition = position;
        }
        
        @Override
        public void onClick(View v)
        {
            if (AppEnv.bAppdebug)
            {
                Log.d(TAG, "tab onClick --> " + ((TextView) v).getText());
            }
            
            setCurrentItem(viewPosition);
        }
    }
    
    private class UnderlineTranslateAnimation extends TranslateAnimation
    {
        public UnderlineTranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
        {
            super(fromXDelta, toXDelta, fromYDelta, toYDelta);
            
            setFillAfter(true);
        }
        
    }
    /* 内部类end */
}
 这样,只需调用initTabs()来设置Tab页,和setAdapter()来设置适配器即可使用。

  相应布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    tools:ignore="ContentDescription" >

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <LinearLayout
            android:id="@+id/tab_host"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:orientation="horizontal" >
        </LinearLayout>

        <ImageView
            android:id="@+id/tab_underline"
            android:layout_width="0dp"
            android:layout_height="0dp" />
    </FrameLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="7" />

</LinearLayout>


ViewPager之引导界面---实现欢迎引导页面

最近在看ViewPager,于是乎弄个引导界面来玩玩..... 引导界面,采用现在比较主流的方式:左右滑动加载;小圆点提示;在最后一个页面,点击button,进入功能界面 第一种: ViewFli...
  • h378588270
  • h378588270
  • 2014年12月23日 17:47
  • 6184

ViewPager箭头指示器实现(慕课网总结)

最近,在看慕课网上的android课程,想学习其它达人的技巧与编程方法。ViewPager箭头指示器的效果如下: 咱们主要看代码,共分三步,步骤如下: 第一步:编写ViewPagerInd...
  • wode_dream
  • wode_dream
  • 2016年04月12日 10:26
  • 1155

viewpager带圆点的过渡页

Viewpager实现带下面带圆点的过渡页,先来效果图实现这个功能需要几个步骤,如下 1、布局用的是FrameLayout,需要了解的可以在网上百度。简单来说就是,他会前面的界面会遮挡住后面的界面...
  • bobo8945510
  • bobo8945510
  • 2016年10月11日 11:54
  • 1547

Android实现带Tab页引导的ViewPager

Android实现带Tab页引导的ViewPager 装载于:  http://www.cnblogs.com/zealotrouge/archive/2013/04/09/3009...
  • nnmmbb
  • nnmmbb
  • 2013年11月25日 10:23
  • 771

ViewPager实现页卡的最新方法--简洁的TabLayout(AndroidSupportDesign)

Google在2015年的Google IO大会上更新了Design Support Library,里面提供了几个封装好的MeterDesign风格控件,其中包括: TextInputLayout ...
  • brian512
  • brian512
  • 2016年06月30日 21:05
  • 2038

FragmentPagerAdapter+ViewPager实现Tab切换效果

Activity代码 import android.app.ActionBar; import android.app.ActionBar.Tab; import android.app.Activi...
  • lowprofile_coding
  • lowprofile_coding
  • 2014年07月18日 15:05
  • 2078

android: 带很多tab的指示器的ViewPager

参考资料:慕课网的课程-Android-自定义ViewPager指示器1、固定tab数量的带有指示器的viewPager,代码下载请点我2、动态加载tab的带有指示器的viewPager,代码下载请点...
  • struggle323
  • struggle323
  • 2016年03月17日 13:50
  • 327

Android使用ViewPager实现引导页(带小点提示)

介绍        ViewPager是一种允许用户左右滑动页面的布局管理器,你需要写一个类实现PageAdapter接口来生成要展示的界面。 实现 一、 在布局文件中添加控件 ...
  • Alfred_C
  • Alfred_C
  • 2015年09月14日 20:20
  • 1995

Android ViewPager实现滑动切换页面+底部tab点击切换页面(类微信首页)

目录: 1.实现功能概述 2.代码实现 1.实现功能概述 实现了滑动更换页面同时切换底部Tab的图标、文字的颜色,同时也支持点击底部Tab达到切换页面的效果,有点类似微信首页布局 外带实现tool...
  • qq_28057577
  • qq_28057577
  • 2016年09月20日 19:00
  • 1250

ViewPager、Fragment、RadioButton实现顶部切换Tab页面

1。首先准备xml 主界面
  • RichieZhu
  • RichieZhu
  • 2016年03月10日 10:12
  • 1360
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android实现带Tab页引导的ViewPager
举报原因:
原因补充:

(最多只允许输入30个字)