实现效果如图所示
点击上面的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);
}
}