如图是效果图

    

开发中经常会用到上面是一个Tab下面是一个ViewPager(ViewPager再包含几个Fragment),当点击Tab或是滑动ViewPager,Tab及ViewPager都会发生对应的变化

如图我实现的上面一个Tab是自己定义的布局让其继承HorizontalScrollView,下面一个使用系统PagerTabStrip很简单,

当然引用别人的框架Android-ViewPagerIndicator(https://github.com/JakeWharton/ViewPagerIndicator)实现更简单

如下是主要代码

package com.it.hello.activity.assets;

import java.util.ArrayList;
import com.it.hello.R;
import com.it.hello.activity.entity.ChannelItem;
import com.it.hello.activity.fragment.FourFragment;
import com.it.hello.activity.fragment.MThreeFragment;
import com.it.hello.activity.fragment.OneFragment;
import com.it.hello.activity.myfragment.MyFragmentOne;
import com.it.hello.activity.myfragment.MyFragmentTwo;
import com.it.hello.activity.util.DensityUtils;
import com.it.hello.activity.widget.ColumnHorizontalScrollView;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.util.SparseArray;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.RelativeLayout.LayoutParams;

/**
 * PagerTabStrip实现ViewPager的滑动
 * @author zh
 *
 */
public class MyStripActivity extends FragmentActivity {

    private ViewPager mViewPager;
    private PagerTabStrip pager_tab_strip;

    /** 自定义的HorizontalScrollView */
    private ColumnHorizontalScrollView mColumnHorizontalScrollView;
    private LinearLayout mRadioGroup_content;
    /** 用户选择的分类列表 */
    private ArrayList<ChannelItem> userChannelItems = new ArrayList<ChannelItem>();
    /** 当前选中的栏目 */
    private int columnSelectIndex = 0;
    /** 屏幕的宽度 */
    private int mScreeWidth = 0;
    /** Item宽度 */
    private int mItemWidth = 0;
    private View view;

    @Override
    protected void onCreate(Bundle arg0) {
        // TODO Auto-generated method stub
        super.onCreate(arg0);
        setContentView(R.layout.activity_strip);
        mScreeWidth = DensityUtils.getWindowsWidth(this);
        mItemWidth = mScreeWidth / 3; // 一个Item宽度为屏幕的3分之一
        mViewPager = (ViewPager) findViewById(R.id.vp);
        pager_tab_strip = (PagerTabStrip) findViewById(R.id.pager_tab_strip);
        // 设置标签下划线的颜色
        mColumnHorizontalScrollView = (ColumnHorizontalScrollView) findViewById(R.id.mColumnHorizontal);
        mRadioGroup_content = (LinearLayout) findViewById(R.id.mRadioGroup);

        initColumData();
        //取消Tab 下面的长横线
        pager_tab_strip.setDrawFullUnderline(false);
        //改变Tab线的颜色
        pager_tab_strip.setTabIndicatorColor(getResources().getColor(
                R.color.indecolor));
        mViewPager.setOffscreenPageLimit(3);
        mViewPager.setAdapter(new MainAdapter(getSupportFragmentManager()));
    }

    private void initColumData() {
        // TODO Auto-generated method stub
        userChannelItems = new ArrayList<ChannelItem>();
        ChannelItem item = new ChannelItem(0, "标签0", 0, 0);
        ChannelItem item1 = new ChannelItem(0, "标签1", 0, 0);
        ChannelItem item2 = new ChannelItem(0, "标签2", 0, 0);
        ChannelItem item3 = new ChannelItem(0, "标签3", 0, 0);
        ChannelItem item4 = new ChannelItem(0, "标签4", 0, 0);
        userChannelItems.add(item);
        userChannelItems.add(item1);
        userChannelItems.add(item2);
        userChannelItems.add(item3);
        userChannelItems.add(item4);

        initTabColumn();

        /**
         * ViewPager切换监听的方法
         */
        mViewPager
                .setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

                    @Override
                    public void onPageSelected(int position) {
                        // TODO Auto-generated method stub
                        mViewPager.setCurrentItem(position);
                        selectTab(position);
                        initColumData();
                    }

                });
    }

    /**
     * 初始化TabColumn栏目项
     */
    private void initTabColumn() {
        // TODO Auto-generated method stub
        mRadioGroup_content.removeAllViews();
        int count = userChannelItems.size();
        mColumnHorizontalScrollView.setParam(this, mScreeWidth,
                mRadioGroup_content);
        for (int i = 0; i < count; i++) {
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                    mItemWidth, LayoutParams.WRAP_CONTENT);
            params.leftMargin = 5;
            params.rightMargin = 5;
            view = View.inflate(this, R.layout.item_mytab, null);
            TextView tv = (TextView) view.findViewById(R.id.tab_title);
            View line = (View) view.findViewById(R.id.tab_line);
            tv.setId(i);
            tv.setText(userChannelItems.get(i).getName());
            if (columnSelectIndex == i) {
                tv.setSelected(true);
                line.setSelected(true);
            }
            view.setOnClickListener(new View.OnClickListener() {

                @Override
                public void onClick(View arg0) {
                    // TODO Auto-generated method stub
                    for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) {
                        View localView = mRadioGroup_content.getChildAt(i);
                        if (localView != arg0) {
                            localView.setSelected(false);
                        } else {
                            localView.setSelected(true);
                            mViewPager.setCurrentItem(i);
                        }
                    }
                }
            });
            mRadioGroup_content.addView(view, i, params);
        }
    }

    /**
     * 选择的Column里面的Tab
     * */
    private void selectTab(int tab_postion) {
        columnSelectIndex = tab_postion;
        for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) {
            View checkView = mRadioGroup_content.getChildAt(tab_postion);
            int k = checkView.getMeasuredWidth();
            int l = checkView.getLeft();
            int i2 = l + k / 2 - mScreeWidth / 2;
            mColumnHorizontalScrollView.smoothScrollTo(i2, 0);
        }
        // 判断是否选中
        for (int j = 0; j < mRadioGroup_content.getChildCount(); j++) {
            View checkView = mRadioGroup_content.getChildAt(j);
            boolean ischeck;
            if (j == tab_postion) {
                ischeck = true;
            } else {
                ischeck = false;
            }
            checkView.setSelected(ischeck);
        }
    }

    /**
     * ViewPager的适配器
     * @author zh
     *
     */
    private class MainAdapter extends FragmentStatePagerAdapter {

        public MainAdapter(FragmentManager fm) {
            super(fm);
            // TODO Auto-generated constructor stub
        }

        // 每个条目返回的Fragment
        @Override
        public Fragment getItem(int position) {
            // TODO Auto-generated method stub
            return createFragment(position);
        }

        // 一共多少个条目
        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return 5;
        }

        // 返回每个条目的标题
        @Override
        public CharSequence getPageTitle(int position) {
            return "标签" + position;
        }
    }
    //private static Map<Integer, Fragment> mFragmentMap = new HashMap<Integer, Fragment>();
    private static SparseArray<Fragment> mFragmentMap = new SparseArray<Fragment>();
    public Fragment createFragment(int position) {
        // TODO Auto-generated method stub
        Fragment fragment = null;
        fragment = mFragmentMap.get(position);//在集合中去除Fragment
        if(fragment == null){//如果没在集合中取出来  需要重新创建
            if (position == 0) {
                fragment = new MyFragmentOne();
            } else if (position == 1) {
                fragment = new MyFragmentTwo();
            } else if (position == 3) {
                fragment = new MThreeFragment();
            } else if (position == 4) {
                fragment = new FourFragment();
            } else {
                fragment = new OneFragment();
            }
            if(fragment != null){
                mFragmentMap.put(position, fragment);//把创建好的Fragment存放到集合中缓存起来
            }
        }
        return fragment;
    }
}

布局代码

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

    <com.it.hello.activity.widget.ColumnHorizontalScrollView
        android:id="@+id/mColumnHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none" >

        <LinearLayout
            android:id="@+id/mRadioGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#333"
            android:gravity="center_vertical"
            android:orientation="horizontal" />
    </com.it.hello.activity.widget.ColumnHorizontalScrollView>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_tab_strip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="#ffffff"
            android:paddingBottom="4dp"
            android:paddingTop="4dp"
            android:textColor="#000" />
    </android.support.v4.view.ViewPager>

</LinearLayout>

自定义的ColumnHorizontalScrollView

package com.it.hello.activity.widget;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.HorizontalScrollView;

public class ColumnHorizontalScrollView extends HorizontalScrollView {
    /** 传入整体布局 */
    private View ll_content;
    /** 传入拖动栏布 */
    // private View rl_column;
    /** 屏幕宽度 */
    private int mScreenWitdh = 0;
    /** 父类的活动activity */
    private Activity activity;

    public ColumnHorizontalScrollView(Context context) {
        super(context);
    }

    public ColumnHorizontalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ColumnHorizontalScrollView(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);
    }

    /**
     * 在拖动的时
     * */
    // @Override
    // protected void onScrollChanged(int paramInt1, int paramInt2, int
    // paramInt3, int paramInt4) {
    // super.onScrollChanged(paramInt1, paramInt2, paramInt3, paramInt4);
    // //shade_ShowOrHide();
    // if(!activity.isFinishing() && ll_content !=null){
    // }else{
    // return;
    // }
    // if(paramInt1 ==0){
    // return;
    // }
    // if(ll_content.getWidth() - paramInt1 + rl_column.getLeft() ==
    // mScreenWitdh){
    // return;
    // }
    // }
    /**
     * 传入父类布局中的资源文件
     * */
    public void setParam(Activity activity, int mScreenWitdh, View paramView1) {
        this.activity = activity;
        this.mScreenWitdh = mScreenWitdh;
        this.ll_content = paramView1;
    }

    /**
     * 判断左右阴影的显示隐藏效
     * */
    public void shade_ShowOrHide() {
        if (!activity.isFinishing() && ll_content != null) {
            measure(0, 0);
            // 如果整体宽度小于屏幕宽度的话,那左右阴影都隐藏
            if (mScreenWitdh >= getMeasuredWidth()) {
                // leftImage.setVisibility(View.GONE);
                // rightImage.setVisibility(View.GONE);
            }
        } else {
            return;
        }
        // 如果滑动在最左边时,左边阴影隐藏,右边显示
        if (getLeft() == 0) {
            // leftImage.setVisibility(View.GONE);
            // rightImage.setVisibility(View.VISIBLE);
            return;
        }
        // 如果滑动在最右边时,左边阴影显示,右边隐藏
        if (getRight() == getMeasuredWidth() - mScreenWitdh) {
            // leftImage.setVisibility(View.VISIBLE);
            // rightImage.setVisibility(View.GONE);
            return;
        }
        // 否则,说明在中间位置,左、右阴影都显示
        // leftImage.setVisibility(View.VISIBLE);
        // rightImage.setVisibility(View.VISIBLE);
    }
}
/**获取屏幕的宽*/
    public final static int getWindowsWidth(Activity activity) {
        DisplayMetrics dm = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(dm);
        return dm.widthPixels;
    }

PagerTabStrip及自定义的PagerTab的更多相关文章

  1. Android界面实现----PagerTabStrip绚丽的滑动标签

    在ViewPager这种可以滑动的控件上,总是有很多的文章可以做.Android自带的控件,实现一个指示器,这个控件,就是support-v4包里面的PagerTabStrip控件. 首先,我们先看一 ...

  2. ViewPager及PagerTabStrip 的使用详解

    ViewPager 就是一个滑屏效果的一个控件,使用比较简单.使用过程思路流程基本如下: 在需要添加的ViewPager的布局文件中添加ViewPager控件--->准备好滑屏所有的View-- ...

  3. ViewPager 详解(三)---PagerTabStrip与PagerTitleStrip添加标题栏的异同

    前言:在前两篇文章中,我们讲解了滑动页面的的实现方法与四大函数的意义,但有时,仅仅实现页面滑动是不够的,还要有标题栏才会显得更友好.所以在这篇文章中,我将会向大家展示在Android.support. ...

  4. Android多画面幻灯片:ViewPager基础上,利用与PagerTabStrip出生缺陷(源代码)

    近期使用ViewPager.读了几个人说是不是很清晰的信息,干脆自己写demo总结下. 样例非常easy.Activity里有三个界面能够滑动.每个界面都有一个button并设置好了监听.PagerT ...

  5. Android开发之ViewPager实现多页面切换及动画效果(仿Android的Launcher效果)

    Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果.源码地址在文章最后给出下载. 效果图如下:       1.Vi ...

  6. ViewPager的使用

    在上培训课的时候,老师一直在将ViewPager是现在的主流,一直想去好好的了解一下,今天去网上学习了一下   ,做一个总结: ViewPager其实就是后来谷歌提供给我们的一个组件,就像TextVi ...

  7. Android ViewPager使用详解

    这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等.那如 ...

  8. 【练习】ViewPager标签滑动

    效果图: 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:a ...

  9. 转:ViewPager+Fragment基本使用方法(附源码)

    ViewPager+Fragment可以做出多页面滑动效果,让我们的应用程序界面操作起来更加灵活 对于ViewPager和Fragment组件还不熟悉的朋友,可以先看看相关的资料 首先在activit ...

随机推荐

  1. python安装后推荐的安装两款文本编辑器

    Notepad++ 7.2.2和 Sublime Text --道心 Notepad++ 7.2.2 Notepad++ 是一款非常有特色的编辑器,是开源软件,可以免费使用.支持的语言: C, C++ ...

  2. ORACLE 移动数据文件 控制文件 重做日志文件

    ORACLE数据库有时候需要对存储进行调整,增加分区.IO调优等等,此时需要移动数据文件.重做日志文件.控制文件等等,下文结合例子总结一下这方面的知识点. 进行数据文件.重做日志文件.控制文件的迁移前 ...

  3. Hololens入门之语音识别(语音命令)

    http://blog.csdn.net/sun_t89/article/details/52430923

  4. 逆向分析AHpack

    从暑假开始逆向研究也有一个半月了,今晚分析了一个压缩壳,第一次脱离书本逆向一个程序,放上来纪念一下. 其实像这种壳完全可以esp定律秒掉的,之所以分析它,是因为我想知道所谓IAT修复具体是怎么个算法, ...

  5. Excel里内嵌在线翻译

    本来寻思着继续写点系统运行日志跟踪技术的,但早晨哥家领导从单位打来电话,让帮助她的闺蜜搞一个excel翻译的问题,总部IT搞不定.我过去是用excel做了几年工作,却都是些数学计算,跟翻译也扯不上啊: ...

  6. 解决phpcms V9 推荐位无法排序

    /phpcms/modules/content/content.php 454行 /** * 排序 */public function listorder() { if(isset($_GET['do ...

  7. haskell中的monad

    monad本意是单子.在haskell中,第一个接触的基本都是IO action,通过把IO动作包装起来我们能很方便的与现实世界进行数据交换.但其实monad的用途不止如此,monad还能讲一系列操作 ...

  8. 使用TypeScript开发程序

    简介 TypeScript一直发展不错,我们公司在开发新功能时,考虑到程序的可维护性,使用了TypeScript编写浏览器上的程序,我们是从零开始使用TypeScript,甚至我连javascript ...

  9. QQ登入(3)QQ空间分享-无需登入

    public void myclick2(View v){ //QZone分享, SHARE_TO_QQ_TYPE_DEFAULT 图文,SHARE_TO_QQ_TYPE_IMAGE 纯图 ,SHAR ...

  10. 通知栏发送消息Notification(可以使用自定义的布局)

    一个简单的应用场景:假如用户打开Activity以后,按Home键,此时Activity 进入-> onPause() -> onStop() 不可见.代码在此时机发送一个Notifica ...