HorizontalScrollView和ViewPager联动效果

来源：互联网发布：绵阳科技城软件产业园编辑：程序博客网时间：2024/05/22 07:58

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

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)    @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.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 {        @Override        public void destroyItem(View v, int position, Object obj) {            // TODO Auto-generated method stub            ((ViewPager) v).removeView(mViews.get(position));        }        @Override        public void finishUpdate(View arg0) {            // TODO Auto-generated method stub        }        @Override        public int getCount() {            // TODO Auto-generated method stub            return mViews.size();        }        @Override        public Object instantiateItem(View v, int position) {            ((ViewPager) v).addView(mViews.get(position));            return mViews.get(position);        }        @Override        public boolean isViewFromObject(View arg0, Object arg1) {            // TODO Auto-generated method stub            return arg0 == arg1;        }        @Override        public void restoreState(Parcelable arg0, ClassLoader arg1) {            // TODO Auto-generated method stub        }        @Override        public Parcelable saveState() {            // TODO Auto-generated method stub            return null;        }        @Override        public void startUpdate(View arg0) {            // TODO Auto-generated method stub        }    }    /**     * ViewPager的PageChangeListener(页面改变的监听器)     *      * @author zj 2012-5-24 下午3:14:27     */    private class MyPagerOnPageChangeListener implements OnPageChangeListener {        @Override        public void onPageScrollStateChanged(int arg0) {            // TODO Auto-generated method stub        }        @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {            // TODO Auto-generated method stub        }        /**         * ★别忘了！！！滑动ViewPager的时候,让上方的HorizontalScrollView自动切换         */        @Override        public 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>

效果
这里写图片描述

0 0