Android-底部导航栏的实现Fragment+ViewPager滑动切换页面

布局

pager_fragment.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivity">

    <RelativeLayout
            android:id="@+id/ly_top_bar"
            android:layout_width="match_parent"
            android:layout_height="48dp"
    >

        <TextView
                android:id="@+id/topBar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:textSize="18sp"
                android:textColor="#000"
                android:text="信息"/>


        <View
                android:layout_width="match_parent"
                android:layout_height="2px"
                android:background="#C0C0C0"
                android:layout_alignParentBottom="true"/>

    </RelativeLayout>



    <RadioGroup
            android:id="@+id/rg_tab_bar"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_alignParentBottom="true"
            android:background="#C0C0C0"
            android:orientation="horizontal">
<!--android:button="@null" 去除RadioButton自带圆圈-->
        <RadioButton
                android:button="@null"
                android:id="@+id/rb_channel"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#FFF"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_channel"
                android:gravity="center"
                android:padding="5dp"
                android:text="提醒"
                android:textColor="@drawable/tab_menu_text"
                android:textSize="16sp" />

        <RadioButton
                android:button="@null"
                android:id="@+id/rb_message"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#FFF"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_message"
                android:gravity="center"
                android:padding="5dp"
                android:text="消息"
                android:textColor="@drawable/tab_menu_text"
                android:textSize="16sp" />

        <RadioButton
                android:button="@null"
                android:id="@+id/rb_better"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#FFF"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_better"
                android:gravity="center"
                android:padding="5dp"
                android:text="我的"
                android:textColor="@drawable/tab_menu_text"
                android:textSize="16sp" />

        <RadioButton
                android:button="@null"
                android:id="@+id/rb_setting"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#FFF"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_setting"
                android:gravity="center"
                android:padding="5dp"
                android:text="设置"
                android:textColor="@drawable/tab_menu_text"
                android:textSize="16sp"/>

    </RadioGroup>

    <View
            android:id="@+id/div_tab_bar"
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:background="#FFF"
            android:layout_above="@id/rg_tab_bar"/>

<!--  RelativeLayout布局中的
     layout_above 将控件置于给定id控件之上
     layout_below 将控件置于给定id控件之下
  -->
    <android.support.v4.view.ViewPager

            android:background="#D3D3D3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/ly_top_bar"
            android:layout_above="@id/div_tab_bar"
            android:id="@+id/vp_content"/>



</RelativeLayout>

MyFragment类和fg_content.xml就不贴了沿用上篇文章的

MainActivity类

package com.demo;


import android.content.Intent;
import android.os.Build;
import android.support.annotation.NonNull;
import android.support.annotation.RequiresApi;

import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;


import android.util.Log;
import android.view.*;

import android.widget.*;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener,
        ViewPager.OnPageChangeListener,RadioGroup.OnCheckedChangeListener{
    
    

 

    private RadioGroup rg_tab_bar;
    private RadioButton rb_channel;
    private RadioButton rb_message;
    private RadioButton rb_better;
    private RadioButton rb_setting;
    private  ViewPager viewPager;

    //几个代表页面的常量
    public static final int PAGE_ONE = 0;
    public static final int PAGE_TWO = 1;
    public static final int PAGE_THREE = 2;
    public static final int PAGE_FOUR = 3;

    private MyFragmentPagerAdapter mAdapter;


    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.pager_fragment);

//        init();
        mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        bindViews();
        rb_channel.setChecked(true);



    }

    private void bindViews() {
    
    

        rg_tab_bar = findViewById(R.id.rg_tab_bar);
        rb_channel = findViewById(R.id.rb_channel);
        rb_message =findViewById(R.id.rb_message);
        rb_better =  findViewById(R.id.rb_better);
        rb_setting =  findViewById(R.id.rb_setting);
		//将radioGroup添加到点击事件
        rg_tab_bar.setOnCheckedChangeListener(this);
 
        viewPager = findViewById(R.id.vp_content);
        //将fragmentManager添加到viewpager
        viewPager.setAdapter(mAdapter);
        viewPager.setCurrentItem(0);
        viewPager.addOnPageChangeListener(this);

    }



    @Override
    public void onPageScrolled(int i, float v, int i1) {
    
    

    }

    @Override
    public void onPageSelected(int i) {
    
    

    }

    @Override
    public void onPageScrollStateChanged(int state) {
    
    
        //state的状态有三个,0表示什么都没做,1正在滑动,2滑动完毕

//        Log.i("pssc","进入了onPageScrollStateChanged");

        if (state==2){
    
    
           switch (viewPager.getCurrentItem()){
    
    
               case PAGE_ONE: rb_channel.setChecked(true); break;
               case PAGE_TWO: rb_message.setChecked(true); break;
               case PAGE_THREE: rb_better.setChecked(true); break;
               case PAGE_FOUR: rb_setting.setChecked(true); break;
           }
       }
    }


    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
    
    
//        Log.i("msg","hjhhhhhjh");
        switch (checkedId) {
    
    
            case R.id.rb_channel:
                viewPager.setCurrentItem(PAGE_ONE);
                break;
            case R.id.rb_message:
                viewPager.setCurrentItem(PAGE_TWO);
                break;
            case R.id.rb_better:
                viewPager.setCurrentItem(PAGE_THREE);
                break;
            case R.id.rb_setting:
                viewPager.setCurrentItem(PAGE_FOUR);
                break;
        }
    }
    @Override
    public void onClick(View view) {
    
    


    }



}

MyFragmentPagerAdapter类

package com.demo;

import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.ViewGroup;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    
    

    private static final int PAGER_COUNT=4;
    private  MyFragment mf1 = null;
    private  MyFragment mf2 = null;
    private  MyFragment mf3 = null;
    private  MyFragment mf4 = null;
    public MyFragmentPagerAdapter(FragmentManager fm) {
    
    
        super(fm);
        mf1 = new MyFragment("first fragment");
        mf2 = new MyFragment("second fragment");
        mf3 = new MyFragment("third fragment");
        mf4 = new MyFragment("forth fragment");

    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
    
    
        super.destroyItem(container, position, object);
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
    
    
        return super.instantiateItem(container, position);
    }

    @Override
    public Fragment getItem(int i) {
    
    
        Fragment fragment = null;
        switch (i){
    
    
            case MainActivity.PAGE_ONE:
                fragment = mf1;
                break;
            case MainActivity.PAGE_TWO:
                fragment = mf2;
                break;
            case MainActivity.PAGE_THREE:
                fragment = mf3;
                break;
            case MainActivity.PAGE_FOUR:
                fragment = mf4;
                break;
        }
        return fragment;
    }

    @Override
    public int getCount() {
    
    
        return PAGER_COUNT;
    }
}

完成~
在这里插入图片描述

本文参考和完整代码传送门

猜你喜欢

转载自blog.csdn.net/m0_46267375/article/details/109436907