android - 在 Vertical ViewPager 中实现 ViewPager

Question

我用过Vertical Viewpager在我的显示数据集合的项目中。在单个数据(项目)中，我有更多图像要显示。所以我尝试使用 viewpager。

但是当我水平滚动时，它会阻止垂直 Viewpager(Parent) 。这意味着，如果我在第一项中水平滚动，我可以看到所有图像，但无法移动到父 viewpager 中的下一项。

然后我尝试使用 RecyclerView 和 PagerSnapHelper 之类的

        RecyclerView normalImageDisplay=layout.findViewById(R.id.recycler_view);
        normalImageDisplay.setAdapter(new NewsSlidingFullImageAdapter(context,nhBean.getImageUrl()));
        RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(context,LinearLayoutManager.HORIZONTAL,false)
        {
            @Override
            public boolean canScrollVertically() {
                return false;
            }
        };
        normalImageDisplay.setLayoutManager(mLayoutManager);
        SnapHelper snapHelper = new PagerSnapHelper();
        snapHelper.attachToRecyclerView(normalImageDisplay);

出现同样的问题。我搜索了很多。我发现了一些类似的问题，但没有答案。

更多详情:

我的场景:

我需要在每个项目中显示带有文本和一些按钮的图像。我已经用 Vertical Viewpager 完成了。但在某些项目中，图像数不止一个。所以我决定使用 horizo​​ntal viewpager。它有效，但正如我所说的那样，滚动有问题。它阻止父 viewpager(Vertical Viewpager)。这意味着，如果我在一些水平滑动后垂直滚动图像，它会阻止移动到下一个项目。

帮助我摆脱困境。提前致谢!!!

Answer 1

You can use Vertical RecyclerView with Horizontal ViewPager

这是您的要求的示例演示，并进行了一些额外的修改，希望对您有所帮助

MainActivity

public class MainActivity extends AppCompatActivity {

    RecyclerView myRecyclerView;
    private ArrayList<DataModel> arrayList = new ArrayList<>();
    DataAdapter adapter;

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

        myRecyclerView = findViewById(R.id.myRecyclerView);
        myRecyclerView.setHasFixedSize(true);
        myRecyclerView.setLayoutManager(new LinearLayoutManager(this));

        addData();


        adapter = new DataAdapter(this, arrayList);
        myRecyclerView.setAdapter(adapter);
    }

    private void addData() {

        DataModel dataModel = new DataModel();
        dataModel.setTitle("Image collection One");
        ArrayList<Integer> list= new ArrayList<>();

        for (int i = 0; i < 5; i++) {
            list.add(R.drawable.kid);
        }
        dataModel.setArrayList(list);

        arrayList.add(dataModel);


        DataModel dataModel2 = new DataModel();
        dataModel2.setTitle("Image collection Two");
        ArrayList<Integer> list2= new ArrayList<>();

        for (int i = 0; i < 5; i++) {
            list2.add(R.drawable.nilesh);
        }
        dataModel2.setArrayList(list2);

        arrayList.add(dataModel2);


        DataModel dataModel3 = new DataModel();
        dataModel3.setTitle("Image collection Three");
        ArrayList<Integer> list3= new ArrayList<>();

        for (int i = 0; i < 5; i++) {
            list3.add(R.drawable.kid);
        }
        dataModel3.setArrayList(list3);

        arrayList.add(dataModel3);


        DataModel dataModel4 = new DataModel();
        dataModel4.setTitle("Image collection Four");
        ArrayList<Integer> list4= new ArrayList<>();

        for (int i = 0; i < 5; i++) {
            list4.add(R.drawable.nilesh);
        }
        dataModel4.setArrayList(list4);

        arrayList.add(dataModel4);


    }
}

R.layout.activity_main

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

<android.support.v7.widget.RecyclerView
    android:id="@+id/myRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

</LinearLayout>

DataAdapter

public class DataAdapter extends RecyclerView.Adapter<DataAdapter.ViewHolder> {

    private Context context;
    private ArrayList<DataModel> arrayList;

    public DataAdapter(Context context, ArrayList<DataModel> arrayList) {
        this.context = context;
        this.arrayList = arrayList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.custom_layout, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {

        holder.tvTitle.setText(arrayList.get(position).getTitle());
        ImageAdapter imageAdapter= new ImageAdapter(context,arrayList.get(position).getArrayList());
        holder.myViewPager.setAdapter(imageAdapter);
        holder.myTabLayout.setupWithViewPager(holder.myViewPager, true);

    }

    @Override
    public int getItemCount() {
        return arrayList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        ViewPager myViewPager;
        TextView tvTitle;
        Button myButton;
        TabLayout myTabLayout;
        public ViewHolder(View itemView) {
            super(itemView);

            myViewPager=itemView.findViewById(R.id.myViewPager);
            tvTitle=itemView.findViewById(R.id.tvTitle);
            myButton=itemView.findViewById(R.id.myButton);
            myTabLayout=itemView.findViewById(R.id.myTabLayout);

            myButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(context, "clicked position : "+getAdapterPosition(), Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
}

R.layout.custom_layout

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="4dp"
    app:cardUseCompatPadding="true"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#199bd2"
            android:textSize="30sp"
            android:textStyle="bold"
            tools:text="Nilesh Rathod" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="250dp">

            <android.support.v4.view.ViewPager
                android:id="@+id/myViewPager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </android.support.v4.view.ViewPager>

            <android.support.design.widget.TabLayout
                android:id="@+id/myTabLayout"
                app:tabBackground="@drawable/tab_selector"
                app:tabGravity="center"
                android:layout_alignParentBottom="true"
                app:tabIndicatorHeight="0dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

        </RelativeLayout>

        <Button
            android:id="@+id/myButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Click Me" />
    </LinearLayout>

</android.support.v7.widget.CardView>

ImageAdapter

public class ImageAdapter extends PagerAdapter {

    ArrayList<Integer> arrayList= new ArrayList<>();
    private LayoutInflater inflater;
    private Context context;

    public ImageAdapter( Context context,ArrayList<Integer>imageArray) {
        this.arrayList = imageArray;
        this.context = context;
        inflater= LayoutInflater.from(context);
    }

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

    @Override
    public int getCount() {
        return arrayList.size();
    }

    @Override
    public Object instantiateItem(ViewGroup view, int position) {
        View imageLayout = inflater.inflate(R.layout.pager_layout, view, false);

        assert imageLayout != null;
        final ImageView imageView = (ImageView) imageLayout
                .findViewById(R.id.image);


        imageView.setImageResource(arrayList.get(position));

        view.addView(imageLayout, 0);

        return imageLayout;
    }

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

    @Override
    public void restoreState(Parcelable state, ClassLoader loader) {
    }

    @Override
    public Parcelable saveState() {
        return null;
    }
}

R.layout.pager_layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:padding="1dip" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher"
        android:scaleType="centerCrop" />
</LinearLayout>

DataModel

public class DataModel {
    String title;
    ArrayList<Integer> arrayList= new ArrayList<>();
    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public ArrayList<Integer> getArrayList() {
        return arrayList;
    }

    public void setArrayList(ArrayList<Integer> arrayList) {
        this.arrayList = arrayList;
    }
}

tab_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/selected_dot"
        android:state_selected="true"/>

    <item android:drawable="@drawable/default_dot"/>
</selector>

@drawable/selected_dot

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
</layer-list>

@drawable/default_dot

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>
    </item>
</layer-list>

输出