效果图:
既可以实现滑动使单选按钮改变颜色,也可以通过点击单选按钮实现页面跳转,类似于微信
xml代码(布局文件):
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent" tools:context="com.example.test0615.MainActivity">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/vp_main_viewpager"
></android.support.v4.view.ViewPager>
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/rg_main_radio"
>
<!--layout_weight属性:设置权重,每个单选按钮占屏幕宽度的四分之一;button属性:设置单选按钮不可见-->
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@null"
android:text="微信"
android:id="@+id/rb_mian_one"
android:layout_weight="1"
android:background="@drawable/selector_radiobutton"
/>
<!--background属性:设置单选按钮的选择器-->
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@null"
android:text="通讯录"
android:id="@+id/rb_mian_two"
android:layout_weight="1"
android:background="@drawable/selector_radiobutton"
/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@null"
android:text="发现"
android:id="@+id/rb_mian_three"
android:layout_weight="1"
android:background="@drawable/selector_radiobutton"
/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@null"
android:text="我"
android:id="@+id/rb_mian_four"
android:layout_weight="1"
android:background="@drawable/selector_radiobutton"
/>
</RadioGroup>
</LinearLayout>
选择器代码:
selcctor_radiobutton:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@color/colorPrimary"></item>//单选按钮被选中,背景颜色为蓝色
<item android:state_checked="false" android:drawable="@color/colorAccent"></item>//为被选中,背景颜色为粉色
</selector>
页面代码:
fragment_weixin.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="wrap_content"
android:text="这是微信页面"
android:textSize="40sp"
/>
</LinearLayout>
fragment_contacts.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="wrap_content"
android:text="这是通讯录页面"
android:textSize="40sp"
/>
</LinearLayout>
同样的页面,我们在写两个,在这里我就不再写了
接下来我们就是将页面转为Fragment了
WeiXinFragment.java
package com.example.test0615;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Administrator on 2017/6/15 0015.
*/
public class WeiXinFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_weixin,null);//方法的第一个参数为我们需要转化的页面
}
}
ContactsFragment.java
package com.example.test0615;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Administrator on 2017/6/15 0015.
*/
public class ContactsFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_contacts,null);
}
}
再建两个Java页面,将剩下的两个个页面转为Fragment
接下来就是代码的重中之重:
package com.example.test0615;
import android.support.annotation.IdRes;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private ViewPager vp_main_viewpager;
private RadioGroup rg_main_radio;
//定义一个用来放Fragment的集合
private List<Fragment> fragments=new ArrayList<>();
//用来放View的集合
private List<View> buttons;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vp_main_viewpager = (ViewPager) findViewById(R.id.vp_main_viewpager);
rg_main_radio = (RadioGroup) findViewById(R.id.rg_main_radio);
WeiXinFragment weiXinFragment=new WeiXinFragment();
ContactsFragment contactsFragment=new ContactsFragment();
FindFragment findFragment=new FindFragment();
MyFragment myFragment=new MyFragment();
//将Fragment放入集合
fragments.add(weiXinFragment);
fragments.add(contactsFragment);
fragments.add(findFragment);
fragments.add(myFragment);
//设置适配器
vp_main_viewpager.setAdapter(new MyAdapter(getSupportFragmentManager()));
//得到单选组的所有单选按钮
buttons=rg_main_radio.getTouchables();
//给页面设置一个监听事件
vp_main_viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//页面滑动事件
@Override
public void onPageSelected(int position) {
//根据页面的位置拿到每个页面对应的单选按钮
RadioButton radioButton= (RadioButton) buttons.get(position);
//将该单选按钮设置为选中状态
radioButton.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//给单选组设置点击事件监听
rg_main_radio.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
//如果当前单选按钮的ID为自己设置的ID
if(checkedId==R.id.rb_mian_one){
//设置当前展示的页面
vp_main_viewpager.setCurrentItem(0);
}else if(checkedId==R.id.rb_mian_two){
vp_main_viewpager.setCurrentItem(1);
}else if(checkedId==R.id.rb_mian_three){
vp_main_viewpager.setCurrentItem(2);
}else if(checkedId==R.id.rb_mian_four){
vp_main_viewpager.setCurrentItem(3);
}
}
});
}
class MyAdapter extends FragmentPagerAdapter{
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
}