上图的效果想必大家在很多VR App中都见过，下面介绍一种简单的实现方法：
大家可以看到，其实只不过是一个展示图片效果的列表，但是当你滑动到某个位置停止时，对应的条目被激活了，这张图片的全景图便开始动态的显示活动了，原理就是这么简单，那我们如何实现呢？
思路：
1. 首先我们需要一个展示图片的列表(ListView、RecycleView)
2. 列表的每个item展示对应的平面图
3. 对列表进行滑动监听,停止滑动时对应条目的全景图激活显示
4. 页面加载,默认首先要显示第一个item的全景图
思路就是这么简单，这里的全景图我们需要对应的全景图控件来显示，google vr 中有对应的全景图控件VrPanoramaView，google vr 的核心是其父类VrWidgetView，VrPanoramaView和VrVideoView是一对孪生兄弟，分别用来显示全景图和播放全景视频(google vr 视频播放即VrVideoView的使用请参考google vr 入门之制作简易的VR播放器及去除界面控制按钮)，今天我们用到的是全景图的显示功能，使用VrPanoramaView非常简单：
// 使用google vr VrPanoramaView 添加的
compile 'com.google.vr:sdk-audio:1.40.0'
compile 'com.google.vr:sdk-base:1.40.0'
compile 'com.google.vr:sdk-panowidget:1.40.0'准备工作已经完成下面开始写代码了：
展示图片的列表我这里使用RecycleView，activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.qj.vrpanoramaviewlist.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycleview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>mRecyclerView = (RecyclerView) findViewById(R.id.recycleview);
//全景图控件初始化
vrPanoramaView = new VrPanoramaView(this);
vrPanoramaView.setStereoModeButtonEnabled(false);//眼镜模式按钮禁掉
vrPanoramaView.setFullscreenButtonEnabled(false); //全屏模式按钮禁掉
vrPanoramaView.setInfoButtonEnabled(false); //信息按钮禁掉
vrPanoramaView.setTouchTrackingEnabled(true); //开启手触模式
options = new VrPanoramaView.Options();
options.inputType = VrPanoramaView.Options.TYPE_MONO;//准备数据,这里模拟假数据
mDatas = new ArrayList<String>();
for (int i = 'A'; i < 'M'; i++) {
mDatas.add(String.valueOf((char) i));
}
mSize = mDatas.size();
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mAdapter = new HomeAdapter();
mRecyclerView.setAdapter(mAdapter);class HomeAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == PANORAMA_ITEM) {
return new VrPanoramaViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_panorama, parent, false));
} else {
return new FooterHolder(LayoutInflater.from(mContext).inflate(R.layout.item_footer, parent, false));
}
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (mSize - position > 2) {
VrPanoramaViewHolder h = (VrPanoramaViewHolder) holder;
h.tv.setText(mDatas.get(position));
h.iv.setBackgroundResource(plan[position]);
if (isFirstTime) {//首次进入要显示第一个item的全景
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), vr[0]);
vrPanoramaView.loadImageFromBitmap(bitmap, options);
h.iv.addView(vrPanoramaView);
currentPos = 0;
isFirstTime = false;
}
} else if (position == mSize - 1) {
FooterHolder h = (FooterHolder) holder;
h.tv.setText("到底啦...");
}
Log.e(TAG, "onBindViewHolder: " + position);
}
@Override
public int getItemCount() {
return mSize;
}
@Override
public int getItemViewType(int position) {
if (mSize - position > 2) {
return PANORAMA_ITEM;//全景图类型的item
} else {
return FOOTER_ITEM;//底部填充的两个item
}
}
class VrPanoramaViewHolder extends RecyclerView.ViewHolder {//全景图的Holder
FrameLayout iv;
TextView tv;
public VrPanoramaViewHolder(View view) {
super(view);
iv = (FrameLayout) view.findViewById(R.id.iv_content);
tv = (TextView) view.findViewById(R.id.content_name);
}
}
class FooterHolder extends RecyclerView.ViewHolder {//底部填充的Holder
TextView tv;
public FooterHolder(View view) {
super(view);
tv = (TextView) view.findViewById(R.id.footer_tv);
}
}
}public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
int lastVisibleItemPosition = layoutManager.findLastVisibleItemPosition();
int pos = lastVisibleItemPosition - 2;
if (RecyclerView.SCROLL_STATE_IDLE == newState) {//停止滑动
showPanorama(pos);
} else {
if (pos == currentPos || currentPos < 0)//目前正在显示不能移除
return;
ViewParent parent = vrPanoramaView.getParent();
if (parent != null) {//防止在滑动过程中发现被复用的全景图控件
ViewGroup viewGroup = (ViewGroup) parent;
viewGroup.removeView(vrPanoramaView);
currentPos = -1;//此处赋值表示全景图控件没有处在任何item的位置
}
}
super.onScrollStateChanged(recyclerView, newState);
}private void showPanorama(int pos) {
if (pos == currentPos)//防止重复,做无用功
return;
HomeAdapter.VrPanoramaViewHolder childViewHolder = (HomeAdapter.VrPanoramaViewHolder) mRecyclerView.findViewHolderForAdapterPosition(pos);
ViewParent parent = vrPanoramaView.getParent();
if (parent != null) {
ViewGroup viewGroup = (ViewGroup) parent;
viewGroup.removeView(vrPanoramaView);
}
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), vr[pos]);
vrPanoramaView.loadImageFromBitmap(bitmap, options);
childViewHolder.iv.addView(vrPanoramaView);
currentPos = pos;
}以上是根据上面提到的思路贴出了对应的代码以及对代码做了简要的分析，实现一个全景图列表其实就是这么简单，这只是一篇入门级别的文章，我们的全景图列表是在Activity中做的，没有搭建项目框架，如果在Fragment页面中加载会比这个复杂一些，后期文章会继续跟进，欢迎大家继续关注！
