本次列出的实例主要实现底部导航栏点击4个标签或滑动页面实现分页展示,采用的是viewpager+fragment的方法,使用一个主容器加4个fragment。
底部导航栏标签样式分选中和没有选中两种,因此,在编写底部导航栏的.xml文件前需先要在drawable下创建图片选择器与文字颜色选择器selector
此为其中一个按钮的图片选择器selector,其他的用相同的方法创建
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@mipmap/btn_home_s"></item>
<item android:state_checked="false" android:drawable="@mipmap/btn_home_n"></item>
</selector>
颜色选择
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#096f95"></item>
<item android:state_checked="false" android:color="#545658"></item>
</selector>
底部导航栏的布局文件activity_main.xml
<?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">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:background="#ffffff">
<RadioButton
android:id="@+id/rb_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="@null"
android:background="@null"
android:layout_weight="1"
android:gravity="center"
android:layout_gravity="center"
android:textColor="@drawable/rb_text_color"
android:textSize="12sp"
android:checked="true"
android:text="首页"
android:drawableTop="@drawable/rb_home_selector"/>
<RadioButton
android:id="@+id/rb_healthdata"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="@null"
android:background="@null"
android:layout_weight="1"
android:gravity="center"
android:layout_gravity="center"
android:textColor="@drawable/rb_text_color"
android:textSize="12sp"
android:text="健康数据"
android:drawableTop="@drawable/rb_healthdata_selector"/>
<RadioButton
android:id="@+id/rb_illmanagement"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="@null"
android:background="@null"
android:layout_weight="1"
android:gravity="center"
android:layout_gravity="center"
android:textColor="@drawable/rb_text_color"
android:textSize="12sp"
android:text="慢病管理"
android:drawableTop="@drawable/rb_ill_selector"/>
<RadioButton
android:id="@+id/rb_myself"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="@null"
android:background="@null"
android:layout_weight="1"
android:gravity="center"
android:layout_gravity="center"
android:textColor="@drawable/rb_text_color"
android:textSize="12sp"
android:text="我"
android:drawableTop="@drawable/rb_myself_selector"/>
</RadioGroup>
</RelativeLayout>
在编写MainActivity.java前还需要有4个fragment的布局文件和Fragment.java,布局文件此处省略,主要能看出页面变化就行,Fragment.java如下(只列出了其中一个)
public class HomeFragment extends Fragment {
public HomeFragment(){
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_home, container, false);
}
}
主容器还需要一个适配器,该适配器继承了FragmentPagerAdapter,通过List存储要切换的Fragment
public class MainFragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> list;
public MainFragmentAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.list = list;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
}
接下来就是MainActivity.java
public class MainActivity extends FragmentActivity {
private ViewPager viewPager;
private RadioGroup radioGroup;
private RadioButton rbHome,rbHealthdata,rbIllmanagement,rbMyself;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//设置状态栏颜色
StatusBarUtils.compat(this, Color.rgb(27,161,212));
setContentView(R.layout.activity_main);
initView();
}
private void initView(){
radioGroup = (RadioGroup)findViewById(R.id.radioGroup);
rbHome = (RadioButton)findViewById(R.id.rb_home);
rbHealthdata = (RadioButton)findViewById(R.id.rb_healthdata);
rbIllmanagement = (RadioButton)findViewById(R.id.rb_illmanagement);
rbMyself =(RadioButton)findViewById(R.id.rb_myself);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rb_home:
/**
* setCurrentItem第二个参数控制页面切换动画
* true:打开/false:关闭
*/
viewPager.setCurrentItem(0, false);
break;
case R.id.rb_healthdata:
viewPager.setCurrentItem(1, false);
break;
case R.id.rb_illmanagement:
viewPager.setCurrentItem(2, false);
break;
case R.id.rb_myself:
viewPager.setCurrentItem(3, false);
break;
}
}
});
/**
* ViewPager部分
*/
viewPager = (ViewPager) findViewById(R.id.viewPager);
HomeFragment mHomeFragment = new HomeFragment();
HealthDataFragment mHealthDataFragment = new HealthDataFragment();
IllManagementFragment mIllManagementFragment = new IllManagementFragment();
MyselfFragment mMyselfFragment = new MyselfFragment();
List<Fragment> alFragment = new ArrayList<>();
alFragment.add(mHomeFragment);
alFragment.add(mHealthDataFragment);
alFragment.add(mIllManagementFragment);
alFragment.add(mMyselfFragment);
//ViewPager设置适配器
viewPager.setAdapter(new MainFragmentAdapter(getSupportFragmentManager(),alFragment));
//ViewPager显示第一个Fragment
viewPager.setCurrentItem(0);
//ViewPager页面切换监听
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
radioGroup.check(R.id.rb_home);
break;
case 1:
radioGroup.check(R.id.rb_healthdata);
break;
case 2:
radioGroup.check(R.id.rb_illmanagement);
break;
case 3:
radioGroup.check(R.id.rb_myself);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}