模仿网易云课堂的底部导航栏切换，也类似微信等，使用的是RadioButton+Fragment
就是這样的，点击每个按钮，中间内容切换到对应的Fragement显示不同的内容
- 先把四个RadioButton布局写好
activity_main_bottom.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!--Radio组-->
<RadioGroup
android:id="@+id/main_bottom_radio_group"
android:layout_width="match_parent"
android:layout_height="65dp"
android:orientation="horizontal"
android:layout_gravity="bottom"
>
<!--首页-->
<RadioButton
android:id="@+id/main_home_radioBtn"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:gravity="center_horizontal|bottom"
android:text="@string/tab_bottom_home"
android:drawableTop="@drawable/bottom_home_img"
style="@style/tab_bottom"
android:checked="true"
/>
<!--全部课程-->
<RadioButton
android:id="@+id/main_allcourse_radioBtn"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:gravity="center_horizontal|bottom"
android:text="@string/tab_bottom_allcourse"
android:drawableTop="@drawable/bottom_allcourse"
style="@style/tab_bottom"
/>
<!--学习中心-->
<RadioButton
android:id="@+id/main_mystudy_radioBtn"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:gravity="center_horizontal|bottom"
android:text="@string/tab_bottom_mystudy"
android:drawableTop="@drawable/bottom_mystudy"
android:textAlignment="center"
style="@style/tab_bottom"
/>
<!--账号-->
<RadioButton
android:id="@+id/main_account_radioBtn"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:gravity="center_horizontal|bottom"
android:text="@string/tab_bottom_account"
android:drawableTop="@drawable/bottom_account"
style="@style/tab_bottom"
/>
</RadioGroup>
</LinearLayout> ## RadioButton的style统一样式 ##
style下的tab_bottom.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<!--底部导航栏radio风格-->
<style name="tab_bottom">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">match_parent</item>
<item name="android:textSize">16dp</item>
<item name="android:layout_weight">1.0</item>
<item name="android:background">@null</item>
<item name="android:paddingTop">2dp</item>
<item name="android:textColor">@drawable/bottom_textcolor</item>
<item name="android:singleLine">true</item>
<item name="android:button">@null</item>
</style>
</resources>
其中定义了一个颜色文件内容如下：
@drawable/bottom_textcolor.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/bottomChecked"></item>
<item android:state_checked="false" android:color="@color/bottomUnChecked"></item>
</selector>以上就是关于底部导航的布局和格式设置
2. 接下来设置4个Fragment，就是点击不同的按钮，显示到对应的内容
（1）先定义这4个的布局文件，内容根据自己，這里简单定义，选择其中一个
fragment_course.xml为例，里面就包含一个图片，其他三个可根据喜好自己改变。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:icon="http://schemas.android.com/apk/res-auto"
android:id="@+id/course_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
>
<ImageView
android:id="@+id/course_bg1"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#06f"
android:src="@mipmap/b1"
/>
</LinearLayout>完成好布局后，为他们四个写各自的类
也很简单，同样以全部课程为例，代码如下：
FragmentCourse.java
“`
package com.huixue.study;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Administrator on 2016/6/3.
*全部课程的Fragment
*/
public class FragmentCourse extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){
View view = inflater.inflate(R.layout.fragment_course,container,false);
return view;
}
}
“`其他三个只需要修改inflate加载的布局即可
- 接下来就是activity_main.xml和MainActivity的事情了
(1):activity_main.xml
中间使用了一个Viewpager用来加载未来的fragment
使加载了上面写好的底部布局。这主布局应该很清晰了吧~
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:icon="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical"
android:weightSum="1"
>
<include layout="@layout/activity_main_top"></include>
<!--中间使用viewpager-->
<android.support.v4.view.ViewPager
android:id="@+id/main_view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</android.support.v4.view.ViewPager>
<!--底部导航栏布局 开始-->
<LinearLayout
android:id="@+id/bottom_layout"
android:layout_width="match_parent"
android:layout_height="65dp"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:layout_gravity="center"
>
<!--引入底部导航-->
<include layout="@layout/activity_main_bottom"></include>
</LinearLayout>
</LinearLayout>- MainActivity的代码，一些地方都写了注释，应该能明白：
MainActivity.java：
“`
package com.huixue.study;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import com.huixue.study.adapter.MyFragmentPageAdapter;
import java.util.ArrayList;
public class MainActivity extends FragmentActivity{
//viewpager 控件
private ViewPager main_viewPager;
//radioGroup 控件
private RadioGroup main_bottom_radioGroup;
//4个RadioButton控件
private RadioButton radio_home,radio_course,radio_study,radio_account;
//Fragment动态数组
private ArrayList<Fragment> main_FragmentsList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// /设置不显示标题栏/
// ActionBar actionBar=getSupportActionBar();
// actionBar.hide();
//界面初始函数,功能是获取各控件ID
InitView();
//viewPager初始化函数
}//onCreate over
public void InitView(){
main_bottom_radioGroup = (RadioGroup)findViewById(R.id.main_bottom_radio_group);
radio_home = (RadioButton)findViewById(R.id.main_home_radioBtn);
radio_course = (RadioButton)findViewById(R.id.main_allcourse_radioBtn);
radio_study = (RadioButton)findViewById(R.id.main_mystudy_radioBtn);
radio_account=(RadioButton)findViewById(R.id.main_account_radioBtn);
//radiogroup监听,匿名内部类
main_bottom_radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener(){
@Override
public void onCheckedChanged(RadioGroup radioGroup, int checkId) {
//监听那个radioButton的被选中，根据radio的ID改变页面
switch (checkId){
case R.id.main_home_radioBtn:
/*
* 使用setCurrentitem第二个参数控制切换动画（暂时不明白）
* true：打开
* false:关闭
* */
main_viewPager.setCurrentItem(0,false);
break;
case R.id.main_allcourse_radioBtn:
main_viewPager.setCurrentItem(1,false);
break;
case R.id.main_mystudy_radioBtn:
main_viewPager.setCurrentItem(2,false);
break;
case R.id.main_account_radioBtn:
main_viewPager.setCurrentItem(3,false);
break;
}
}
}
);
/*Viewpager*/
main_viewPager = (ViewPager)findViewById(R.id.main_view_pager);
//bottom下的四个fragmnet
FragmentHome fragmentHome =new FragmentHome();
FragmentCourse fragmentCourse = new FragmentCourse();
FragmentStudy fragmentStudy =new FragmentStudy();
FragmentAccount fragmentAccount = new FragmentAccount();
main_FragmentsList = new ArrayList<Fragment>();
main_FragmentsList.add(fragmentHome);
main_FragmentsList.add(fragmentCourse);
main_FragmentsList.add(fragmentStudy);
main_FragmentsList.add(fragmentAccount);
//设置适配器,将添加完所有fragment的list传递给适配器
main_viewPager.setAdapter(new MyFragmentPageAdapter(getSupportFragmentManager(),main_FragmentsList));
//设置显示第一个Fragment
main_viewPager.setCurrentItem(0);
//设置页面监听,setOnPageChangeListener过时，使用了addOnPageChangeListener代替
main_viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener(){
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//修改这个,根据position获取当前页面，选择那个radiobutton被选中
@Override
public void onPageSelected(int position) {
switch (position){
case 0:
main_bottom_radioGroup.check(R.id.main_home_radioBtn);
break;
case 1:
main_bottom_radioGroup.check(R.id.main_allcourse_radioBtn);
break;
case 2:
main_bottom_radioGroup.check(R.id.main_mystudy_radioBtn);
break;
case 3:
main_bottom_radioGroup.check(R.id.main_account_radioBtn);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
);
}//initView over
}
全部结束，要是有愿意交流的请联系，我也是初学者，如有不合适的地方请多多指出
学习参考了 这篇文章：http://blog.csdn.net/shenyuanqing/article/details/46670761 谢谢~~
