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"
androi
4000
d: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();
}
}

}