大家好，又见面了，我是你们的朋友全栈君。
一、概述、 水平滚动条 可以左右滑动 可与ViewPager协同使用
二、HorizontalScrollView里边只能放一个子元素 可以放一个Layout布局对象来盛放多个元素
里边可以设置指示器 和一条基准线 可以用来做导航栏类似于ActionBar的Tab导航栏，HorizontalScrollView做导航栏可以设置指示器跟随ViewPager页面移动实现动态效果 一般点击导航栏的某一项ViewPager相应跳到对应的页面，ViewPager跳到指定页面时导航栏也应该切换到对应的导航分类处
三、下面是实现的代码
1 package com.qf.viewpager02_horizontalscrollview; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 import android.app.Activity; 6 import android.graphics.Color; 7 import android.os.Bundle; 8 import android.support.v4.view.PagerAdapter; 9 import android.support.v4.view.ViewPager; 10 import android.view.View; 11 import android.view.ViewGroup; 12 import android.widget.HorizontalScrollView; 13 import android.widget.LinearLayout; 14 import android.widget.LinearLayout.LayoutParams; 15 import android.widget.TextView; 16 17 public class MainActivity extends Activity { 18 19 private ViewPager vPager; 20 private List<View> views; 21 private HorizontalScrollView hScrollView; //水平滚动控件 22 private LinearLayout navLayout; //标题模块所在的布局控件 23 private View navIdicate; //指示器控件 24 private LinearLayout.LayoutParams indicateParams; //指示器控件在线性布局中的参数对象 25 26 @Override 27 protected void onCreate(Bundle savedInstanceState) { 28 super.onCreate(savedInstanceState); 29 setContentView(R.layout.activity_main); 30 31 vPager=(ViewPager) findViewById(R.id.viewPager); 32 33 initViews(); 34 35 initNavLayout(); 36 37 viewPagerEvent(); 38 39 navLayoutEvent(); 40 41 selectNav(0);//默认选择第一页 42 } 43 44 private void navLayoutEvent() { 45 // TODO 设置导航模块的点击事件 46 TextView titleTv=null; 47 for(int i=0;i<navLayout.getChildCount();i++){ 48 titleTv=(TextView) navLayout.getChildAt(i); 49 titleTv.setTag(i); 50 51 titleTv.setOnClickListener(new View.OnClickListener() { 52 53 @Override 54 public void onClick(View v) { 55 // TODO Auto-generated method stub 56 vPager.setCurrentItem((Integer) v.getTag()); 57 } 58 }); 59 } 60 61 } 62 63 private void viewPagerEvent() { 64 // TODO 处理ViewPager相关的事件 65 vPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 66 67 @Override 68 public void onPageSelected(int position) { 69 // TODO Auto-generated method stub 70 selectNav(position); 71 } 72 73 @Override 74 public void onPageScrolled(int position, float offset, int offsetPixels) { 75 // TODO 当页面滚动时，通过当前的位置和页面滚动的偏移量，计算指示器的左外边距的大小 76 int leftMargin=(int) (indicateParams.width*(position+offset)); 77 indicateParams.leftMargin=leftMargin; 78 79 navIdicate.setLayoutParams(indicateParams);//重新设置布局参数对象 80 81 } 82 83 @Override 84 public void onPageScrollStateChanged(int state) { 85 // TODO Auto-generated method stub 86 } 87 }); 88 } 89 90 //选择导航模块的位置，将水平滚动控件滚动到当前模块位置的中心点 91 private void selectNav(int position){ 92 93 TextView modelTv=(TextView) navLayout.getChildAt(position); 94 95 int left=modelTv.getLeft();//获取当前模块控件的左边位置 96 int offset=left-(getResources().getDisplayMetrics().widthPixels/2)+modelTv.getWidth()/2; 97 98 hScrollView.smoothScrollTo(offset, 0);//水平滚动到指定位置（水平控件可见的左边位置） 99 100 for(int i=0;i<navLayout.getChildCount();i++){ 101 modelTv=(TextView) navLayout.getChildAt(i); 102 if(i==position) 103 modelTv.setTextColor(Color.argb(100, 255, 0, 0)); 104 else 105 modelTv.setTextColor(Color.argb(255, 0, 0, 0)); 106 } 107 108 109 } 110 111 private void initNavLayout() { 112 // TODO 查找导航中的相关控件 113 hScrollView=(HorizontalScrollView) findViewById(R.id.hScrollViewId); 114 navLayout=(LinearLayout) findViewById(R.id.navLayoutId); 115 navIdicate=findViewById(R.id.navIndicateId); 116 117 indicateParams=(LayoutParams) navIdicate.getLayoutParams();//获取指示器控件的布局参数对象 118 119 } 120 121 private void initViews() { 122 // TODO 加载ViewPager中显示的页面资源 123 views=new ArrayList<View>(); 124 views.add(getLayoutInflater().inflate(R.layout.viewpager_view01,null)); 125 views.add(getLayoutInflater().inflate(R.layout.viewpager_view02,null)); 126 views.add(getLayoutInflater().inflate(R.layout.viewpager_view03,null)); 127 views.add(getLayoutInflater().inflate(R.layout.viewpager_view04,null)); 128 views.add(getLayoutInflater().inflate(R.layout.viewpager_view05,null)); 129 130 vPager.setAdapter(new MyPagerAdapter()); //设置ViewPager的适配器 131 132 } 133 134 //自定义显示页面的适配（用于ViewPager中） 135 class MyPagerAdapter extends PagerAdapter{ 136 @Override 137 public int getCount() { 138 return views.size(); 139 } 140 @Override 141 public Object instantiateItem(ViewGroup container, int position) { 142 container.addView(views.get(position)); 143 144 return views.get(position);//作为数据对象返回 145 } 146 147 @Override 148 public void destroyItem(ViewGroup container, int position, Object object) { 149 container.removeView(views.get(position)); 150 } 151 152 @Override 153 public boolean isViewFromObject(View view, Object obj) { 154 return view==obj; 155 } 156 } 157 158 159 }
MainActivity.java
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:paddingBottom="@dimen/activity_vertical_margin" 6 android:paddingLeft="@dimen/activity_horizontal_margin" 7 android:paddingRight="@dimen/activity_horizontal_margin" 8 android:paddingTop="@dimen/activity_vertical_margin" 9 tools:context=".MainActivity" > 10 11 <HorizontalScrollView 12 android:id="@+id/hScrollViewId" 13 android:layout_width="match_parent" 14 android:layout_height="50dp" 15 android:layout_marginBottom="2dp" 16 android:scrollbars="none"> 17 18 <LinearLayout 19 android:layout_width="wrap_content" 20 android:layout_height="match_parent" 21 android:orientation="vertical" > 22 23 <!-- 标题 --> 24 25 <LinearLayout 26 android:id="@+id/navLayoutId" 27 android:layout_width="wrap_content" 28 android:layout_height="45dp" 29 android:orientation="horizontal" > 30 31 <TextView 32 android:id="@+id/mode1Id" 33 android:layout_width="150dp" 34 android:layout_height="match_parent" 35 android:gravity="center" 36 android:text="第一个页面" 37 android:textColor="#000" 38 android:textSize="20sp" /> 39 40 <TextView 41 android:id="@+id/modelId2" 42 android:layout_width="150dp" 43 android:layout_height="match_parent" 44 android:gravity="center" 45 android:text="第2个页面" 46 android:textColor="#000" 47 android:textSize="20sp" /> 48 49 <TextView 50 android:id="@+id/mode1Id3" 51 android:layout_width="150dp" 52 android:layout_height="match_parent" 53 android:gravity="center" 54 android:text="第3个页面" 55 android:textColor="#000" 56 android:textSize="20sp" /> 57 58 <TextView 59 android:id="@+id/mode1Id4" 60 android:layout_width="150dp" 61 android:layout_height="match_parent" 62 android:gravity="center" 63 android:text="第4个页面" 64 android:textColor="#000" 65 android:textSize="20sp" /> 66 67 <TextView 68 android:id="@+id/mode1Id5" 69 android:layout_width="150dp" 70 android:layout_height="match_parent" 71 android:gravity="center" 72 android:text="第5个页面" 73 android:textColor="#000" 74 android:textSize="20sp" /> 75 </LinearLayout> 76 <!-- 指示器 --> 77 <View 78 android:id="@+id/navIndicateId" 79 android:layout_width="150dp" 80 android:layout_height="4dp" 81 android:background="#f00" 82 /> 83 <!-- 基准线 --> 84 <View 85 android:layout_width="match_parent" 86 android:layout_height="1dp" 87 android:background="#800" 88 /> 89 90 </LinearLayout> 91 </HorizontalScrollView> 92 93 <android.support.v4.view.ViewPager 94 android:id="@+id/viewPager" 95 android:layout_width="match_parent" 96 android:layout_height="match_parent" 97 android:layout_below="@id/hScrollViewId" /> 98 99 </RelativeLayout>
activity_main.xml
四、效果图
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/154571.html原文链接：https://javaforall.net
