HorizontalScrollView和ViewPager联动效果

package com.zj.horizontalsrollview; import java.util.ArrayList; import android.app.Activity; import android.os.Bundle; import android.os.Parcelable; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.Log; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup.MarginLayoutParams; import android.view.animation.Animation; import android.view.animation.AnimationSet; import android.view.animation.AnimationUtils; import android.view.animation.TranslateAnimation; import android.widget.HorizontalScrollView; import android.widget.ImageView; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.RadioGroup.OnCheckedChangeListener; import android.widget.RelativeLayout; import android.widget.RelativeLayout.LayoutParams; /** * 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) @Override public 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 stub mViews = 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监听 */ @Override public 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/300 mHorizontalScrollView.smoothScrollTo((int) mCurrentCheckedRadioLeft - (int) getResources().getDimension(R.dimen.rdo2), 0); } /** * 获得当前被选中的RadioButton距离左侧的距离 */ private float getCurrentCheckedRadioLeft() { // TODO Auto-generated method stub if (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 stub mRadioGroup.setOnCheckedChangeListener(this); mViewPager.setOnPageChangeListener(new MyPagerOnPageChangeListener()); } private void iniController() { // TODO Auto-generated method stub mRadioGroup = (RadioGroup) findViewById(R.id.rad