viewpager+fragment实现底部导航

写作目的：练练手，加深印象，能帮助到其他人当然最好（顶多入门的吧）

实现思路：1，通过点击radiobutton实现fragment的替换，在viewpage中装有fragment。点击哪个就显示对应的fragment。

具体实现：

一，先看效果，界面很简陋哈。

二，mainActivity布局：很简单，一个radiogroup+3个radiobutton+viewpager

布局代码：

<?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.example.nick.navigationdemo.MainActivity">
<RadioGroup
    android:id="@+id/rg_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true">
    <RadioButton
        android:id="@+id/btn_home"
        android:layout_height="wrap_content"
        android:text="首页"
        android:textSize="20dp"
        android:checked="true"
        style="@style/btn_navigation"
       />
    <RadioButton
        android:id="@+id/btn_near"
        android:layout_height="wrap_content"
        style="@style/btn_navigation"
        android:text="附近"
 />
    <RadioButton
        android:id="@+id/btn_my"
        style="@style/btn_navigation"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:text="个人中心"
       />
</RadioGroup>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_navigation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/rg_navigation"></android.support.v4.view.ViewPager>
</RelativeLayout>

style代码：

<style name="btn_navigation">
    <item name="android:button">@null</item>
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:textSize">20dp</item>
    <item name="android:background">@drawable/bg_btn_navigation</item>
    <item name="android:gravity">center</item>
</style>

接下来看mainActivity代码，没什么难点。

//底部导航
public class MainActivity extends AppCompatActivity {
    RadioGroup rg_navigation;
    RadioButton btn_home;
    RadioButton btn_near;
    RadioButton btn_my;
    ViewPager  vp_navigation;
    List<Fragment> fragmentList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);//注解工具
        initView();
        processLogic();
    }
    //初始化view  找控件
    public void initView(){
        rg_navigation= (RadioGroup) findViewById(R.id.rg_navigation);
        btn_home= (RadioButton) findViewById(R.id.btn_home);
        btn_near= (RadioButton) findViewById(R.id.btn_near);
        btn_my= (RadioButton) findViewById(R.id.btn_my);
        vp_navigation= (ViewPager) findViewById(R.id.vp_navigation);
        fragmentList=new ArrayList<>();
    }
    //数据，逻辑处理
    public  void  processLogic(){
        fragmentList.add(HomeFragment.newInstance("首页"));
        fragmentList.add(NearFragment.newInstance("附近"));
        fragmentList.add(MyFragment.newInstance("个人中心"));
        vp_navigation.setAdapter(new myAdapter(getSupportFragmentManager(),fragmentList));//通过适配器与fragment关联
    }
    //根据点击的button显示相应的fragment
    @OnClick({R.id.btn_home,R.id.btn_near,R.id.btn_my})
    public void onClick(View view){
        switch (view.getId()){
            case R.id.btn_home:
                vp_navigation.setCurrentItem(0);
                break;
            case R.id.btn_near:
                vp_navigation.setCurrentItem(1);
                break;
            case R.id.btn_my:
                vp_navigation.setCurrentItem(2);
                break;
        }
    }
}

适配器：

public class myAdapter extends FragmentPagerAdapter {
    List<Fragment> fragments;
    public myAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments=fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
}

fragment代码，这边有3个fragment。代码都一样，就一个textview

public class HomeFragment extends Fragment {
    TextView textView;
    public static Fragment newInstance(String content){
        //这边可以直接用构造函数传值----我这里用的是官方建议的传值方式
        Bundle bundle=new Bundle();
        bundle.putString("内容",content);
        HomeFragment fragment=new HomeFragment();
        fragment.setArguments(bundle);
        return fragment;
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_public,null);
         textView= (TextView) view.findViewById(R.id.tv_content);
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        initView();
    }
    public void initView(){
        String content=getArguments().getString("内容");
        textView.setText(content);
    }
}

fragment布局也贴下吧

<!--fragment的共用布局-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50dp"
        tools:text="第一个"/>
</LinearLayout>

到这就没了，很简单，这边viewpager是可以滑动的，一般app首页的都不会滑动切换，这边自定义个viewpager就好了，禁止它滑动。

源码传送门