BottomNavigationView + ViewPager
2017-05-06 本文已影响3585人
大橙喵
1. 创建新的Android工程
- 新工程使用EmptyActivity.
- 打开build.gradle 添加依赖
compile 'com.android.support:design:25.3.1'
2. 设置布局文件
- 打开布局文件activity_main.xml
- 添加ViewPager BottomNavigationView 两个控件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="@+id/main_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/main_bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="?android:attr/windowBackground"
app:menu="@menu/activity_main_bottom" />
<!--第5步将创建这个 activity_main_bottom 文件-->
</LinearLayout>
- 在res文件夹下新建menu文件夹,创建布局文件 activity_main_bottom.xml 并添加两个菜单项
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/btm_nav_item1"
android:icon="@android:drawable/ic_menu_info_details"
android:title="菜单项1" />
<item
android:id="@+id/btm_nav_item2"
android:icon="@android:drawable/ic_dialog_alert"
android:title="菜单项2" />
</menu>
- 运行一次查看效果
添加ViewPager和BottomNavigationView效果
3. 修改MainActivity中的代码
package com.bigchengmiao.viewpagertest;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
ViewPager mainActivityViewPager;
BottomNavigationView bottomNavView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 获取到两个控件的对象
mainActivityViewPager = (ViewPager) findViewById(R.id.main_viewpager);
bottomNavView = (BottomNavigationView) findViewById(R.id.main_bottom_nav_view);
// 为 BottomNavigationView 的菜单项 设置监听事件
bottomNavView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
// 获取到菜单项的Id
int itemId = item.getItemId();
switch (itemId) {
case R.id.btm_nav_item1:
break;
case R.id.btm_nav_item2:
break;
}
// true 会显示这个Item被选中的效果 false 则不会
return true;
}
});
// 为 ViewPager 设置监听事件
mainActivityViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}
5. 创建Fragment
- 创建两个 Fragment 并修改布局用以区分
<FrameLayout 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="com.bigchengmiao.viewpagertest.BlankFragmentOne">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello_blank_fragment_one" />
</FrameLayout>
<FrameLayout 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="com.bigchengmiao.viewpagertest.BlankFragmentOne">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello_blank_fragment_two" />
</FrameLayout>
- 两个Fragment的类
package com.bigchengmiao.viewpagertest;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class BlankFragmentOne extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_blank_fragment_one, container, false);
}
}
package com.bigchengmiao.viewpagertest;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class BlankFragmentOne extends Fragment {
//以下和BlankFragmentOne相同故省略
......
}
添加FragmentOne
添加FragmentTwo
6.为 ViewPager 配置 ViewPagerAdapter
package com.bigchengmiao.viewpagertest;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
import java.util.List;
/**
* Created by LeeQing on 2017/5/6.
*/
public class MainActivityViewPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments = new ArrayList<>();
public MainActivityViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
public void addFragment(Fragment fragment) {
fragments.add(fragment);
}
}
7. 继续修改 MainActivity
package com.bigchengmiao.viewpagertest;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
ViewPager mainActivityViewPager;
BottomNavigationView bottomNavView;
MainActivityViewPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 获取到两个控件的对象
mainActivityViewPager = (ViewPager) findViewById(R.id.main_viewpager);
bottomNavView = (BottomNavigationView) findViewById(R.id.main_bottom_nav_view);
// 为ViewPager设置Adapter
adapter = new MainActivityViewPagerAdapter(getSupportFragmentManager());
// 为Adapter添加Fragment
adapter.addFragment(new BlankFragmentOne());
adapter.addFragment(new BlankFragmentTwo());
mainActivityViewPager.setAdapter(adapter);
// 为 BottomNavigationView 的菜单项 设置监听事件
bottomNavView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
// 获取到菜单项的Id
int itemId = item.getItemId();
// 当第一项被选择时BlankFragmentOne显示，以此类推
switch (itemId) {
case R.id.btm_nav_item1:
mainActivityViewPager.setCurrentItem(0);
break;
case R.id.btm_nav_item2:
mainActivityViewPager.setCurrentItem(1);
break;
}
// true 会显示这个Item被选中的效果 false 则不会
return true;
}
});
// 为 ViewPager 设置监听事件
mainActivityViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// 当 ViewPager 滑动后设置BottomNavigationView 选中相应选项
bottomNavView.getMenu().getItem(position).setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}
8.效果图
ViewPager划动效果
点击菜单项效果
9.工程结构
工程结构
