android: 结合BottomNavigationView、ViewPager和Fragment 实现左右滑动的效果
主界面:MainActivity
package com.yongdaimi.android.androidapitest; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import com.yongdaimi.android.androidapitest.fragment.HomePageFragment; public class MainActivity extends AppCompatActivity { @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); initFragment();
} private void initFragment() {
HomePageFragment homePageFragment = HomePageFragment.newInstance();
getSupportFragmentManager()
.beginTransaction()
.add(R.id.fl_main_container, homePageFragment, homePageFragment.getClass().getSimpleName())
.commit();
} }
主界面布局:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/fl_main_container"
/>
主界面入口的Fragment: HomePageFragment.java
package com.yongdaimi.android.androidapitest.fragment; import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup; import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager; import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.bottomnavigation.LabelVisibilityMode;
import com.yongdaimi.android.androidapitest.R; import java.util.ArrayList;
import java.util.List; /**
* A simple {@link Fragment} subclass.
* Activities that contain this fragment must implement the
* HomePageFragment.OnFragmentInteractionListener interface
* to handle interaction events.
* Use the {@link HomePageFragment#newInstance} factory method to
* create an instance of this fragment.
*/
public class HomePageFragment extends Fragment { public static final String TAG = "xp.chen"; private View mContentView;
private ViewPager vp_pager;
private BottomNavigationView nv_bottom_menu; private List<BaseViewController> mPageList; public static HomePageFragment newInstance() {
return new HomePageFragment();
} @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
mContentView = inflater.inflate(R.layout.fragment_home_page, container, false);
return mContentView;
} @Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
initView();
initPages();
setListener();
} private void initPages() {
mPageList = new ArrayList<>();
HomeViewController homeViewController = new HomeViewController(getActivity());
mPageList.add(homeViewController); ContactViewController contactViewController = new ContactViewController(getActivity());
mPageList.add(contactViewController); SearchViewController searchViewController = new SearchViewController(getActivity());
mPageList.add(searchViewController); SettingsViewController settingsViewController = new SettingsViewController(getActivity());
mPageList.add(settingsViewController);
vp_pager.setAdapter(mPagerAdapter);
} private void initView() {
vp_pager = mContentView.findViewById(R.id.vp_pager); nv_bottom_menu = mContentView.findViewById(R.id.nv_bottom_menu);
nv_bottom_menu.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);
nv_bottom_menu.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
} private void setListener() {
vp_pager.addOnPageChangeListener(mOnPageChangeListener);
} private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() { @Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
vp_pager.setCurrentItem(menuItem.getOrder());
return true;
}
}; private PagerAdapter mPagerAdapter = new PagerAdapter() { @Override
public int getCount() {
return mPageList.size();
} @Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
} @NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) { BaseViewController baseViewController = mPageList.get(position);
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
container.addView(baseViewController, layoutParams);
return baseViewController;
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
} @Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
} @Override
public void notifyDataSetChanged() {
super.notifyDataSetChanged();
} }; private ViewPager.OnPageChangeListener mOnPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override
public void onPageSelected(int position) {
Log.i(TAG, "onPageSelected: " + position);
nv_bottom_menu.getMenu().getItem(position).setChecked(true);
} @Override
public void onPageScrollStateChanged(int state) { }
}; }
主界面入口Fragment的布局:fragment_home_page.xml
<?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"
> <androidx.viewpager.widget.ViewPager
android:id="@+id/vp_pager"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
/> <com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nv_bottom_menu"
android:layout_width="match_parent"
android:layout_height="50dip"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/menu_navigation"
app:elevation="4dip"
/> </LinearLayout>
BottomNavigationView的menu文件:menu_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item
android:id="@+id/item_tab1"
android:icon="@drawable/ic_menu_home"
android:title="Home"
android:checked="true"
android:orderInCategory="0"
/>
<item
android:id="@+id/item_tab2"
android:icon="@drawable/ic_menu_contact"
android:title="Contact"
android:orderInCategory="1"
/>
<item
android:id="@+id/item_tab3"
android:icon="@drawable/ic_menu_search"
android:title="Search"
android:orderInCategory="2"
/>
<item
android:id="@+id/item_tab4"
android:icon="@drawable/ic_menu_settings"
android:title="Settings"
android:orderInCategory="3"
/> </menu>
这里有几个地方需要特别说明一下:
1. HomePageFragment.java 文件中的 nv_bottom_menu.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED); 用来设置BottomNavigationView在切换时的状态,如果不设置,在点击BottomNavigationView上的item在切换时文字可能会发生隐藏。
2. 上面menu文件中的 orderInCategory 属性用于设置菜单项的排列顺序,必须设置为大于或者等于0的整数值。数值小的排列在前,如果值相等,则按照XML中的顺序展现。 title 属性用于指定navigation Item的标题, icon 属性用于指定navigation item的图标。
3. fragment_home_page文件中的 app:elevation="4dip" 属性用于设置BottomNavigationView菜单顶部的模糊程度,如果不设置的话,BottomNavigationView的菜单顶部会很模糊。
最后是几个用于切换的Layout:
package com.yongdaimi.android.androidapitest.fragment; import android.content.Context;
import android.widget.FrameLayout; import androidx.annotation.NonNull; public abstract class BaseViewController extends FrameLayout { public BaseViewController(@NonNull Context context) {
super(context);
} }
BaseViewController.java
package com.yongdaimi.android.androidapitest.fragment; import android.content.Context;
import android.view.LayoutInflater; import androidx.annotation.NonNull; import com.yongdaimi.android.androidapitest.R; public class HomeViewController extends BaseViewController { public HomeViewController(@NonNull Context context) {
super(context);
LayoutInflater.from(context).inflate(R.layout.layout_home, this);
} }
HomeViewController.java
package com.yongdaimi.android.androidapitest.fragment; import android.content.Context;
import android.view.LayoutInflater; import androidx.annotation.NonNull; import com.yongdaimi.android.androidapitest.R; public class ContactViewController extends BaseViewController { public ContactViewController(@NonNull Context context) {
super(context);
LayoutInflater.from(context).inflate(R.layout.layout_contact, this);
} }
ContactViewController.java
package com.yongdaimi.android.androidapitest.fragment; import android.content.Context;
import android.view.LayoutInflater; import androidx.annotation.NonNull; import com.yongdaimi.android.androidapitest.R; public class SearchViewController extends BaseViewController { public SearchViewController(@NonNull Context context) {
super(context);
LayoutInflater.from(context).inflate(R.layout.layout_search, this);
} }
SearchViewController.java
package com.yongdaimi.android.androidapitest.fragment; import android.content.Context;
import android.view.LayoutInflater; import androidx.annotation.NonNull; import com.yongdaimi.android.androidapitest.R; public class SettingsViewController extends BaseViewController { public SettingsViewController(@NonNull Context context) {
super(context);
LayoutInflater.from(context).inflate(R.layout.layout_settings, this);
} }
SettingsViewController.java
基本上都是一样的,它们的布局文件也很简单,就是一个布局里加一个TextView。
最终效果:
我这里的PageAdapter中并没有直接使用Fragment, 因为ViewPager在加载Fragment时,会同时初始化几个Fragment,这在实际开发中很不友好,目前正在想办法解决,这也是我什么只使用一个Fragment多个Layout的主要原因。如果希望ViewPager中添加的也是Fragment,可参考:
Android布局实现-BottomNavigationView+ViewPager+Fragment+整合
android: 结合BottomNavigationView、ViewPager和Fragment 实现左右滑动的效果的更多相关文章
- Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab
今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可 ...
- ViewPager结合Fragment进行无限滑动
实现ViewPager结合Fragment实现无限循环切换,这里也是在适配器里面进行的,当然使用滑动监听也能够实现 import android.support.v4.app.Fragment; im ...
- Android开发之ViewPager实现多页面切换及动画效果(仿Android的Launcher效果)
Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果.源码地址在文章最后给出下载. 效果图如下: 1.Vi ...
- Android Tab -- 使用ViewPager、Fragment、FragmentPagerAdapter来实现
原文地址:http://blog.csdn.net/crazy1235/article/details/42678877 效果:滑动切换:点击标签切换. 代码:https://github.com/l ...
- 使用BottomNavigationView+ViewPager+Fragment的底部导航栏
2019独角兽企业重金招聘Python工程师标准>>> 使用BottomNavigationView做底部工具栏,使用ViewPager做页面切换,使用Fragment完成每个页面的 ...
- 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...
- Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager
文章地址: Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager 1.使用ViewPager + PagerAdapter 每个页面的内容都 ...
- Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...
- Android -- ViewPager、Fragment、状态保存、通信
工程架构 TabAFm到Tab ...
随机推荐
- Oracle恢复流程图
本图来自于网络,想当初小麦苗刚开始接触备份恢复的时候,就是靠着这张图来学习的,今天把这张图分享给大家,共勉. ............................................. ...
- PHP实现微信退款功能
最近在调微信退款接口,发现有许多坑,更大家分享一下 ① 要是在测试的时候,网页提示 curl 58 说明 证书的路径出现问题(这里要填物理路径,也就是绝对路径) ②网页提示curl 52 说明你的证书 ...
- MySQL MHA--故障切换模式(GTID模式和非GTID模式)
GTID和非GTID故障切换模式选择 MySQL 5.6版本引入GTID来解决主从切换时BINLOG位置点难定位的问题,MHA从0.56版本开始支持基于GTID的复制,在切换时可以采用GTID模式和非 ...
- django模板和静态文件
1.为什么要使用模板 在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个网页,那么工作量就会十分巨大.模板是一种方便的标签,存在于HTML文件中,我 ...
- Python入门篇-数据结构堆排序Heap Sort
Python入门篇-数据结构堆排序Heap Sort 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.堆Heap 堆是一个完全二叉树 每个非叶子结点都要大于或者等于其左右孩子结点 ...
- BUUCTF复现记录1
平台地址:https://buuoj.cn/ 里面很多之前的题目,不错的平台.另外幕后大哥博客https://www.zhaoj.in/ 以下的解题,都是参考各位大佬的WP去复现,重在记录下 ...
- PAT甲级1005水题飘过
题目分析:用一个字符串输入之后遍历每一位求和后,不断%10获取最后一位存储下来,逆序用对应的英文单词输出(注意输入为0的情况) #include<iostream> #include< ...
- golang gomobile 环境搭建
1. 安装Go语言SDK https://www.golangtc.com/download 2. 配置系统变量这建立GOROOT和GOPATH两个目录,分别对应sdk所在目录与项目文件根目录 3. ...
- Java中的map的遍历方法
public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...
- Linux下串口操作
一.Linux下访问串口 串口位置:/dev/tty** 在Linux系统中,串口设备是通过串口终端设备文件来访问的,也就是通过访问/dev/ttyS0./dev/ttyS1./dev/ttyS2./ ...