Viewpager沒有顯示在RecyclerView行內

Question

我想制作一個“照片細節”活動或片段，我在其上方和下方顯示照片aViewpPager，顯示相關照片的評論和喜歡（2個標簽）。 為了使屏幕'Scrollable'所以我可以向上/向下滾動評論和喜歡並向左/向右滑動我決定使用2行的RecyclerView：

第1行：照片（ImageView）。

第2行：SlidingTabLayout + ViewPager + FragmentPagerAdapter。

代碼編譯並運行，顯示圖像和slidingTabLayout，但不顯示ViewPager。

所以我的兩個主要問題是：

1-我的實施有什么問題。

2 - 對於我想要達到的目標，是否有替代或更好的解決方案？

注意：我不想使用帶有header的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行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在片段內顯示片段，所以您需要使用子片段管理器而不是fragmentmanager。

這將使viewpager工作。

Answer 5

嘗試將ViewPager設置為具有硬編碼高度，而不是換行內容或匹配父級。 我有一個奇怪的問題，即使我的ViewPager已填充，我的屏幕仍然是空白的。

Answer 6

作為第二行，您必須使用線性布局和內部添加視圖尋呼機以及顯示注釋和喜歡片段的tabhost小部件。

您可以使用此處的庫https://github.com/daimajia/AndroidSwipeLayout以更簡單的方式實現相同的效果。

如果您有興趣，我可以提供更多細節。

Answer 7

Linh Nguyen給出的答案為我解決了這個問題，盡管我的案例與原始問題略有不同。

在一個Activity中，我有了使用RecyclerView的行：
ROW1：帶有X圖像的ViewPager（ layout_height="200dp" ）
ROW2：文字
ROW3：帶有Y圖像的ViewPager（ layout_height="100dp" ）
...

因為我重復使用ROW1和ROW3的相同布局，所以兩個ViewPagers都具有相同的@+id 。
ROW1中的ViewPager運行良好。
但是ROW3中的ViewPager表現得像這樣：

• 在初始屏幕加載時，將調用ViewPager頁面創建方法（ onCreateView()用於ROW3中ViewPager的第一個和兩個周圍頁面/片段）
• 似乎沒有任何東西被渲染（空頁）

但后來我注意到，如果我在ROW3中有5個以上的圖像，我可以刷過空白頁面，最終我會看到第3,4頁等等。 一旦我到達終點，回到第2頁和第1頁將被正確創建（因為它們被重新創建）。

在ROW3中為ViewPager提供一個唯一的ID后，一切都開始正常工作。

Answer 8

對我來說唯一有用的方法是使用Android支持庫v7中出現的新東西，使用帶有PagerSnapHelper的Horizo​​ntal Recyclerview來獲得與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

回答你的第一個問題“我的實施有什么問題。”

你確實在RelativeLayout和你的FrameLayout設置了android:orientation="vertical" 。

也許修復不是他們在那里。 如果這是合適的解決方案，請告訴我。