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效果所需的内部监听器结束*****************************}

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

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