android viewpager 不同页面底部菜单不同,ViewPager+BottomNavigationView+Fragment实现底部导航栏...

1.ViewPager

ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。其与BottomNavigationView和Fragment配合使用可以很好的实现Android底部导航栏及屏幕滑动切换碎片的功能

首先在活动布局里加入ViewPager控件：用法同普通控件一样

android:id="@+id/mViewPager"

android:layout_width="match_parent"

android:layout_weight="1"

android:layout_height="wrap_content">

接着在MainActivity中使用

public class MainActivity extends AppCompatActivity {

private ViewPager mViewPager;//

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mViewPager=(ViewPager) findViewById(R.id.mViewPager);//获取到ViewPager

//ViewPager的监听

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override

public void onPageSelected(int position) {

bottomNavigationView.getMenu().getItem(position).setChecked(true);

//滑动页面后做的事，这里与BottomNavigationView结合，使其与正确page对应

}

@Override

public void onPageScrollStateChanged(int state) {

}

});

//底部导航栏有几项就有几个Fragment

final ArrayList fgLists=new ArrayList<>(3);

fgLists.add(new ManageFragment());

fgLists.add(new FindFragment());

fgLists.add(new MyFragment());

//设置适配器用于装载Fragment

FragmentPagerAdapter mPagerAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {

@Override

public Fragment getItem(int position) {

return fgLists.get(position); //得到Fragment

}

@Override

public int getCount() {

return fgLists.size(); //得到数量

}

};

mViewPager.setAdapter(mPagerAdapter); //设置适配器

mViewPager.setOffscreenPageLimit(2); //预加载剩下两页

//以上就将Fragment装入了ViewPager

}

}

2.BottomNavigationView

在 build.gradle 文件中增加依赖：

compile 'com.android.support:design:25.2.0'

菜单元素只能是 3~5 个。如果个数少于3个或者多于5个，则会报错。

在同样的活动布局里加入BottomNavigationView控件，为了美观，可以在ViewPager和BottomNavigationView中间加个View

android:layout_width="match_parent"

android:background="#3399cc"

android:layout_height="1dp" />

android:id="@+id/mBottom"

android:layout_width="match_parent"

android:layout_height="50dp"

app:menu="@menu/navigation">

其中有一项 app:menu="@menu/navigation" 用于底部导航栏的具体显示

需要我们建一个menu的xml文件

我们在res/menu下新建一个navigation.xml(没有menu文件夹就新建一个)，然后在xml里添加自己想要的目录选项

android:title="管理" //名字

android:icon="@drawable/ic_manage" //显示的图标

android:id="@+id/manager_item"/>

android:id="@+id/find_item"

android:icon="@drawable/ic_find"

android:title="发现" />

android:icon="@drawable/ic_my"

android:id="@+id/my_item"

android:title="我的" />

图中底部导航栏上的蓝色条即为刚才加的View

bottom.JPG

在MainActivity中使用

public class MainActivity extends AppCompatActivity {

private ViewPager mViewPager;

private BottomNavigationView bottomNavigationView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mViewPager=(ViewPager) findViewById(R.id.mViewPager);

bottomNavigationView=(BottomNavigationView) findViewById(R.id.mBottom);

//设置点击监听

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(@NonNull MenuItem item) {

switch (item.getItemId())

{

//根据navagatin.xml中item的id进行case

case R.id.manager_item:

mViewPager.setCurrentItem(0);

//跳到对应ViewPager的page

break;

case R.id.find_item:

mViewPager.setCurrentItem(1);

break;

case R.id.my_item:

mViewPager.setCurrentItem(2);

break;

}

return false;

}

});

//ViewPager的一系列设置

.................

...................

}

}

以上ViewPager和BottomNavigationView的结合就使用完成

3.Fragment

碎片(fragment)里面就是我们具体要呈现给大家的东西，fragment的用法需要一个类和一个布局文件，我们新建一个类继承自Fragment

public class MyFragment extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

//R.layout.fragment_my为该fragment的布局

View view=inflater.inflate(R.layout.fragment_my,container,false);

return view;

}

@Override

public void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

}

}

为该fragment新建一个布局文件,该布局很简单，就加入了一个TextView，可以自行拓展加入各种控件等

android:layout_width="match_parent"

android:layout_height="match_parent">

android:text="my"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

剩余两个fragment同上一样

结尾

以上三者结合即可实现基本的底部导航栏UI布局设计