HorizontalScrollView

 一、概述、 水平滚动条  可以左右滑动 可与ViewPager协同使用

    

二、HorizontalScrollView里边只能放一个子元素  可以放一个Layout布局对象来盛放多个元素

   里边可以设置指示器 和一条基准线 可以用来做导航栏类似于ActionBar的Tab导航栏，HorizontalScrollView做导航栏可以设置指示器跟随ViewPager页面移动实现动态效果   一般点击导航栏的某一项ViewPager相应跳到对应的页面，ViewPager跳到指定页面时导航栏也应该切换到对应的导航分类处

三、下面是实现的代码

package com.qf.viewpager02_horizontalscrollview;

import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

public class MainActivity extends Activity {

    private ViewPager vPager;
    private List<View> views;
    private HorizontalScrollView hScrollView; //水平滚动控件
    private LinearLayout navLayout; //标题模块所在的布局控件
    private View navIdicate; //指示器控件
    private LinearLayout.LayoutParams indicateParams; //指示器控件在线性布局中的参数对象
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        vPager=(ViewPager) findViewById(R.id.viewPager);
        
        initViews();
        
        initNavLayout();
        
        viewPagerEvent();
        
        navLayoutEvent();
        
        selectNav(0);//默认选择第一页
    }

    private void navLayoutEvent() {
        // TODO 设置导航模块的点击事件
        TextView titleTv=null;
        for(int i=0;i<navLayout.getChildCount();i++){
            titleTv=(TextView) navLayout.getChildAt(i);
            titleTv.setTag(i);
            
            titleTv.setOnClickListener(new View.OnClickListener() {
                
                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    vPager.setCurrentItem((Integer) v.getTag());
                }
            });
        }
        
    }

    private void viewPagerEvent() {
        // TODO 处理ViewPager相关的事件
        vPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            
            @Override
            public void onPageSelected(int position) {
                // TODO Auto-generated method stub
                selectNav(position);
            }
            
            @Override
            public void onPageScrolled(int position, float offset, int offsetPixels) {
                // TODO 当页面滚动时，通过当前的位置和页面滚动的偏移量，计算指示器的左外边距的大小
                int leftMargin=(int) (indicateParams.width*(position+offset));
                indicateParams.leftMargin=leftMargin;
                
                navIdicate.setLayoutParams(indicateParams);//重新设置布局参数对象
                
            }
            
            @Override
            public void onPageScrollStateChanged(int state) {
                // TODO Auto-generated method stub
            }
        });
    }

    //选择导航模块的位置，将水平滚动控件滚动到当前模块位置的中心点
    private void selectNav(int position){
        
        TextView modelTv=(TextView) navLayout.getChildAt(position);
        
        int left=modelTv.getLeft();//获取当前模块控件的左边位置
        int offset=left-(getResources().getDisplayMetrics().widthPixels/2)+modelTv.getWidth()/2;
        
        hScrollView.smoothScrollTo(offset, 0);//水平滚动到指定位置（水平控件可见的左边位置）
        
        for(int i=0;i<navLayout.getChildCount();i++){
            modelTv=(TextView) navLayout.getChildAt(i);
            if(i==position)
                modelTv.setTextColor(Color.argb(100, 255, 0, 0));
            else
                modelTv.setTextColor(Color.argb(255,  0, 0, 0));
        }
        
        
    }
    
    private void initNavLayout() {
        // TODO 查找导航中的相关控件
        hScrollView=(HorizontalScrollView) findViewById(R.id.hScrollViewId);
        navLayout=(LinearLayout) findViewById(R.id.navLayoutId);
        navIdicate=findViewById(R.id.navIndicateId);
        
        indicateParams=(LayoutParams) navIdicate.getLayoutParams();//获取指示器控件的布局参数对象
        
    }

    private void initViews() {
        // TODO 加载ViewPager中显示的页面资源
        views=new ArrayList<View>();
        views.add(getLayoutInflater().inflate(R.layout.viewpager_view01,null));
        views.add(getLayoutInflater().inflate(R.layout.viewpager_view02,null));
        views.add(getLayoutInflater().inflate(R.layout.viewpager_view03,null));
        views.add(getLayoutInflater().inflate(R.layout.viewpager_view04,null));
        views.add(getLayoutInflater().inflate(R.layout.viewpager_view05,null));
        
        vPager.setAdapter(new MyPagerAdapter()); //设置ViewPager的适配器
        
    }

    //自定义显示页面的适配（用于ViewPager中）
    class MyPagerAdapter extends PagerAdapter{
        @Override
        public int getCount() {
            return views.size();
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(views.get(position));
            
            return views.get(position);//作为数据对象返回
        }
        
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(views.get(position));
        }
        
        @Override
        public boolean isViewFromObject(View view, Object obj) {
            return view==obj;
        }
    }
    

}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <HorizontalScrollView
        android:id="@+id/hScrollViewId"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="2dp" 
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <!-- 标题 -->

            <LinearLayout
                android:id="@+id/navLayoutId"
                android:layout_width="wrap_content"
                android:layout_height="45dp"
                android:orientation="horizontal" >

                <TextView
                    android:id="@+id/mode1Id"
                    android:layout_width="150dp"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="第一个页面"
                    android:textColor="#000"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/modelId2"
                    android:layout_width="150dp"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="第2个页面"
                    android:textColor="#000"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/mode1Id3"
                    android:layout_width="150dp"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="第3个页面"
                    android:textColor="#000"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/mode1Id4"
                    android:layout_width="150dp"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="第4个页面"
                    android:textColor="#000"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/mode1Id5"
                    android:layout_width="150dp"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="第5个页面"
                    android:textColor="#000"
                    android:textSize="20sp" />
            </LinearLayout>
            <!-- 指示器 -->
            <View
                android:id="@+id/navIndicateId"
                android:layout_width="150dp"
                android:layout_height="4dp"
                android:background="#f00"
                />
            <!-- 基准线 -->
             <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#800"
                />
            
        </LinearLayout>
    </HorizontalScrollView>

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

</RelativeLayout>

四、效果图