ViewPager实现页卡的最新方法--简洁的TabLayout(谷歌支持包)

效果图:

加入依赖包:

    compile ‘com.android.support:design:22.2.0‘

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/red"
        app:tabSelectedTextColor="@color/red"
        app:tabTextColor="@color/black"/>

    <!--可滑动的布局内容-->
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

页面代码:

public class FiveActivity extends Activity {
    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    private LayoutInflater mInflater;
    private List<String> mTitleList = new ArrayList<>();//页卡标题集合
    private View view1, view2, view3, view4, view5;//页卡视图
    private List<View> mViewList = new ArrayList<>();//页卡视图集合

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_five);

        mViewPager = (ViewPager) findViewById(R.id.vp_view);
        mTabLayout = (TabLayout) findViewById(R.id.tabs);

        mInflater = LayoutInflater.from(this);
        view1 = mInflater.inflate(R.layout.activity_main, null);
        view2 = mInflater.inflate(R.layout.activity_main, null);
        view3 = mInflater.inflate(R.layout.activity_main, null);
        view4 = mInflater.inflate(R.layout.activity_main, null);
        view5 = mInflater.inflate(R.layout.activity_main, null);

        //加入页卡视图
        mViewList.add(view1);
        mViewList.add(view2);
        mViewList.add(view3);
        mViewList.add(view4);
        mViewList.add(view5);

        //加入页卡标题
        mTitleList.add("No:1");
        mTitleList.add("No:2");
        mTitleList.add("No:3");
        mTitleList.add("No:4");
        mTitleList.add("No:5");

        mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置tab模式,当前为系统默认模式
        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(0)));//加入tab选项卡
        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(1)));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(2)));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(3)));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(4)));

        MyPagerAdapter mAdapter = new MyPagerAdapter(mViewList);
        mViewPager.setAdapter(mAdapter);//给ViewPager设置适配器
        mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。
        mTabLayout.setTabsFromPagerAdapter(mAdapter);//给Tabs设置适配器
    }

    //ViewPager适配器
    class MyPagerAdapter extends PagerAdapter {
        private List<View> mViewList;

        public MyPagerAdapter(List<View> mViewList) {
            this.mViewList = mViewList;
        }

        @Override
        public int getCount() {
            return mViewList.size();//页卡数
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;//官方推荐写法
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViewList.get(position));//加入页卡
            return mViewList.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mViewList.get(position));//删除页卡
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitleList.get(position);//页卡标题
        }

    }

}

项目页面(个人笔记。可忽略):

public class SaleRankingActivity extends VolleyActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sale_rangking_activity_layout);

        ActionBarUtil.setup(this, R.string.sale_ranking);

        int position = getIntent().getIntExtra(EnumIntentKey.SELECT_POSITION.toString(), 0);

        TabLayout tabs = (TabLayout) findViewById(R.id.tabs_square);
        ViewPager pager = $(R.id.vp_square);
        pager.setOffscreenPageLimit(2);
        FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            private String[] titles = getResources().getStringArray(R.array.ranking_type);

            @Override
            public Fragment getItem(int position) {
                if (position == 0) {    // 专场提醒
                    return SaleRankingListFragment.newInstance(0);
                } else {    // 卖家提醒
                    return SaleRankingListFragment.newInstance(1);
                }
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return titles[position];
            }

            @Override
            public int getCount() {
                return titles.length;
            }
        };
        pager.setAdapter(adapter);
        tabs.setupWithViewPager(pager);

        pager.setCurrentItem(position);//推断是从哪跳进来的
    }
}
时间: 2024-08-10 16:58:45

ViewPager实现页卡的最新方法--简洁的TabLayout(谷歌支持包)的相关文章

ViewPager实现页卡的3种方法(谷歌组件)

----方法一:---- 效果图: 须要的组件: ViewPager+PagerTabStrip 布局文件代码: <!--xmlns:android_custom="http://schemas.android.com/apk/res/com.pengkv.bigo"--> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layou

ViewPager实现页卡的2种方法(谷歌组件)

----方法一:---- 效果图: 需要的组件: ViewPager+PagerTabStrip 布局文件代码: <!--xmlns:android_custom="http://schemas.android.com/apk/res/com.pengkv.bigo"--> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layou

Android 快速实现 ViewPager 滑动页卡切换(可用作整个 app上导航)

我记得在前面,我写了一篇Android 微信6.1 tab栏图标和字体颜色渐变的实现,如果大家仅仅认为这篇文章的功能只是模仿微信颜色渐变效果,那就大错特错了!认真阅读了这篇文章的朋友,应该知道,这里面代码可用作 app 通用的底部栏导航,通过它能快速的实现类似微信6.0版本以底部导航的 app 整体架构,并且在 MainActivity 中需要编写的代码非常简洁.如果有兴趣的朋友可以去看看. 效果: 今天这篇 blog的内容同样可以拿来做 app 的整体架构,但与前面那篇 blog 不同,不同之

ViewPager设置 缓存个数、页卡间距、数据更新

在使用ViewPager常用设置 1)mViewPager.setOffscreenPageLimit(2);//设置缓存view 的个数(实际有3个,缓存2个+正在显示的1个)2)mViewPager.setPageMargin((int)getResources().getDimensionPixelOffset(R.dimen.ui_5_dip));//设置viewpager每个页卡的间距,与gallery的spacing属性类似 3)ViewPager更新数据问题: 直接使用notify

android SlidingTabLayout实现ViewPager页卡滑动效果

先来张效果图(可以滑动切换页卡) 主页面布局文件 remind_auction_new_list.xml : <RelativeLayout style="@style/Rosemary.Plane" xmlns:android="http://schemas.android.com/apk/res/android"> <!--头部布局--> <com.liam.rosemary.ui.view.SlidingTabLayout and

扒皮下腾讯网站地图页面页卡的滚动特效

今天要扒的是腾讯网站地图页面(http://www.qq.com/map/)页卡滚动效果,见下图 有兴趣的童鞋可以去那页面试一试,其动画效果见下图: 那么先理下思路:上方的按钮对应下方的某个栏目,点击某按钮时,其对应的栏目(暂且称为A吧)滚到最上方,原本在A前方的栏目则在滚动结束后自动跳到最后面(这里要注意顺序,比如在A前面有2个栏目B和C,那么B滚完便跳到最后,然后C开始滚,C滚完跳到最后面). 咱这里说的“跳”可以用append实现,即把前面的元素有序地移到最后.至于滚动,可以在全部栏目外围

我熟知的三种三栏网页宽度自适应布局方法

一.前言在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择.当然,具体实现不是那么容易,需要一定的css功力和实践经验.本文不讲细节,只讲外部的自适应架构,这也是实现整个页面自适应的前提.目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法,margin负值法以及自身浮动法.这些方法简洁实用,且无兼容性问题.如果您想在您的页面上使用流动性布局,相信本文给您一些启示的. 二.三种方法为了演示的需要,首先限定下示例的布局结构:左中右三栏布

tab页卡效果!

最进遇到了问题,一个界面要展示很多内容,所以需要页卡分开显示,但是集成其它的拖动控件,导致jquery等tab控件失效,或者导入jquery后原本的脚本报错. 所以找了个手写的分享下: 先来张效果图: 下面是HTML代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;c

一次优化列表页卡顿的经历

写下这篇文章的日期是2016年4月初.当时来到公司,项目之前是外包出去的,代码乱糟糟的,需要重构掉, 摆在面前的问题不是重构项目,而是一些列表页的紧急的性能优化. 1.先优化item的层级 其实层级只要不是太深的话,比如5层,6层,对性能的差别在中等性能的机器上几乎看不出来的,但是想要做到 极致, 我就得死扣细节,原来代码是有4层的,其实有一点点接近可优化的范围了,我把原来的4层降到1层. 1层的话在item的话,在cpu进行计算测量的时候就速度很快了. 下面是我用DDMS去查看某台和我台的列表