ViewPager（三）：RadioGroup+RadioButton+TextView水平滚动条

实现ViewPager上方水平滚动条随着ViewPager滑动而滑动。

效果图：

页面布局：activity_main.xml布局文件代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" 
    android:orientation="vertical">
	<RadioGroup
	    android:id="@+id/layout"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal">
	    <RadioButton 
	        android:id="@+id/rb1"
	        style="@style/rb"
	        android:text="昨天"/>
	    <RadioButton 
	        android:id="@+id/rb2"
	        style="@style/rb"
	        android:text="今天"/>
	     <RadioButton 
	        android:id="@+id/rb3"
	        style="@style/rb"
	        android:text="明天"/>
	</RadioGroup>
	<TextView 
	    android:id="@+id/tvLine"
	    android:layout_width="40dp"
	    android:layout_height="3dp"
	    android:background="#0000ff"/>
	<android.support.v4.view.ViewPager
	    android:id="@+id/viewPager"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"/>


</LinearLayout>

其中TextView就是水平滚动条。

为了让三个RadioButton保持样式的一致，在res.values目录下的styles.xml文件中定义一个样式，让RadioButton引用该样式。

 <style name="rb" parent="android:Widget.Holo.Light.CompoundButton.RadioButton">
        <!-- 添加自己的属性定义 -->
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:textColor">#ff0000</item>
        <item name="android:gravity">center</item>
        <item name="android:button">@null</item>
        <item name="android:padding">0dp</item>
    </style>

如果想蓝色选中条跟着ViewPager滑动，就要随之改变蓝色条的左外边距leftMargin。

那么，如何计算leftMargin的值呢？因为滚动条是随着ViewPager的滑动而改变位置的，所以这里就要用到ViewPager监听中的方法：onPageScrolled(int position, float arg1, int arg2)

三个参数的含义分别是：

int position  :  当前ViewPager的索引值
 float arg1  :  当前pager偏移的百分比
 int arg2  :   偏移的像素数

MainActivity.java的代码如下：

package com.example.viewpager_scroll_demo;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;
public class MainActivity extends FragmentActivity {
	private TextView tvLine;
	private ViewPager viewPager;
	private LayoutParams layoutParams;
	private List<Fragment> lists;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//创建对象
		tvLine =(TextView)findViewById(R.id.tvLine);
		viewPager=(ViewPager)findViewById(R.id.viewPager);
		//获取line的长度，获取手机屏幕的宽度
		int width=getWindowManager().getDefaultDisplay().getWidth();
		int lineWidth=width/3;
		//LayoutParams相当于一个Layout的信息包，它封装了Layout的位置、高、宽等信息
		layoutParams=(LayoutParams) tvLine.getLayoutParams(); 
		//得到tvLine参数类,参数类中包含：width，height，gravity，weight，TopMargin...
		layoutParams.width=lineWidth;
		tvLine.setLayoutParams(layoutParams); //水平滚动条长度就是屏幕的1/3
		//初始化ViewPager的集合
		initPager();
		
		MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
		viewPager.setAdapter(adapter);
		//设置监听
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				
			}
			/**
			 * 参数：
			 * int position:当前ViewPager的索引值
			 * float arg1: 当前pager偏移的百分比
			 * int arg2: 偏移的像素数
			 */
			@Override
			public void onPageScrolled(int position, float arg1, int arg2) {
				Log.i("main", "int position -->"+position);
				Log.i("main", "float arg1 -->"+arg1);
				Log.i("main", "int arg2 -->"+arg2);
				//获取TvLine的左边距
				layoutParams=(LayoutParams) tvLine.getLayoutParams();
				//判断
				if (layoutParams!=null && arg1!=0) {  //有偏移
					layoutParams.leftMargin=(int)(position*layoutParams.width+layoutParams.width*arg1);
					tvLine.setLayoutParams(layoutParams);  //具有新的LeftMargin的LayoutParams
				}
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
		
	}
	public class MyPagerAdapter extends FragmentPagerAdapter{

		public MyPagerAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}

		@Override
		public Fragment getItem(int arg0) {
			// TODO Auto-generated method stub
			return lists.get(arg0);
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return lists.size();
		}
		
	}

	private void initPager() {
		lists=new ArrayList<Fragment>();
		for (int i = 0; i < 3; i++) {
			//创建Fragment对象
			MyFragment fragment = new MyFragment();
			Bundle bundle = new Bundle();
			bundle.putInt("index", i);
			fragment.setArguments(bundle);
			lists.add(fragment);
		}
		
	}


}

MyFragment.java的代码如下

public class MyFragment extends Fragment {
	int images[]={R.drawable.p1,R.drawable.p2,R.drawable.psb};
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View view=inflater.inflate(R.layout.activity_fragment, null);
		ImageView iv=(ImageView)view.findViewById(R.id.iv);
		Bundle bundle = getArguments();
		iv.setImageResource(images[bundle.getInt("index")]);
		return view;
	}
}