ViewPager+FragmentPagerAdapter+RadioGroup实现顶部菜单栏

本讲内容：ViewPager+FragmentPagerAdapter+RadioGroup实现顶部菜单栏

 

示例一：

  

下面是res/layout/top1.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="45dp"

    android:background="@color/darkcyan"

    android:gravity="center"

    android:orientation="vertical" >

 

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:text="微信"

        android:textSize="20sp" />

 

</LinearLayout>

 

下面是res/layout/top2.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:orientation="vertical" >

 

    <RadioGroup

        android:id="@+id/id_radioGroup"

        android:layout_width="match_parent"

        android:layout_height="45dp"

        android:background="@color/ivory"

        android:orientation="horizontal"

        android:gravity="center"

        android:padding="5dp" >

 

        <RadioButton

            android:id="@+id/id_tab1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1.0"

            android:button="@null"

            android:checked="true"

            android:gravity="center"

            android:text="微信"

            android:textColor="@drawable/selector_tab_text_color" />

 

        <RadioButton

            android:id="@+id/id_tab2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1.0"

            android:button="@null"

            android:gravity="center"

            android:text="通信录"

            android:textColor="@drawable/selector_tab_text_color" />

 

        <RadioButton

            android:id="@+id/id_tab3"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1.0"

            android:button="@null"

            android:gravity="center"

            android:text="朋友"

            android:textColor="@drawable/selector_tab_text_color" />

    </RadioGroup>

    

    <ImageView 

        android:id="@+id/id_tab_line"

        android:layout_width="100dp"

        android:layout_height="wrap_content"

        android:background="@drawable/tabline"/>

 

</LinearLayout>

 

下面是res/layout/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"

    android:orientation="vertical" >

 

    <include layout="@layout/top1" />

 

    <include layout="@layout/top2" />

 

    <android.support.v4.view.ViewPager

        android:id="@+id/id_viewpager"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1.0" />

 

</LinearLayout>

 

下面是res/drawable/selector_tab_text_color文件

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

     <item android:state_checked="true" android:color="@color/red"/>    

     <item android:color="@color/black"/>

</selector>

 

下面是res/layout/tab01.xml 布局文件：(tab02、tab03类似就不贴了)

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

 

    <TextView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:gravity="center"

        android:text="第一个Tab"

        android:textSize="30sp" />

 

</LinearLayout>

 

下面是Tab01Fragment.java文件：（其它二个类似，就不贴了）

public class Tab01Fragment extends Fragment {

public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

View view=inflater.inflate(R.layout.tab01, container, false);

return view;

}

}

 

下面是TabAdapter.java文件：

/**

 * 功能：主页引导栏的三个Fragment页面设置适配器

 */

public class TabAdapter extends FragmentPagerAdapter {

private List<Fragment> mFragments;

 

public TabAdapter(FragmentManager fm, List<Fragment> mFragments) {

super(fm);

this.mFragments = mFragments;

}

 

public Fragment getItem(int position) {

return mFragments.get(position);

}

 

public int getCount() {

return mFragments.size();

}

}

 

下面是MainActivity.java主界面文件：

public class MainActivity extends FragmentActivity {

private RadioGroup mRadioGroup;

private RadioButton mRadio01;

private RadioButton mRadio02;

private RadioButton mRadio03;

 

private ImageView mTabLine;// 指导线

private int screenWidth;// 屏幕的宽度

 

private ViewPager mViewPager;

private TabAdapter mAdapter;

private List<Fragment> mFragments = new ArrayList<Fragment>();

 

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

initViews();

initEvent();

}

 

private void initViews() {

mRadioGroup = (RadioGroup) findViewById(R.id.id_radioGroup);

mRadio01 = (RadioButton) findViewById(R.id.id_tab1);

mRadio02 = (RadioButton) findViewById(R.id.id_tab2);

mRadio03 = (RadioButton) findViewById(R.id.id_tab3);

mTabLine = (ImageView) findViewById(R.id.id_tab_line);

//获取屏幕的宽度  

DisplayMetrics outMetrics=new DisplayMetrics();

getWindow().getWindowManager().getDefaultDisplay().getMetrics(outMetrics);

screenWidth=outMetrics.widthPixels;

//设置mTabLine宽度//获取控件的(注意：一定要用父控件的LayoutParams写LinearLayout.LayoutParams)

LinearLayout.LayoutParams lp=(LayoutParams) mTabLine.getLayoutParams();//获取控件的布局参数对象

lp.width=screenWidth/3;

mTabLine.setLayoutParams(lp); //设置该控件的layoutParams参数

mFragments.add(new Tab01Fragment());

mFragments.add(new Tab02Fragment());

mFragments.add(new Tab03Fragment());

mViewPager=(ViewPager) findViewById(R.id.id_viewpager);

mAdapter=new TabAdapter(getSupportFragmentManager(), mFragments);

mViewPager.setAdapter(mAdapter);

}

 

private void initEvent() {

mRadioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {

public void onCheckedChanged(RadioGroup group, int checkedId) {

switch (checkedId) {

case R.id.id_tab1:

mViewPager.setCurrentItem(0);// 选择某一页

break;

case R.id.id_tab2:

mViewPager.setCurrentItem(1);

break;

case R.id.id_tab3:

mViewPager.setCurrentItem(2);

break;

}

}

});

mViewPager.setOnPageChangeListener(new TabOnPageChangeListener());  

}

 

/**

 * 页卡滑动改变事件  

 */

public class TabOnPageChangeListener implements OnPageChangeListener {

 

/**

 * 当滑动状态改变时调用  

 * state=0的时候表示什么都没做，就是停在那

 * state=1的时候表示正在滑动 

 * state==2的时候表示滑动完毕了

 */

public void onPageScrollStateChanged(int state) {

 

}

 

/**

 * 当前页面被滑动时调用   

 * position:当前页面

 * positionOffset:当前页面偏移的百分比

 * positionOffsetPixels:当前页面偏移的像素位置  

 */

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

LinearLayout.LayoutParams lp=(LayoutParams) mTabLine.getLayoutParams();

 //获取组件距离左侧组件的距离  

lp.leftMargin=(int) ((positionOffset+position)*screenWidth/3);

mTabLine.setLayoutParams(lp);  

}

 

//当新的页面被选中时调用  

public void onPageSelected(int position) {

switch (position) {

case 0:

mRadio01.setChecked(true);    

break;

case 1:

mRadio02.setChecked(true);    

break;

case 2:

mRadio03.setChecked(true);    

break;

}

}

}

}