2013.10.9 ViewPager+Fragment

首先感谢：http://blog.csdn.net/fx_sky/article/details/8990573  参考了该同学多处代码。

源代码下载地址 http://download.csdn.net/detail/iloveforeign/6374499

效果图：

1，activity_main.xml 主界面的布局文件

<RelativeLayout 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" >

    <RelativeLayout 
        android:id="@+id/rl_tab"
        android:layout_width="match_parent"
    	android:layout_height="wrap_content">
	        
	    <com.example.viewpagertest.view.TabHorizontalScrollView 
	        android:id="@+id/sv_nav"
	        android:layout_width="match_parent"
	    	android:layout_height="50dp"
	    	android:scrollbars="none" >
	    	
	        <RelativeLayout
	            android:id="@+id/rl_nav"
	            android:layout_width="match_parent"
	    		android:layout_height="wrap_content"
	    		android:background="@color/sky_blue" >
	    		
	            <RadioGroup 
	                android:id="@+id/rg_nav"
	                android:layout_width="match_parent"
				    android:layout_height="48dp"
				    android:layout_alignParentTop="true"
				    android:background="#f2f2f2"
				    android:orientation="horizontal" ></RadioGroup>
	            <ImageView
	                android:id="@+id/iv_nav_indicator"
	                android:layout_width="1dp"
				    android:layout_height="5dp"
				    android:background="@color/sky_blue"
				    android:layout_alignParentBottom="true" />
	            
	        </RelativeLayout>
	        
	    </com.example.viewpagertest.view.TabHorizontalScrollView>
	    
	    <ImageView
	        android:id="@+id/iv_nav_left"
	        android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:src="@drawable/iv_navagation_scroll_left"
	    	android:layout_marginLeft="10dp"
	    	android:layout_centerVertical="true"
	    	android:layout_alignParentLeft="true" />
        
	    <ImageView
	        android:id="@+id/iv_nav_right"
	        android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:src="@drawable/iv_navagation_scroll_right"
	    	android:layout_marginRight="10dp"
	    	android:layout_centerVertical="true"
	    	android:layout_alignParentRight="true"/>
        
    </RelativeLayout>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:layout_below="@+id/rl_tab" />

</RelativeLayout>

2，MainActivity.java

package com.example.viewpagertest;

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.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.RelativeLayout;

import com.example.viewpagertest.fragment.CommonFragment;
import com.example.viewpagertest.view.TabHorizontalScrollView;

public class MainActivity extends FragmentActivity {

	protected static final String TAG = "MainActivity";
	private ViewPager vp;
	private ImageView iv_indicator,iv_nav_right,iv_nav_left;
	private RadioGroup rg;
	private static String[] tabTitle = { "选项1", "选项2", "选项3", "选项4", "选项5", "选项6" };	//标题
	private int currentNavItemWidth,currentIndicatorLeft = 0;
	private TabHorizontalScrollView tsv;
	private int cardinality; //将屏幕按宽分成的份数
	private RelativeLayout rl;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		findView();
		initView();
		setListener();
	}

	private void setListener() {
		
		rg.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {

				Log.i(TAG, "checkedId:"+checkedId);
				
				//RadioGroup
				rg.check(checkedId);
				
				//indicator
				TranslateAnimation animation = new TranslateAnimation(
						currentIndicatorLeft ,
						((RadioButton) rg.getChildAt(checkedId)).getLeft(), 0f, 0f);
				animation.setInterpolator(new LinearInterpolator());
				animation.setDuration(300);
				animation.setFillAfter(true);
				
				iv_indicator.startAnimation(animation);//执行位移动画
				
				currentIndicatorLeft = rg.getChildAt(checkedId).getLeft();//记录当前 下标的距最左侧的 距离
				
				//ViewPager
				vp.setCurrentItem(checkedId);//ViewPager 跟随一起 切换
				
				//ScrollView的滑动
				int x = (checkedId > 0 ? ((RadioButton) rg.getChildAt(checkedId)).getLeft() : 0) - ((RadioButton) rg.getChildAt(1)).getLeft();
				tsv.smoothScrollTo(x, 0);
			}
		});
		
		vp.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int position) {
				
				Log.i(TAG, "position: " + position);
				
				if(rg != null){
					rg.getChildAt(position).performClick();
				}
				
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
	}

	private void initView() {

		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		
		cardinality = 4;
		if(tabTitle.length < 4){
			cardinality = tabTitle.length;
		}
		
		currentNavItemWidth = dm.widthPixels/cardinality;
		
		//indicator
		LayoutParams param = iv_indicator.getLayoutParams();
		param.width = currentNavItemWidth;// 初始化滑动下标的宽
		iv_indicator.setLayoutParams(param);
		
		//RadioGroup
		LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
		rg.removeAllViews();
		for(int i = 0; i < tabTitle.length; i++){
			
			RadioButton rb = (RadioButton) inflater.inflate(R.layout.nav_rg_item, null);
			rb.setLayoutParams(new LinearLayout.LayoutParams(currentNavItemWidth, LayoutParams.MATCH_PARENT));
			rb.setId(i);
			rb.setText(tabTitle[i]);
			
			rg.addView(rb);
		}
		
		//ViewPaper
		TabFragmentPagerAdapter pagerAdapter = new TabFragmentPagerAdapter(getSupportFragmentManager());
		vp.setAdapter(pagerAdapter);
		
		//TabHorizontalScrollView
		tsv.setParams(rl, iv_nav_left, iv_nav_right, this);
		iv_nav_left.setVisibility(View.GONE); //初始化时默认选中第一个，所以将向左的箭头隐藏
		if(tabTitle.length <= 4){
			iv_nav_right.setVisibility(View.GONE); //向右的箭头隐藏
		}
	}
	
	class TabFragmentPagerAdapter extends FragmentPagerAdapter {

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

		@Override
		public Fragment getItem(int arg0) {
			
			Fragment fg = new CommonFragment();
			Bundle args = new Bundle();
			args.putString(CommonFragment.TV, tabTitle[arg0]);
			fg.setArguments(args);
			
			return fg;
		}

		@Override
		public int getCount() {

			if(tabTitle != null){
				return tabTitle.length;
			}
			
			return 0;
		}
		
	}

	private void findView() {
		
		rl = (RelativeLayout) findViewById(R.id.rl_nav);
		tsv = (TabHorizontalScrollView) findViewById(R.id.sv_nav);
		rg = (RadioGroup) findViewById(R.id.rg_nav);
		
		iv_indicator = (ImageView) findViewById(R.id.iv_nav_indicator);
		iv_nav_left = (ImageView) findViewById(R.id.iv_nav_left);
		iv_nav_right = (ImageView) findViewById(R.id.iv_nav_right);
		
		
		vp = (ViewPager) findViewById(R.id.vp);
		
	}

}

3,TabHorizontalScrollView.java

package com.example.viewpagertest.view;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;

public class TabHorizontalScrollView extends HorizontalScrollView {
	private View view;
	private ImageView leftImage;
	private ImageView rightImage;
	private int windowWitdh = 0;
	private Activity mContext;

	public TabHorizontalScrollView(Context context, AttributeSet attrs,
			int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
	}

	public TabHorizontalScrollView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}

	public TabHorizontalScrollView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public void setParams(View view, ImageView leftImage,
			ImageView rightImage, Activity context){
		this.mContext = context;
		this.view = view;
		this.leftImage = leftImage;
		this.rightImage = rightImage;
		DisplayMetrics dm = new DisplayMetrics();
		this.mContext.getWindowManager().getDefaultDisplay().getMetrics(dm);
		windowWitdh = dm.widthPixels;
	}
	
	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		super.onScrollChanged(l, t, oldl, oldt);
		
		Log.i("MainActivity", "view width:"+view.getWidth()+"window width:"+windowWitdh+",l:"+l+",oldl:"+oldl);
		
		if(!mContext.isFinishing() && view != null 
				&& leftImage != null && rightImage != null){
			
			if(view.getWidth() < windowWitdh){
				leftImage.setVisibility(View.GONE);
				rightImage.setVisibility(View.GONE);
			}else{
				if(l == 0){
					leftImage.setVisibility(View.GONE);
					rightImage.setVisibility(View.VISIBLE);
				}else if(view.getWidth() - l == windowWitdh){
					leftImage.setVisibility(View.VISIBLE);
					rightImage.setVisibility(View.GONE);
				}else{
					leftImage.setVisibility(View.VISIBLE);
					rightImage.setVisibility(View.VISIBLE);
				}
			}
		}
	}
}

源代码下载地址 http://download.csdn.net/detail/iloveforeign/6374499