Fragment+viewpager+Radiobutton实现点击滑动页面

滑动页面viewpager+底部按钮Radiobutton

main.xml

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/rg">

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


    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="horizontal"
        >

        <RadioButton
            android:id="@+id/rb01"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/pic_home_selector"
            android:gravity="center"
            android:text="首页"
            android:textColor="@drawable/test_color_selector"
            android:background="@drawable/bg_selector"
            android:padding="5dp"/>
        <RadioButton
            android:id="@+id/rb02"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/pic_hd_selector"
            android:gravity="center"
            android:text="热门"
            android:textColor="@drawable/test_color_selector"
            android:background="@drawable/bg_selector"
            android:padding="5dp"/>
        <RadioButton
            android:id="@+id/rb03"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/pic_hot_selector"
            android:gravity="center"
            android:text="活动"
            android:textColor="@drawable/test_color_selector"
            android:background="@drawable/bg_selector"
            android:padding="5dp"/>
        <RadioButton
            android:id="@+id/rb04"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/pic_me_selector"
            android:gravity="center"
            android:text="我的"
            android:textColor="@drawable/test_color_selector"
            android:background="@drawable/bg_selector"
            android:padding="5dp"/>
    </RadioGroup>


</RelativeLayout>

创建要显示的fragment页

既然四个radiobutton，就意味着四个fragment。所以需要另外写fragment
layout_fragment01.xml（省略三个）

<?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">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="第er页"
        android:textSize="24sp"
        android:gravity="center"
        android:textColor="#fff"
        android:background="#58ce19"/>
</LinearLayout>

创建对应的fragment01.java进行页面绑定

继承自Fragment 进行绑定页面

package com.example.day_fragment_viewpager;

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

public class fragment01 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.layout_fragment01,null);
        return view;
    }
}

设置按钮点击效果

创建文字选择器text_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	//按下显示文字颜色为红色
    <item android:color="#ff0000" android:state_checked="true" />
    //未按下显示文字颜色为灰色
    <item android:color="#aaaaaa" android:state_checked="false" />
</selector>

创建图片按钮选择器pic_hd_selector.xml（省略剩余三个）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	//按下显示红色图片
    <item  android:drawable="@drawable/hd_y" android:state_checked="true" />
    //未按下显示红色图片
    <item  android:drawable="@drawable/hd_n" android:state_checked="false" />
</selector>

创建背景选择器bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	//按下显示radiobutton_background_unchecked文件
    <item android:drawable="@drawable/radiobutton_background_unchecked" android:state_checked="true"/>
    //未按下显示radiobutton_background_checked文件
    <item android:drawable="@drawable/radiobutton_background_checked" android:state_checked="false"/>
</selector>

引用文件
radiobutton_background_unchecked.xml///radiobutton_background_checked.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#fff"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#D4E3F6"/>
</shape>

实现不同fragment的切换

标题fragment视图出现的地方就是在viewpage上

package com.example.day_fragment_viewpager;

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.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;

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

public class MainActivity extends FragmentActivity {

    private ViewPager viewPager;
    private RadioGroup rg;
    private RadioButton rb01,rb02,rb03,rb04;
    //定义Fragment列表存放fragment页
    private List<Fragment> fragments= new ArrayList<>();
    private InnerPagerAdapter adapter;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initview();
        initFragment();
        initAdapter();
        setListrner();

    }
    //进行viewPager及RadioGroup（RadioButton）的id绑定
    private void initview() {
        viewPager = findViewById(R.id.viewpager);
        rg = findViewById(R.id.rg);
        rb01 = findViewById(R.id.rb01);
        rb02 = findViewById(R.id.rb02);
        rb03 = findViewById(R.id.rb03);
        rb04 = findViewById(R.id.rb04);
        //设置第一个按钮rb01初始状态为按下状态
        rb01.setChecked(true);
        //先给radiogroup设置点击事件，根据radiobutton的id的不同，确认出你想要切换的fragment
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.rb01:
                        viewPager.setCurrentItem(0,false);
                        break;
                    case R.id.rb02:
                        viewPager.setCurrentItem(1,false);
                        break;
                    case R.id.rb03:
                        viewPager.setCurrentItem(2,false);
                        break;
                    case R.id.rb04:
                        viewPager.setCurrentItem(3,false);
                        break;
                }
            }
        });

    }

    //向fragment的列表里添加四个页面
    private void initFragment() {
        fragments.add(new fragment01());
        fragments.add(new fragment02());
        fragments.add(new fragment03());
        fragments.add(new fragment04());
    }

    //给viewPager设置适配器adapter
    private void initAdapter() {
        adapter = new InnerPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
    }

    //设置viewPager的setOnPageChangeListener方法
    private void setListrner() {
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }
            //根据滑动的页数绑定选中的按钮
            @Override
            public void onPageSelected(int i) {
                switch (i){
                    case 0:
                        rg.check(R.id.rb01);
                        break;
                    case 1:
                        rg.check(R.id.rb02);
                        break;
                    case 2:
                        rg.check(R.id.rb03);
                        break;
                    case 3:
                        rg.check(R.id.rb04);
                        break;
                    default:
                        break;
                }

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

    //设置viewpager适配器继承自FragmentPagerAdapter
    class InnerPagerAdapter extends FragmentPagerAdapter  {
        public InnerPagerAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        //获取要显示的是哪个Fragment
        public Fragment getItem(int i) {
            return fragments.get(i);
        }

        @Override
        //容器中有几页
        public int getCount() {
            return fragments.size();
        }
    }

}