HorizontalScrollView和ViewPager联动效果

以下代码为网上下载的，经测试可以运行，我只是加了一些注释，供大家参考
完整代码，可以到我的资源里下载

MainActivity

/*** HorizontalScrollView和ViewPager联动效果 上面为HorizontalScrollView,下面为ViewPager* * @author zj 2012-5-23 下午1:07:06*/
public class MainActivity extends Activity implements OnCheckedChangeListener {private RadioGroup mRadioGroup;private RadioButton mRadioButton1;private RadioButton mRadioButton2;private RadioButton mRadioButton3;private RadioButton mRadioButton4;private RadioButton mRadioButton5;private ImageView mImageView;private float mCurrentCheckedRadioLeft;// 当前被选中的RadioButton距离左侧的距离private HorizontalScrollView mHorizontalScrollView;// 上面的水平滚动控件private ViewPager mViewPager; // 下方的可横向拖动的控件private ArrayList<View> mViews;// 用来存放下方滚动的layout(layout_1,layout_2,layout_3)@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);iniController();iniListener();iniVariable();mRadioButton1.setChecked(true);// 默认让第一个按钮被选中mViewPager.setCurrentItem(1);// 默认让第一个ViewPager被选中mCurrentCheckedRadioLeft = getCurrentCheckedRadioLeft();// 得到当前选中的按钮距离最左边的距离}private void iniVariable() {// TODO Auto-generated method stubmViews = new ArrayList<View>();
//      这里设置了第0和第7页为空界面，是为了实现划到最左或者最右，有一个可以划出空白页面但是不会停留的效果，其实不要这种效果也行mViews.add(getLayoutInflater().inflate(R.layout.layout_0, null));mViews.add(getLayoutInflater().inflate(R.layout.layout_1, null));mViews.add(getLayoutInflater().inflate(R.layout.layout_2, null));mViews.add(getLayoutInflater().inflate(R.layout.layout_3, null));mViews.add(getLayoutInflater().inflate(R.layout.layout_4, null));mViews.add(getLayoutInflater().inflate(R.layout.layout_5, null));mViews.add(getLayoutInflater().inflate(R.layout.layout_0, null));mViewPager.setAdapter(new MyPagerAdapter());// 设置ViewPager的适配器}/*** RadioGroup点击CheckedChanged监听*/@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {AnimationSet _AnimationSet = new AnimationSet(true);TranslateAnimation _TranslateAnimation;Log.i("zj", "checkedid=" + checkedId);if (checkedId == R.id.btn1) {// 让蓝色横条从点击前的位置滚动到点击后的位置，记得滚动完后要把当前位置设为mCurrentCheckedRadioLeft的值！！！_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo1), 0f, 0f);_AnimationSet.addAnimation(_TranslateAnimation);_AnimationSet.setFillBefore(false);// 不让动画结束时回到初始状态_AnimationSet.setFillAfter(true);// 让动画结束时保留在结束状态_AnimationSet.setDuration(100);/** LayoutParams _LayoutParams1 = new LayoutParams(100, 4);* _LayoutParams1.setMargins(0, 0, 0, 0);* _LayoutParams1.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);*/// mImageView.bringToFront();mImageView.startAnimation(_AnimationSet);// 开始上面蓝色横条图片的动画切换// mImageView.setLayoutParams(_LayoutParams1);mViewPager.setCurrentItem(1);// 让下方ViewPager跟随上面的HorizontalScrollView切换} else if (checkedId == R.id.btn2) {_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo2), 0f, 0f);_AnimationSet.addAnimation(_TranslateAnimation);_AnimationSet.setFillBefore(false);_AnimationSet.setFillAfter(true);_AnimationSet.setDuration(100);// mImageView.bringToFront();mImageView.startAnimation(_AnimationSet);mViewPager.setCurrentItem(2);} else if (checkedId == R.id.btn3) {_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo3), 0f, 0f);_AnimationSet.addAnimation(_TranslateAnimation);_AnimationSet.setFillBefore(false);_AnimationSet.setFillAfter(true);_AnimationSet.setDuration(100);// mImageView.bringToFront();mImageView.startAnimation(_AnimationSet);mViewPager.setCurrentItem(3);} else if (checkedId == R.id.btn4) {_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo4), 0f, 0f);_AnimationSet.addAnimation(_TranslateAnimation);_AnimationSet.setFillBefore(false);_AnimationSet.setFillAfter(true);_AnimationSet.setDuration(100);// mImageView.bringToFront();mImageView.startAnimation(_AnimationSet);mViewPager.setCurrentItem(4);} else if (checkedId == R.id.btn5) {_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo5), 0f, 0f);_AnimationSet.addAnimation(_TranslateAnimation);_AnimationSet.setFillBefore(false);_AnimationSet.setFillAfter(true);_AnimationSet.setDuration(100);// mImageView.bringToFront();mImageView.startAnimation(_AnimationSet);mViewPager.setCurrentItem(5);}mCurrentCheckedRadioLeft = getCurrentCheckedRadioLeft();// 更新当前蓝色横条距离左边的距离Log.i("zj", "getCurrentCheckedRadioLeft="+ getCurrentCheckedRadioLeft());Log.i("zj", "getDimension=" + getResources().getDimension(R.dimen.rdo2));// 让ScrollBar自动跟随点击的button位置而变动，否则你点击到最右侧了，右侧的条目不会自动显示出来，还要手动滑动ScrollBar// 后面跟的x，y坐标，可以自己测试来给出，比如这里当你点击第1、2个按钮时x=-1、0，这里不可能存在负数，-1按0计，ScrollBar在最左侧即可，当你点击第3/4/5按钮时，ScrollBar适当右移100/200/300mHorizontalScrollView.smoothScrollTo((int) mCurrentCheckedRadioLeft- (int) getResources().getDimension(R.dimen.rdo2), 0);}/*** 获得当前被选中的RadioButton距离左侧的距离*/private float getCurrentCheckedRadioLeft() {// TODO Auto-generated method stubif (mRadioButton1.isChecked()) {// Log.i("zj",// "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo1));return getResources().getDimension(R.dimen.rdo1);} else if (mRadioButton2.isChecked()) {// Log.i("zj",// "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo2));return getResources().getDimension(R.dimen.rdo2);} else if (mRadioButton3.isChecked()) {// Log.i("zj",// "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo3));return getResources().getDimension(R.dimen.rdo3);} else if (mRadioButton4.isChecked()) {// Log.i("zj",// "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo4));return getResources().getDimension(R.dimen.rdo4);} else if (mRadioButton5.isChecked()) {// Log.i("zj",// "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo5));return getResources().getDimension(R.dimen.rdo5);}return 0f;}private void iniListener() {// TODO Auto-generated method stubmRadioGroup.setOnCheckedChangeListener(this);mViewPager.setOnPageChangeListener(new MyPagerOnPageChangeListener());}private void iniController() {// TODO Auto-generated method stubmRadioGroup = (RadioGroup) findViewById(R.id.radioGroup);mRadioButton1 = (RadioButton) findViewById(R.id.btn1);mRadioButton2 = (RadioButton) findViewById(R.id.btn2);mRadioButton3 = (RadioButton) findViewById(R.id.btn3);mRadioButton4 = (RadioButton) findViewById(R.id.btn4);mRadioButton5 = (RadioButton) findViewById(R.id.btn5);mImageView = (ImageView) findViewById(R.id.img1);mHorizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizontalScrollView);mViewPager = (ViewPager) findViewById(R.id.pager);}/*** ViewPager的适配器* * @author zj 2012-5-24 下午2:26:57*/private class MyPagerAdapter extends PagerAdapter {@Overridepublic void destroyItem(View v, int position, Object obj) {// TODO Auto-generated method stub((ViewPager) v).removeView(mViews.get(position));}@Overridepublic void finishUpdate(View arg0) {// TODO Auto-generated method stub}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mViews.size();}@Overridepublic Object instantiateItem(View v, int position) {((ViewPager) v).addView(mViews.get(position));return mViews.get(position);}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {// TODO Auto-generated method stub}@Overridepublic Parcelable saveState() {// TODO Auto-generated method stubreturn null;}@Overridepublic void startUpdate(View arg0) {// TODO Auto-generated method stub}}/*** ViewPager的PageChangeListener(页面改变的监听器)* * @author zj 2012-5-24 下午3:14:27*/private class MyPagerOnPageChangeListener implements OnPageChangeListener {@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}/*** ★别忘了！！！滑动ViewPager的时候,让上方的HorizontalScrollView自动切换*/@Overridepublic void onPageSelected(int position) {// TODO Auto-generated method stub// Log.i("zj", "position="+position);if (position == 0) {// 必须是写setCurrentItem(1)，上边设置的是radiogroup的选择改变监听事件，而不是点击事件// 你预先点击performClick，并不会实现把页面切回到A页面的操作mViewPager.setCurrentItem(1);// mRadioButton1.performClick();} else if (position == 1) {mRadioButton1.performClick();} else if (position == 2) {mRadioButton2.performClick();} else if (position == 3) {mRadioButton3.performClick();} else if (position == 4) {mRadioButton4.performClick();} else if (position == 5) {mRadioButton5.performClick();} else if (position == 6) {mViewPager.setCurrentItem(5);// mRadioButton5.performClick();}}}}

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><HorizontalScrollView android:layout_width="match_parent"android:layout_height="50dp"android:fadingEdge="@null"android:scrollbars="none"android:background="#555555"android:id="@+id/horizontalScrollView"><RelativeLayout android:layout_width="match_parent"android:layout_height="match_parent"android:background="#33b5e5"><RadioGroup
                android:id="@+id/radioGroup"android:layout_width="fill_parent"android:layout_height="49dp"android:orientation="horizontal"android:layout_alignParentTop="true"><RadioButton
                    style="@style/radioButton"android:text="one"android:id="@+id/btn1"/><RadioButton style="@style/radioButton"android:text="two"android:id="@+id/btn2"/><RadioButton style="@style/radioButton"android:text="three"android:id="@+id/btn3"/><RadioButton
                    style="@style/radioButton"android:text="four"android:id="@+id/btn4"/><RadioButton style="@style/radioButton"android:text="five"android:id="@+id/btn5"/></RadioGroup><ImageView
                android:id="@+id/img1"android:layout_width="100dp"android:layout_height="4dp"android:background="#33b5e5"android:layout_alignParentBottom="true"/></RelativeLayout></HorizontalScrollView><android.support.v4.view.ViewPager
        android:id="@+id/pager"android:layout_width="fill_parent"android:layout_height="fill_parent"/>
</LinearLayout>

item
layout_0

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

layout_1

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/darker_gray"><TextView android:layout_width="match_parent"android:layout_height="match_parent"android:text="A"android:gravity="center"android:textSize="240sp"android:textColor="#33b5e5"/>
</LinearLayout>

styles

同样的设置可以抽取为一个样式，增强代码的复用性

<?xml version="1.0" encoding="utf-8"?>
<resources><style name="radioButton"><item name="android:layout_width">100dp</item><item name="android:layout_height">fill_parent</item><item name="android:layout_weight">1.0</item><item name="android:padding">10dp</item><item name="android:gravity">center</item><item name="android:background">@drawable/radiobtn_selector</item><item name="android:button">@null</item></style>
</resources>

dimens

<?xml version="1.0" encoding="utf-8"?>
<resources><dimen name="rdo1">0dp</dimen><dimen name="rdo2">100dp</dimen><dimen name="rdo3">200dp</dimen><dimen name="rdo4">300dp</dimen><dimen name="rdo5">400dp</dimen>
</resources>

效果

HorizontalScrollView和ViewPager联动效果相关推荐

android viewpager标题,ViewPager顶部导航栏联动效果(标题栏条目多)
如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给Tab ...
Android：高仿百度外卖、美团、淘点点二级联动效果！
美团,百度外卖的左右二级联动效果如下: 具体的效果建议打开手机软件玩玩. 分析首先我们一起分析一下这个界面给我们要怎么去实现. 1.最上面的ToolBar不用多解释,比较简单. 2.下面三个界面切换 ...
iOS物理碰撞、唱吧音频处理、仿淘宝联动效果等源码
iOS精选源码物理仿真碰撞陀螺仪使用仿淘宝详情和每日优鲜的一个联动效果 JJNetwork网络库 iOS列表选择弹框网络视频直播类--原生socket音视频实时传输--智能家居 Skele ...
简单的一个用javascript做的'省市区'三级联动效果
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition ...
php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
mybatis 级联查询兑现_MyBatis之自查询使用递归实现 N级联动效果(两种实现方式)...
A:首先先看下一个简单的面试题斐波那契数列计算数组{1,1,2,3,5,8.......} 第30位值规律:1 1 从第三项开始,每一项都是前两项之和有两种实现方式第一种方式: public ...
vue实现下拉二级联动_select下拉菜单实现二级联动效果
需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分首先是建立两个表的实体需要注意的就是写注解了 ...
vue实现下拉二级联动_vue实现二级联动效果
你如城市与省份间的二级联动效果 demo .pag-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;} 所在区域 {{i ...
用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&q ...

HorizontalScrollView和ViewPager联动效果

HorizontalScrollView和ViewPager联动效果相关推荐

最新文章

热门文章