Android VR Player(全景视频播放器) [3]:底部导航的实现

原创 2017年05月29日 08:58:10

Android VR Player(全景视频播放器) [3]:底部导航的实现

底部导航介绍

本篇主要分享Material design中Bottom Navigation的实现过程,先看效果图:
Bottom Navigation
(图片来源:https://github.com/Ashok-Varma/BottomNavigation
Bottom Navigation导航方式在今天很多APP上都可以看到,可以说是Android中的底部导航规范了,所以学习一下它的使用还是很有必要的。


实现步骤

添加依赖

在项目app的build.gradle文件的dependencies {}中添加

compile 'com.ashokvarma.android:bottom-navigation-bar:1.4.3'

然后同步一下配置

在布局中添加Bottom Navigation组件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.renkangchen.bottomnavigationbardeme.MainActivity">

    <FrameLayout
        android:id="@+id/fragment_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

(activity_main.xml代码片段)

上面是一个可参考的示例,注意BottomNavigationBar上面的FrameLayout,它用来“占位”,也就是把BottomNavigationBar“挤”到页面的底部去,而这个FrameLayout也是放我们页面内容的位置。这里的FrameLayout高度设置为0dp,当我们需要设置weight,把hight设为0是一种规范的写法,网上有相关博客讨论这个问题,感兴趣的同学可以搜索一下。

准备Fragment

上一部分说到,BottomNavigationBar上面有一个FrameLayout,它就是用来放我们的页面内容的地方。要实现的效果是,通过底部导航来切换FrameLayout中的内容。这里需要使用到Fragment。

不太准确的理解是,Fragment是一个mini型的Activity,因为它和Activity确实很像,但它也有自己的独特之处,比如能使应用更好地利用大屏空间。Fragment和Activity一样有自己的生命周期,并且包含自己的布局。但就像它的中文名“碎片”一样,它只是UI碎片,这意味着我们应该在Activity中去使用Fragment,而不是单独地使用碎片。

public class FragmentA extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_a, container, false);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        TextView tv = (TextView) getActivity().findViewById(R.id.text_a);
        tv.setText(getArguments().getString("ARGS"));
    }

    public static FragmentA newInstance(String content) {
        Bundle args = new Bundle();
        args.putString("ARGS", content);
        FragmentA fragment = new FragmentA();
        fragment.setArguments(args);
        return fragment;
    }
}

(FragmentA.java 代码片段)

我们写一个Fragment类,它继承自Fragment。这里在导入包的时候要注意,有android.app.Fragment和android.support.v4.app.Fragment两个包供选择,区别在于,第二个的向下(4.2以下)兼容性更好些,不过现在4.2以下的设备很少了,所以也可以直接使用android.app.Fragment。这里我们使用v4下的包。

这个类很简单,主要是用LayoutInflater来创建Fragment的View,并且提供一个静态方法来构造fragment。再来看看这个Fragment的布局。

<?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:orientation="vertical">
    <TextView
        android:id="@+id/text_a"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

(fragment_a.xml代码片段)

Fragment的布局也很简单,只有一个TextView,用来展示newInstance(String content)中fragment.setArguments(args)设置的字符串。

因为我们有三个需要切换的界面,所以我们写了三个Fragment,FragmentA,FragmentB,FragmentC和它们对应的布局,三个界面只是名字不同,其余都差不多,所以就不贴另外两个Fragment的代码了。

使用BottomNavigationBar

在我们的MainActivity的onCreate方法中

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);

        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_folder_open_grey600_36dp, "A")).setActiveColor(R.color.colorPrimary)
                .addItem(new BottomNavigationItem(R.drawable.ic_language_grey600_36dp, "B"))
                .addItem(new BottomNavigationItem(R.drawable.ic_info_outline_grey600_36dp, "C"))
                .setFirstSelectedPosition(0)
                .initialise();
        setDefaultFragment();//指定默认显示的fragment        
        bottomNavigationBar.setTabSelectedListener(this);

(MainActivity.java代码片段1)

上面的代码不难理解,先实例化一个 BottomNavigationBar,setMode方法用来设置导航栏模式,setBackgroundStyle方法用来设置导航栏背景模式,有多种模式组合可选,这里使用了最基本的模式。接下来就是向导航栏中添加item,这里我们添加了三个item,对应之前的三个Fragment。添加了BottomNavigationBar,这时还不能通过导航完成切换,就和一般的button这样的控件的使用一样,我们还需要添加相应的监听。

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener

MainActivity需要实现BottomNavigationBar.OnTabSelectedListener接口,

public void onTabUnselected(int position)
public void onTabReselected(int position)
public void onTabSelected(int position)

上面这三个方法是必需的。不过这里我们只需要写onTabSelected方法,即指定选中BottomNavigationBar的某个item时需要执行的动作。

 @Override
    public void onTabSelected(int position) {
        FragmentManager fm = this.getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        switch (position) {
            case 0:
                if (fragmenta == null) {
                    fragmenta = FragmentA.newInstance("fragment a here");
                    transaction.add(R.id.fragment_content, fragmenta);
                } else{
                    transaction.show(fragmenta);
                }break;
            case 1:
                if (fragmentb == null) {
                    fragmentb = FragmentB.newInstance("fragment b here");
                    transaction.add(R.id.fragment_content,fragmentb);
                } else{
                    transaction.show(fragmentb);
                }break;
            case 2:
                if (fragmentc == null) {
                    fragmentc = FragmentC.newInstance("fragment c here");
                    transaction.add(R.id.fragment_content, fragmentc);
                }else{
                    transaction.show(fragmentc);
                }break;
            default:
                break;
        }
        transaction.commit();
    }

(MainActivity.java代码片段2)

进行Fragment的切换需要使用FragmentManager,它用来管理我们的Fragment;FragmentTransaction用来完成Fragment相关的业务。一个简单的理解就是,FragmentManager是经理,FragmentTransaction是业务员,“经理”用beginTransaction()方法让“业务员”开始工作,“业务员”就开始去处理(这里用准备更恰当,因为FragmentTransaction并不能执行这些业务,它只是收集要执行的业务,并将其提交给FragmentManager,这样来看,这个“业务员”更像是“秘书”)和Fragment相关的业务,比如add Fragment,hide Fragment,show Fragment或者是remove Fragment。需要注意的是remove和hide的区别,hide只是隐藏,还可以再show出来,remove是移除,下次要显示需要重新创建。“业务员”做完事情,得向“经理”报告,,于是用commit()来提交业务。当然,“业务员”提交的业务报告最后定夺的人肯定不是“业务员”,也就是说commit()提交的业务并不会立即执行,而是在程序准备好后,由UI线程处理执行。

在switch中,我们指定选中不同的导航选项时,需要展示的Fragment。为了避免重复创建,进行一下判断,如果要展示的Fragment为空,就创建一个,否则就展示出来。为了避免其他页面的影响,展示页面以前当然要把其他的页面都给隐藏起来,所以有 hideFragment(FragmentTransaction transaction) 。

  private void hideFragment(FragmentTransaction transaction) {
        if (fragmenta != null) {
            transaction.hide(fragmenta);
        }
        if (fragmentb != null) {
            transaction.hide(fragmentb);
        }
        if (fragmentc != null) {
            transaction.hide(fragmentc);
        }
    }

调试运行及结果

接着就是调试运行了。
结果


测试源码

如果需要参考的话,建议下载完整的源码(已在Android Studio中进行过测试),而不是复制博客中的某一部分代码。
链接: https://pan.baidu.com/s/1kVSeuov 密码: cu2q

(备用下载)http://download.csdn.net/detail/octodog/9855301


Reference

Ashok-Varma/BottomNavigation
Material Design学习之 Bottom navigation
Android学习之BottomNavigationBar实现Android特色底部导航栏
Fragment点击和滑动切换页面
Android BottomNavigationBar底部导航控制器的使用
Android FragmentManage FragmentTransaction介绍
TabHost和android:layout_height=”0.0dip”以及android:layout_weight配合在布局中的使用

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【Android开发VR实战】二.播放360°全景视频

转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53924006 本文出自【DylanAndroid的博客】 ...

基于A-Frame 框架实现的移动端VR视频播放(可感知手机重力感应)

采用A-Frame框架实现的VR Video播放功能

VR 视频播放器研究

最近关注VR视频播放器: 无意间看到了jwplayer 提供的demo。 https://developer.jwplayer.com/jw-player/demos/innovation/360-v...

Android VR Player(全景视频播放器) [5]:简单的欢迎界面

Android VR Player(全景视频播放器) [5]:简单的欢迎界面欢迎界面在继续下一部分,即视频列表实现的介绍前,分享一下简单的欢迎界面的实现。一来是可以整合一下前面说的侧滑菜单和底部导航,...

VR播放器研究: 基于 javascrip 和webGL初探

上次看到jwplayer的3D播放,于是决定研究一下类似播放器如何实现的,具体关于jwplayer的3D播放器可以参考: https://developer.jwplayer.com/jw-pla...

VR视频直播播放器

VR视频直播播放器

兼容各个浏览器的H.264播放: H.264+HTML5+FLOWPLAYER+WOWZA+RMTP

一、方案确定计划做视频播放,要求能够播放H264编码的mp4文件,各个浏览器,各种终端都能播放。首先查找可行性方案,http://www.cnblogs.com/sink_cup/archive/20...

Android Studio如何建立VR视频

所需要的VR运行库可在https://github.com/googlevr/gvr-android-sdk/下载 新建项目后:   1. 在项目main文件夹下新建资产目录 assets并把...

Android VR Player(全景视频播放器) [6]:视频列表的实现-本地视频

Android VR Player(全景视频播放器) [6]:视频列表的实现-本地视频(本篇博客参考《Android第一行代码(第二版)》中关于RecyclerView的部分)列表的实现方式列表一般使...

Android VR Player(全景视频播放器) [2]:开发说明

Android VR Player(全景视频播放器) [2]:开发说明工具本项目主要的开发工具为Android Studio 2.3,Android SDK Tools版本为26.0.2,Androi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)