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)

@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>

效果
這里寫圖片描述


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com