ViewPager、Fragment、RadioButton实现顶部切换Tab页面

1。首先准备xml

主界面

<?xml version="1.0" encoding="utf-8"?>
<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="com.louis.louistabsdemo.MainActivity">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/id_horizontalScrollView"
android:scrollbars="none"
>
<RadioGroup
android:id="@+id/id_rg_top"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

</RadioGroup>

</HorizontalScrollView>

<android.support.v4.view.ViewPager
android:layout_below="@id/id_horizontalScrollView"
android:id="@+id/id_vp_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

</android.support.v4.view.ViewPager>
</RelativeLayout>

fragment界面

<FrameLayout 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="com.louis.louistabsdemo.MyFragment">

<!-- TODO: Update blank fragment radio_btn -->
<TextView
android:gravity="center"
android:id="@+id/id_tv_fragment_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/hello_blank_fragment" />

</FrameLayout>

RadioButton

<?xml version="1.0" encoding="utf-8"?>
<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="按钮"
android:background="@drawable/tab_selector"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:button="@null"
/>

RadioButton的selector效果（摘抄自网络）

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true" ><!-- 选中状态 -->
<layer-list >
<item >
<shape android:shape="rectangle">
<stroke android:width="5dp"  android:color="#ff0000"/>
</shape>
</item>
<item  android:bottom="5dp" >
<shape android:shape="rectangle" >
<solid android:color="#fff"/>
</shape>
</item>
</layer-list>
</item>
<item ><!-- 默认状态 -->
<shape >
<solid  android:color="#FAFAFA"/>
</shape>
</item>
</selector>

2。javacode

javabean

package com.louis.louistabsdemo;

/**
* Created by Administrator on 2016/3/9.
*/
public class TabsBean {
private  int id;
private  String name;
private  String url;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getUrl() {
return url;
}

public void setUrl(String url) {
this.url = url;
}

public TabsBean(int id, String name, String url) {
this.id = id;
this.name = name;
this.url = url;
}

public TabsBean() {
}

@Override
public String toString() {
return "TabsBean{" +
"id=" + id +
", name='" + name + '\'' +
", url='" + url + '\'' +
'}';
}
}

Fragment

package com.louis.louistabsdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
* A simple {@link Fragment} subclass.
* Use the {@link MyFragment#newInstance} factory method to
* create an instance of this fragment.
*/
public class MyFragment extends Fragment {
// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";

// TODO: Rename and change types of parameters
private String mParam1;
private String mParam2;

public MyFragment() {
// Required empty public constructor
}

/**
* Use this factory method to create a new instance of
* this fragment using the provided parameters.
*
* @param param1 Parameter 1.
* @param param2 Parameter 2.
* @return A new instance of fragment MyFragment.
*/
// TODO: Rename and change types and number of parameters
public static MyFragment newInstance(String param1, String param2) {
MyFragment fragment = new MyFragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
mParam2 = getArguments().getString(ARG_PARAM2);
}
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the radio_btn for this fragment
View view= inflater.inflate(R.layout.fragment_my, container, false);
TextView tv_fragment_content= (TextView) view.findViewById(R.id.id_tv_fragment_content);
tv_fragment_content.setText(mParam1+"和"+mParam2);
return  view;
}

}

FragmentPagerAdapter

package com.louis.louistabsdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
* Created by Administrator on 2016/3/9.
*/
public class MyFragmentAdapter extends FragmentPagerAdapter{

private List<Fragment> mFragmentList;
private FragmentManager mFragmentManager;

public MyFragmentAdapter(FragmentManager fm,List<Fragment> fragmentList) {
super(fm);
mFragmentList=fragmentList;
mFragmentManager=fm;
}

@Override
public Fragment getItem(int position) {
return mFragmentList.get(position%mFragmentList.size());
}

@Override
public int getCount() {
return mFragmentList.size();
}

/*  @Override
public int getItemPosition(Object object) {
return POSITION_NONE;  //没有找到child要求重新加载
}*/
}

activity

package com.louis.louistabsdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.widget.HorizontalScrollView;
import android.widget.RadioButton;
import android.widget.RadioGroup;

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

public class MainActivity extends AppCompatActivity {

private RadioGroup mRadioGroup;
private ViewPager mViewPager;
private HorizontalScrollView mHorizontalScrollView;
private List<TabsBean> mTasBeans=new ArrayList<TabsBean>();
private List<Fragment> mFragmentList=new ArrayList<Fragment>();
private int mScreenWidth;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//取屏幕宽度
DisplayMetrics metrics=new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
mScreenWidth=metrics.widthPixels;

//find
mRadioGroup= (RadioGroup) findViewById(R.id.id_rg_top);
mViewPager= (ViewPager) findViewById(R.id.id_vp_content);
mHorizontalScrollView= (HorizontalScrollView) findViewById(R.id.id_horizontalScrollView);
//监听
mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {

mViewPager.setCurrentItem(checkedId);
}
});

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
RadioButton rb=(RadioButton)mRadioGroup.getChildAt(position);
rb.setChecked(true);
int left=rb.getLeft();
int width=rb.getWidth();//getMeasuredWidth
int x=(left+width/2)-mScreenWidth/2;;
Log.i("main", "louis==xx==left:" + left+"-width:"+width+"-X:"+x);
mHorizontalScrollView.smoothScrollTo(x,0);//平缓滚动到某处
}

@Override
public void onPageScrollStateChanged(int state) {

}
});
//准备数据
for (int i=0;i<8;i++){
mTasBeans.add(new TabsBean(i,"页面"+i,"http://xxx.com/"+i));
}
//动态添加RadioButton
for (int i=0;i<mTasBeans.size();i++){
RadioButton rb=(RadioButton) LayoutInflater.from(this).
inflate(R.layout.radio_btn, null);
rb.setId(i);
rb.setText(mTasBeans.get(i).getName());
RadioGroup.LayoutParams params=new
RadioGroup.LayoutParams(RadioGroup.LayoutParams.WRAP_CONTENT,
RadioGroup.LayoutParams.WRAP_CONTENT);

mRadioGroup.addView(rb,params);
}
mRadioGroup.check(0);//默认选择第一个
//动态挺安静MyFragment
for (int i=0;i<mTasBeans.size();i++){
mFragmentList.add(MyFragment.newInstance(mTasBeans.get(i).getName(),mTasBeans.get(i).getUrl()));
}
//设置适配器
MyFragmentAdapter myFragmentAdapter=new MyFragmentAdapter(getSupportFragmentManager(),mFragmentList);
mViewPager.setAdapter(myFragmentAdapter);

}
}

3。结果



4。demo下载：http://download.csdn.net/detail/richiezhu/9457256