ViewPager+Fragment+RadioGruop实现滑动效果

按照国际惯例，先上效果图，让各位看看是不是想要的效果。

如图，现在很多应用都有上面的导航栏，并且实现了滑动的炫酷效果。这种效果是怎么实现的呢，其实非常简单，下面我来一一道来。

首先我们先看布局文件：(注：根标签是博主项目里的，可以替换成其他的，如LinearLayout)

<com.knightboy.coolshoes.myView.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:myapp="http://schemas.android.com/apk/res-auto"
    android:id="@+id/slidingMenu"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:scrollbars="none"
    myapp:rightPadding="0dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/mcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical">

            <!--头部标题 -->
            <RelativeLayout
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="45dp"
                android:background="#FF4500"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="5dp"
                android:paddingBottom="5dp">
                <ImageView
                    android:id="@+id/menu"
                    android:layout_width="30dp"
                    android:layout_height="21dp"
                    android:src="@drawable/menu"
                    android:layout_alignParentLeft="true"
                    android:layout_marginTop="5dp"
                    android:scaleType="centerInside"/>
                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:layout_centerInParent="true"
                    android:scaleType="centerInside"
                    android:src="@drawable/appname"/>
                <ImageView
                    android:id="@+id/hasData_iv"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/hasdata"
                    android:scaleType="centerInside"/>

            </RelativeLayout>

   <span style="white-space:pre">	</span>    <!--重点是这部分代码，也就是图片上方的导航栏 -->

            <RadioGroup
                android:id="@+id/group"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <RadioButton
                    android:id="@+id/button1"
                    style="@style/health_RadioButton"
                    android:text="概况"
                    android:checked="true"/>
                <RadioButton
                    android:id="@+id/button2"
                    style="@style/health_RadioButton"
                    android:text="今日"/>
                <RadioButton
                    android:id="@+id/button3"
                    style="@style/health_RadioButton"
                    android:text="最近"/>
                <RadioButton
                    android:id="@+id/button4"
                    style="@style/health_RadioButton"
                    android:text="参数"/>

            </RadioGroup>
            
<span style="white-space:pre">	</span>   <!-- 这里引入了Viewpager -->
            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </android.support.v4.view.ViewPager>
        </LinearLayout>
    </LinearLayout>

</com.knightboy.coolshoes.myView.SlidingMenu>

要知道，定义好了ViewPager，那就要定义好ViewPager里面显示的内容，这就是Fragment了。下面我示范一个Fragment的定义，其他三个类似：

先看Fragment布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/bueaty1"
        android:scaleType="fitCenter"/>

</LinearLayout>

布局文件非常简单，只是放置了一个ImageView用来显示图像。

接下来看看对应的Fragment的定义，超级简单：

package com.knightboy.coolshoes.mainFragments;

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

import com.knightboy.coolshoes.R;

/**
 * Created by knightBoy on 2015/8/12.
 */
public class FirstFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootview = inflater.inflate(R.layout.first_fui,container,false);
        return rootview;
    }
}

只是显示了布局文件而已，其他三个类似，这里就不赘述了。

接下来就是重头戏了，也就是包含ViewPager的Activity的实现，先看代码：

package com.knightboy.coolshoes.activitys;

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.util.DisplayMetrics;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import com.knightboy.coolshoes.R;
import com.knightboy.coolshoes.mainFragments.FirstFragment;
import com.knightboy.coolshoes.mainFragments.ParamFragment;
import com.knightboy.coolshoes.mainFragments.RecentFragment;
import com.knightboy.coolshoes.mainFragments.TodayFragment;
import com.knightboy.coolshoes.myView.CircularImage;
import com.knightboy.coolshoes.myView.SlidingMenu;

import java.util.ArrayList;

/**
 * Created by knightBoy on 2015/8/12.
 */
public class HealthActivity extends FragmentActivity {
    //基本控件及所需对象
    private RadioGroup radioGroup;
    private RadioButton button1,button2,button3,button4;
    private ViewPager viewPager;
    private ArrayList<Fragment> fragments = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.health_ui);
        //得到控件
        radioGroup = (RadioGroup)findViewById(R.id.group);
        button1 = (RadioButton)findViewById(R.id.button1);
        button2 = (RadioButton)findViewById(R.id.button2);
        button3 = (RadioButton)findViewById(R.id.button3);
        button4 = (RadioButton)findViewById(R.id.button4);
        viewPager = (ViewPager)findViewById(R.id.viewPager);


        //得到Fragment链表
        Fragment fragment1 = new FirstFragment();
        Fragment fragment2 = new TodayFragment();
        Fragment fragment3 = new RecentFragment();
        Fragment fragment4 = new ParamFragment();
        fragments.add(fragment1);
        fragments.add(fragment2);
        fragments.add(fragment3);
        fragments.add(fragment4);

        //给viewPager设置适配器
        viewPager.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager(), fragments));

        //设置当前页
        viewPager.setCurrentItem(0);
        radioGroup.check(R.id.button1);

        //设置页面变化监听器
        viewPager.setOnPageChangeListener(new MyOnPageChangeListener());

        //给按钮设置监听器
        radioGroup.setOnCheckedChangeListener(new MyOnCheckChangeListener());
    }


    //**********************ViewPager的数据来源*******************************************************
    class MyViewPagerAdapter extends FragmentPagerAdapter {

        ArrayList<Fragment> fragmentlist;

        public MyViewPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragments){
            super(fm);
            this.fragmentlist = fragments;
        }

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

        @Override
        public Fragment getItem(int position) {
            return fragmentlist.get(position);
        }
    }

    //**********************ViewPager适配器结束*******************************************************

    //**********************实现ViewPager+RadioButton效果所需的内部监听器*******************************
    //ViewPager的切换监听器类
    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

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

        @Override
        public void onPageSelected(int position) {

<span style="white-space:pre">	</span>   //页面选中是，让相应RadioButton选中
            switch (position) {
                case 0:
                    radioGroup.check(R.id.button1);
                    currentIndex = position;
                    break;
                case 1:
                    radioGroup.check(R.id.button2);
                    currentIndex = position;
                    break;
                case 2:
                    radioGroup.check(R.id.button3);
                    currentIndex = position;
                    break;
                case 3:
                    radioGroup.check(R.id.button4);
                    currentIndex = position;
                default:
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    //RadioButton的监听器类
    class MyOnCheckChangeListener implements RadioGroup.OnCheckedChangeListener{

        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {

<span style="white-space:pre">	</span>    //RadioButton选中时，滑动到相应页面
            switch (checkedId){
                case R.id.button1:
                    viewPager.setCurrentItem(0);
                    currentIndex = 0;
                    break;
                case R.id.button2:
                    viewPager.setCurrentItem(1);
                    currentIndex = 1;
                    break;
                case R.id.button3:
                    viewPager.setCurrentItem(2);
                    currentIndex = 2;
                    break;
                case R.id.button4:
                    viewPager.setCurrentItem(3);
                    break;
                default:
                    break;
            }
        }
    }

    //*******************实现ViewPager+RadioButton效果所需的内部监听器结束*****************************

}

博主自认为注释还是蛮清楚，这里对代码就不做解释了。

手码不易，转载请注明出处。