1.实现思路
主界面四个导航按钮使用RadioButton，通过Selector 设置它的drawableTop属性来设置所显示的图片。通过 FragmentPagerAdapter 实现切换。
2.实现
（1）资源文件编写
主界面布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.tiger.a20180115_wechat.MainActivity">
<RadioGroup
android:id="@+id/rg_menu_bar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="@color/myWhite"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_weChat"
style="@style/menu_item"
android:drawableTop="@drawable/menu_chat"
android:text="WeChat"/>
<RadioButton
android:id="@+id/rb_contacts"
style="@style/menu_item"
android:drawableTop="@drawable/menu_contacts"
android:text="Contacts"/>
<RadioButton
android:id="@+id/rb_discovery"
style="@style/menu_item"
android:drawableTop="@drawable/menu_discovery"
android:text="Discovery"/>
<RadioButton
android:id="@+id/rb_me"
style="@style/menu_item"
android:drawableTop="@drawable/menu_me"
android:text="Me"/>
</RadioGroup>
<View
android:id="@+id/div_menu_bar"
android:layout_width="match_parent"
android:layout_height="3px"
android:layout_above="@id/rg_menu_bar"
android:background="@color/divColor"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/div_menu_bar"/>
</RelativeLayout>
（2）因为四个RadioButton 都一样所以抽出一个Style
<style name="menu_item">
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">@android:color/transparent</item>
<item name="android:button">@null</item>
<item name="android:gravity">center</item>
<item name="android:paddingTop">3dp</item>
<item name="android:textColor">@drawable/menu_text</item>
<item name="android:textSize">18sp</item>
</style>
（3）文本颜色设置 Selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/txtGreen" android:state_checked="true" />
<item android:color="@color/txtGray" />
</selector>
（4）还有就是四个资源文件 Selector ，就是选中和不选中显示的图片，贴出一个，其他三个类似
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/chat_press" android:state_checked="true" />
<item android:drawable="@mipmap/chat_normal" />
</selector>
（5）接下来就是编写四个Fragment及对应布局
3.FragmentPagerAdapter
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class MyFragmentAdapter extends FragmentPagerAdapter{
private FragmentWeChat fgWeChat;
private FragmentContacts fgContacts;
private FragmentDiscovery fgDiscovery;
private FragmentMe fgMe;
public MyFragmentAdapter(FragmentManager fm) {
super(fm);
fgWeChat=new FragmentWeChat();
fgContacts=new FragmentContacts();
fgDiscovery=new FragmentDiscovery();
fgMe=new FragmentMe();
}
@Override
public Fragment getItem(int position) {
Fragment fragment=null;
switch (position){
case 0:
fragment=fgWeChat;
break;
case 1:
fragment=fgContacts;
break;
case 2:
fragment=fgDiscovery;
break;
case 3:
fragment=fgMe;
break;
}
return fragment;
}
@Override
public int getCount() {
return 4;
}
}
4. MainActivity
import android.support.v4.view.ViewPager;
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener
, ViewPager.OnPageChangeListener {
private RadioGroup radioGroup;
private RadioButton rBtnChat;
private RadioButton rBtnContacts;
private RadioButton rBtnDiscovery;
private RadioButton rBtnMe;
private ViewPager viewPager;
private MyFragmentAdapter fragementAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
void init() {
rBtnChat = (RadioButton) findViewById(R.id.rb_weChat);
rBtnContacts = (RadioButton) findViewById(R.id.rb_contacts);
rBtnDiscovery = (RadioButton) findViewById(R.id.rb_discovery);
rBtnMe = (RadioButton) findViewById(R.id.rb_me);
viewPager = (ViewPager) findViewById(R.id.viewPager);
radioGroup = (RadioGroup) findViewById(R.id.rg_menu_bar);
radioGroup.setOnCheckedChangeListener(this);
fragementAdapter = new MyFragmentAdapter(getSupportFragmentManager());
viewPager.setAdapter(fragementAdapter);
viewPager.setCurrentItem(0);
viewPager.setOnPageChangeListener(this);
rBtnChat.setChecked(true); // set default choose
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rb_weChat:
viewPager.setCurrentItem(0);
break;
case R.id.rb_contacts:
viewPager.setCurrentItem(1);
break;
case R.id.rb_discovery:
viewPager.setCurrentItem(2);
break;
case R.id.rb_me:
viewPager.setCurrentItem(3);
break;
}
}
//重写ViewPager页面切换的处理方法
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
//state的状态有三个，0表示什么都没做，1正在滑动，2滑动完成
if (state == 2) {
//对应值需要与 FragmentPagerAdapter 中的对应
switch (viewPager.getCurrentItem()) {
case 0:
rBtnChat.setChecked(true);
break;
case 1:
rBtnContacts.setChecked(true);
break;
case 2:
rBtnDiscovery.setChecked(true);
break;
case 3:
rBtnMe.setChecked(true);
break;
}
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu,menu);
return true;
}
}
主要代码就是以上这些。
参考自：http://www.runoob.com/w3cnote/android-tutorial-fragment-demo4.html