学步园

实现效果如图所示

点击上面的Tabs可以切换下面的Page，同样滑动下面的Page可以让上面的tabs自动切换。

一，ScrollView

主要是继承一个HorizontalScrollView，然后构造一个LinearLayout，在里面添加Button实现选项卡。选中后设置当前选中的按钮和Page。

package com.widgets;

import com.adapters.TabAdapter;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
 

public class ScrollTabView extends HorizontalScrollView implements ViewPager.OnPageChangeListener{

	private TabAdapter tabAdapter;
 
	private Context mContext;
	
	private LinearLayout container;
	
	private ViewPager viewPager;
	
	public ScrollTabView(Context context) {
		this(context,null);
		// TODO Auto-generated constructor stub
	}

	public ScrollTabView(Context context, AttributeSet attrs) {
		this(context, attrs,0);
		// TODO Auto-generated constructor stub
	}
	
	public ScrollTabView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
		mContext=context;
		
		container=new LinearLayout(mContext);
		container.setOrientation(LinearLayout.HORIZONTAL);
		
		addView(container);
	}

	public TabAdapter getAdapter() {
		return tabAdapter;
	}

	public void setAdapter(TabAdapter tabAdapter) {
		this.tabAdapter = tabAdapter;
		
		
		initTabs();
	}
	
	public void setViewPager(ViewPager viewPager){
		this.viewPager=viewPager;
		
		viewPager.setOnPageChangeListener(this);
	}
	
	private void initTabs(){
		 for(int i=0;i<tabAdapter.getCount();i++){
			 final int position=i;
			 View tab=tabAdapter.getView(i);
			 container.addView(tab);
			 
			 
			 tab.setOnClickListener(new OnClickListener(){

				@Override
				public void onClick(View v) {
					// TODO Auto-generated method stub
					selectedTab(position);
					viewPager.setCurrentItem(position);
				}
				 
			 });
		 }
		 
		 
		 //默认选中0
		 selectedTab(0);
	}

	
	public void selectedTab(int position){
		for(int i=0;i<container.getChildCount();i++){
			container.getChildAt(i).setSelected(position==i);
		}
		
		int w=container.getChildAt(0).getWidth();
		
		smoothScrollTo(w*(position-1), 0);			//不用考虑position=0,scrollTo(-x,0)相当于scrollTo(0,0)滚动不会超过视图边界
	}

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

	@Override
	public void onPageSelected(int position) {
		// TODO Auto-generated method stub
		selectedTab(position);
	}


}

1，抽象类TabAdapter

维护一个保存选项卡名的List

package com.adapters;

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

import android.view.View;

public abstract class TabAdapter {
	List<String> tabsList=new ArrayList<String>();
	
	public abstract  View getView(int position);
	
	public int getCount(){
		return tabsList.size();
	}
	
	public void add(String name){
		tabsList.add(name);
	}
	 
}

2，ScrollTabsAdapter

构造选项卡视图的适配器

package com.adapters;
 
 

 

import com.activities.R;

import android.app.Activity;
import android.content.Context;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;

public class ScrollTabsAdapter extends TabAdapter {
	private Activity activity;
	
	DisplayMetrics dm;
	
	public ScrollTabsAdapter(Activity activity) {
		super();
		// TODO Auto-generated constructor stub
		this.activity=activity;
		
		dm = new DisplayMetrics();
		activity.getWindowManager().getDefaultDisplay().getMetrics(dm);
	}



	@Override
	public View getView(int position) {
		// TODO Auto-generated method stub
		LayoutInflater inflater=(LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		Button button=(Button) inflater.inflate(R.layout.tabs, null);
 
		button.setWidth(dm.widthPixels/3); //设置button宽度为屏幕宽度的1/3
		button.setText(tabsList.get(position));
		return button;
	}

}

MainActivity

 package com.activities;

 
import com.adapters.PagerAdapter;
import com.adapters.ScrollTabsAdapter;
import com.adapters.TabAdapter;
import com.fragments.MyFragment;
 
 
import com.widgets.ScrollTabView;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {

	private ScrollTabView scrollTabsView;
	private TabAdapter tabsAdapter;
	private ViewPager viewPager;
	private Context context;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		context=getBaseContext();
		
		initTabs();
		initViewPager();
	}
	
	
	void initTabs(){
		scrollTabsView= (ScrollTabView) findViewById(R.id.tabs);
		tabsAdapter=new ScrollTabsAdapter(this);
		
		tabsAdapter.add("最近");
		tabsAdapter.add("歌曲");
		tabsAdapter.add("艺术家");
		tabsAdapter.add("专辑");
		tabsAdapter.add("播放列表");
		tabsAdapter.add("流派");
		
		scrollTabsView.setAdapter(tabsAdapter);
	}
	
	void initViewPager(){
		viewPager=(ViewPager) findViewById(R.id.viewpager);
		
		PagerAdapter pagerAdapter=new PagerAdapter(
				getSupportFragmentManager());
		
		MyFragment f1=new MyFragment("最近");
		pagerAdapter.addFragment(f1);
		
		MyFragment f2=new MyFragment("歌曲");
		pagerAdapter.addFragment(f2);
		
		MyFragment f3=new MyFragment("艺术家");
		pagerAdapter.addFragment(f3);
		
		MyFragment f4=new MyFragment("专辑");
		pagerAdapter.addFragment(f4);
		
		MyFragment f5=new MyFragment("播放列表");
		pagerAdapter.addFragment(f5);
		
		MyFragment f6=new MyFragment("流派");
		pagerAdapter.addFragment(f6);
	
		viewPager.setAdapter(pagerAdapter);
		
		scrollTabsView.setViewPager(viewPager);
	}

}

 http://download.csdn.net/detail/huweigoodboy/8009433