Question

我想制作一张照片详情＆＃39;活动或片段，我在其顶部和下方显示照片aViewpPager，显示相关照片的评论和喜欢（2个标签）。为了使屏幕可滚动＆＃39;所以我可以向上/向下滚动评论和喜欢并向左/向右滑动我决定使用2行的RecyclerView：

行1：照片（ImageView）。

ROW 2：SlidingTabLayout + ViewPager + FragmentPagerAdapter。

代码编译并运行，显示图像和slidingTabLayout，但不显示ViewPager。

所以我的两个主要问题是：

1 - 我的实施有什么问题。

2 - 对于我想要达到的目标，是否有替代或更好的解决方案？

注意：我不想使用带有标题的listView。我想使用RecyclerView，因为它更容易在网络的顶部/底部添加元素。

PhotoDetailsActivity.java

public class MainActivity extends ActionBarActivity {
    RecyclerView recyclerViewPhotoDetails;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.recyclerViewPhotoDetails = (RecyclerView) this.findViewById(R.id.recycler_view_photo_details);
        this.recyclerViewPhotoDetails.setLayoutManager(new LinearLayoutManager(this));
        this.recyclerViewPhotoDetails.setAdapter(new PhotoDetailsRecyclerAdapter(this.getSupportFragmentManager()));
    }
}

PhotosDetailsRecyclerAdapter.java

public class PhotoDetailsRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private static final int ROW_IMAGE = 0;
    private static final int ROW_LIKES_AND_COMMENTS = 1;
    private static final int TOTAL_ROWS = 2;

    private FragmentManager fragmentManager;

    public PhotoDetailsRecyclerAdapter(FragmentManager fragmentManager) {
        this.fragmentManager = fragmentManager;
    }

    @Override
    public int getItemViewType(int position) {
        if (position == 0) {
            return ROW_IMAGE;
        } else {
            return ROW_LIKES_AND_COMMENTS;
        }
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(viewType == ROW_IMAGE) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_image, parent, false);
            return new ImageViewHolder(view);
        } else {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_comments_and_likes, parent, false);
            return new CommentsAndLikesViewHolder(view);
        }
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i) {
    }

    @Override
    public int getItemCount() {
        return TOTAL_ROWS;
    }

    public class ImageViewHolder extends RecyclerView.ViewHolder {
        public ImageViewHolder(View itemView) {
            super(itemView);
        }
    }

    public class CommentsAndLikesViewHolder extends RecyclerView.ViewHolder {
        private SlidingTabLayout slidingTabLayout;
        private ViewPager viewPager;

        public CommentsAndLikesViewHolder(View view) {
            super(view);

            slidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tab_layout_comments_and_likes);
            viewPager = (ViewPager) view.findViewById(R.id.view_pager_comments_and_likes);

            viewPager.setAdapter(new CommentsAndLikesPagerAdapter(fragmentManager));
            slidingTabLayout.setDistributeEvenly(true);
            slidingTabLayout.setViewPager(viewPager);
        }
    }
}

activity_main.xml中

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recycler_view_photo_details"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

layout_image.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="wrap_content"
    android:orientation="vertical"
    >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/img"
        />

</FrameLayout>

layout_comments_and_likes.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <org.bitbucket.androidapp.SlidingTabLayout
        android:id="@+id/sliding_tab_layout_comments_and_likes"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@android:color/darker_gray"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager_comments_and_likes"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:background="@android:color/holo_blue_dark"
        />

</LinearLayout>

CommentsAndLikesPagerAdapter.java

public class CommentsAndLikesPagerAdapter extends FragmentPagerAdapter {
    private static final int TOTAL_TABS = 2;

    private String[] tabs = { "comments", "likes" };

    public CommentsAndLikesPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        if(position == 0) {
            return new CommentsFragment();
        } else {
            return new LikesFragment();
        }
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabs[position];
    }

    @Override
    public int getCount() {
        return TOTAL_TABS;
    }
}

CommentsFragment.java

 public class CommentsFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_comments, container, false);
        RecyclerView recyclerViewComments = (RecyclerView) view.findViewById(R.id.recycler_view_comments);
        recyclerViewComments.setLayoutManager(new LinearLayoutManager(this.getActivity()));
        recyclerViewComments.setAdapter(new CommentsRecyclerAdapter());
        return view;
    }
}

fragment_comments.xml

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recycler_view_comments"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

LikesFragment.java

public class LikesFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_likes, container, false);
        RecyclerView recyclerViewLikes = (RecyclerView) view.findViewById(R.id.recycler_view_likes);
        recyclerViewLikes.setLayoutManager(new LinearLayoutManager(this.getActivity()));
        recyclerViewLikes.setAdapter(new LikesRecyclerAdapter());
        return view;
    }
}

fragment_likes.xml

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recycler_view_likes"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

layout_comment.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Comment"
        />

</RelativeLayout>

layout_like.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Like"
        />

</RelativeLayout>

Answer 1

我遇到了这个问题并通过每个ViewPager的设置ID解决了这个问题:) ViewPager不允许在同一个片段中共享id，即使它是recyclerview上下文的一部分。

pagerHolder.pager.setId(position);

Answer 2

更新ViewPager高度，recyclerView的项目需要特定的高度

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_height="300dp"
    android:layout_width="match_parent"
    android:background="@android:color/holo_blue_dark" />

Answer 3

您可以查看此代码并更新代码。我使用这个代码我的项目和工作。 您必须将ViewPagerAdapter设置为onBinViewHolder方法中的viewpager。如果它不起作用，我想提供帮助。

RecylerviewAdapter

    // Replace the contents of a view (invoked by the layout manager)
   @Override
   public void onBindViewHolder(ViewHolder holder, int position) {
      // - get element from your dataset at this position
      // - replace the contents of the view with that element
      initializeViews("Mustafa", holder, position);
   }

   private void initializeViews(final String object, final ViewHolder holder, int position) {
      holder.textViewCount.setText("5");
      holder.imageViewStar.setImageResource(R.drawable.info);
      holder.imageViewFavorite.setImageResource(R.drawable.info);
      ViewPagerBoundariesAdapter adapter = new ViewPagerBoundariesAdapter(activity, new ArrayList<ViewPagerItem>(), listener);
      holder.viewPager.setAdapter(adapter);
      holder.viewPager.setClipToPadding(false);
      holder.viewPager.setPadding(40, 0, 40, 0);
   }

ViewPagerAdapter

/**
 * Created by MustafaS on 10.3.2015.
 */
public class ViewPagerBoundariesAdapter extends PagerAdapter {
   private ArrayList<ViewPagerItem>    pagerItems;
   private LayoutInflater              inflater;
   private Context                     context;
   private ViewPagerItemClickInterface listener;

   public ViewPagerBoundariesAdapter(Context context, ArrayList<ViewPagerItem> pagerItems, ViewPagerItemClickInterface callback) {
      super();
      this.pagerItems = pagerItems;
      this.context = context;
      this.listener = callback;
      inflater = LayoutInflater.from(context);
   }

   @Override
   public Object instantiateItem(ViewGroup container, int position) {

      LinearLayout layout = (LinearLayout) inflater.inflate(R.layout.row_viewpager, container, false);
      ImageView imageViewCampaign = (ImageView) layout.findViewById(R.id.imageview_campaign);
      TextView textViewCampaign = (TextView) layout.findViewById(R.id.textview_campaign);
      imageViewCampaign.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            listener.onViewPagerItemClick(1);
         }
      });
      // textViewCampaign.setText("Lorem ipsum dolor sit amet\n" + "aliquam nec nisi in lorem");
      imageViewCampaign.setImageDrawable(context.getResources().getDrawable(R.drawable.nusret));
      container.addView(layout);
      return layout;
   }

   @Override
   public void destroyItem(ViewGroup container, int position, Object object) {
      ((ViewPager) container).removeView((View) object);
   }

   @Override
   public int getCount() {
      return 5;
   }

   @Override
   public boolean isViewFromObject(View view, Object obj) {
      return view.equals(obj);
   }

}

recylerview xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/listview_brand"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

recylerview row xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageview_favorite"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_gravity="center" />

        <TextView
            android:id="@+id/textview_brand_name"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:paddingLeft="8dp"
            android:text="Gucci"
            android:textSize="@dimen/standart_text_size" />

        <FrameLayout
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginRight="8dp">

            <ImageView
                android:id="@+id/imageview_star"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <TextView
                android:id="@+id/textview_count"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:ellipsize="end"
                android:gravity="center"
                android:singleLine="true"
                android:textSize="@dimen/standart_text_size" />
        </FrameLayout>
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="@dimen/pager_image_and_text_height" />
</LinearLayout>

Viewpager row xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageview_campaign"
        android:layout_width="match_parent"
        android:layout_height="@dimen/parallax_image_height"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/textview_campaign"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:paddingTop="8dp"
        android:text="Lorem ipsum dolor sit amet
aliquam nec nisi in lorem"
        android:textSize="@dimen/standart_text_size" />
</LinearLayout>

Answer 4

我遇到了同样的问题并在此处阅读了所有答案。我将描述如何解决这个问题。

只是一些背景，我有一个viewpager，顶部有标签，可在应用启动时显示3个片段。

其中一个片段是一个recyclerview，其中viewpager是视图中的一个项目 - 让我们调用片段A：

我在Fragment A中调用它来设置RECYCLERVIEW适配器：

FragmentOuterAdapter fragmentOuterAdapter  = new FragmentOuterAdapter(getActivity(), this ); //this here refers to Fragment A - note this as this is IMPORTANT
mRecyclerView.setAdapter(fragmentOuterAdapter);

在我的RECYCLERVIEW适配器中，我调用以下内容来创建viewHolder：

class ViewPagerViewHolder extends RecyclerView.ViewHolder {
    ViewPager viewPager;
    public ViewPagerViewHolder(View view) {
        super(view);
        viewPager = (ViewPager) view.findViewById(R.id.viewPager);
    }
}

在onCreateViewHolder下，我初始化视图并获取它的句柄。

重要的代码段在onBindViewHolder下：

        FragmentManager fragmentManager = fragment.getChildFragmentManager();
        ((ViewPagerViewHolder) holder).viewPager.setAdapter(new SubViewFragmentPagerAdapter(fragmentManager));

FragmentOuterAdapter中传递的片段对象出现在此处，我使用该对象获取getChildFragmentManager（）。

因为您正在使用通过viewpager在片段内显示片段，所以您需要使用子片段管理器而不是片段管理器。

这将使viewpager工作。

Answer 5

尝试将ViewPager设置为具有硬编码高度，而不是换行内容或匹配父级。我有一个奇怪的问题，即使我的ViewPager已经填充，我的屏幕仍然是空白的。

Answer 6

作为第二行，您必须使用线性布局，并在其中添加视图寻呼机以及显示注释和喜欢片段的tabhost小部件。

您可以使用此处找到的库https://github.com/daimajia/AndroidSwipeLayout以更简单的方式实现相同的效果。

如果您有兴趣，我可以提供更多细节。

Answer 7

Linh Nguyen给出的答案为我解决了这个问题，尽管我的案例与原始问题略有不同。

在一个活动中，我使用了带有行的RecyclerView：
ROW1：带有X图像的ViewPager（layout_height="200dp"）
ROW2：文字
ROW3：带有Y图像的ViewPager（layout_height="100dp"）
...

因为我正在为ROW1和ROW3重复使用相同的布局，所以两个ViewPage都具有相同的@+id。 ROW1中的ViewPager运行良好但是ROW3中的ViewPager表现得像这样：

在初始屏幕加载时，将调用ViewPager页面创建方法（onCreateView()用于ROW3中第一个和第二个周边页面/ ViewPager碎片
好像什么都没有渲染（空白页面）

但后来我注意到，如果我在ROW3中有5个以上的图像，我可以刷过空白页面，最终我会看到第3,4页等等。一旦我到达终点，回到第2页和第1页将被正确创建（因为它们被重新创建）。

在ROW3中为ViewPager提供一个唯一的ID后，一切都开始正常工作。

Answer 8

对我来说唯一有效的方法是使用Android支持库v7中出现的新功能，即将Horizontal Recyclerview与PagerSnapHelper结合使用，以获得与ViewPager类似的结果

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
recyclerview.setLayoutManager(new LinearLayoutManager(context,
                        LinearLayoutManager.HORIZONTAL,false));
recyclerview.setAdapter(adapter);
SnapHelper snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(recyclerView);

Answer 9

回答您的第一个问题“我的实施有什么问题。”

您确实在android:orientation="vertical"和RelativeLayout中设置了FrameLayout。

也许修复不是他们在那里。如果这是合适的解决方案，请告诉我。

Viewpager没有显示在RecyclerView行内

9 个答案:

RecylerviewAdapter

ViewPagerAdapter

recylerview xml

recylerview row xml

Viewpager row xml