废话不多说,先上图,不合适的就不用再往下面看了,这是平时找东西最想先看到的。
具体实现
1、默认使用Android Studio开发,首先新建一个项目,选择Bottom Navigation Activity,这样底部导航功能就已经完成了。(我代码:compileSdkVersion 27)
2、添加ViewPager+Fragment的侧滑功能。
下面是完成所有功能后的代码
布局文件activity_main.xml代码:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation" />
</android.support.constraint.ConstraintLayout>
在res下面有个menu,里面就是导航栏菜单文件了:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="新闻" />
<item
android:id="@+id/navigation_dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="图书" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="发现" />
</menu>
MainActivity.java代码:
import android.os.Bundle;
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.view.MenuItem;
import com.zeus.zeusstare.fragment.FirstFragment;
import com.zeus.zeusstare.fragment.SecondFragment;
import com.zeus.zeusstare.fragment.ThirdFragment;
import com.zeus.zeusstare.tool.ViewPagerAdapter;
/**
* @author zhangrb
*/
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private MenuItem menuItem;
private BottomNavigationView navigation;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.viewpager);
navigation = findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
/*侧滑监听*/
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (menuItem != null) {
menuItem.setChecked(false);
} else {
navigation.getMenu().getItem(0).setChecked(false);
}
menuItem = navigation.getMenu().getItem(position);
menuItem.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
setupViewPager(viewPager);
}
/**
* 这里是底部导航栏点击切换代码
*/
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
viewPager.setCurrentItem(0);
return true;
case R.id.navigation_dashboard:
viewPager.setCurrentItem(1);
return true;
case R.id.navigation_notifications:
viewPager.setCurrentItem(2);
return true;
default:
break;
}
return false;
}
};
/**设置侧滑页面*/
private void setupViewPager(ViewPager viewPager) {
/*ViewPager适配器*/
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
/*构建适配器构建一个fragment列表,将三个Fragment添加进去,生成FragAdapter实例。*/
adapter.addFragment(new FirstFragment());
adapter.addFragment(new SecondFragment());
adapter.addFragment(new ThirdFragment());
viewPager.setAdapter(adapter);
}
}
实现ViewPager是要有适配器的,而对于Fragment,它所使用的适配器是:FragmentPagerAdapter。
ViewPagerAdapter.java代码:
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;
/**
* @author RB
* @date 2018/1/17 17:30
*/
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
public void addFragment(Fragment fragment) {
mFragmentList.add(fragment);
}
}
Fragment页面:
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;
import com.zeus.zeusstare.R;
/**
* @author RB
* @date 2018/1/18 10:29
*/
public class FirstFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.first_fragment, container, false);
}
}
这样基本就已经完成了效果,但每个人的开发环境和效果都会有差别,具体出现什么小问题再具体解决就好了。
可能出现问题:
Fragment 导包不一致、menu 的 item到了4个及以上时动画扭曲。
可以参考以下两篇文章进行问题解决。
参考文章:
http://blog.csdn.net/harvic880925/article/details/38660861
https://www.jianshu.com/p/0ba25cc65889