HorizontalScrollView

HorizontalScrollView一、概述、水平滚动条可以左右滑动可与ViewPager协同使用二、HorizontalScrollView里边只能放一个子元素可以放一个Layout布局对象来盛放多个元素里边可以设置指示器

大家好,又见面了,我是你们的朋友全栈君。

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

    

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

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

三、下面是实现的代码

<span role="heading" aria-level="2">HorizontalScrollView
<span role="heading" aria-level="2">HorizontalScrollView

 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

<span role="heading" aria-level="2">HorizontalScrollView
<span role="heading" aria-level="2">HorizontalScrollView

 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

 

四、效果图

<span role="heading" aria-level="2">HorizontalScrollView

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/154571.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号