在 Vertical ViewPager 中实现 ViewPager

Implement ViewPager inside Vertical ViewPager(在 Vertical ViewPager 中实现 ViewPager)
本文介绍了在 Vertical ViewPager 中实现 ViewPager的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在显示数据集合的项目中使用了

I have used Vertical Viewpager in my project which displays a collection of data. And In single data(item), I have more images to display. So I tried with viewpager.

But when I scroll horizontally, it blocks vertical Viewpager(Parent) . That means, If I am scrolling horizontally in first item, I can see all the images but I can't move to next item in parent viewpager.

Then I tried with RecyclerView with PagerSnapHelper like

        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);

The same problem occurs. I searched a lot. I found some similar questions but there is no answer for it.

For more detail:

My scenario:

I need to display image with text and some buttons in each item . I have done it with Vertical Viewpager. But in some items, the image count is more than one. So I decided to use horizontal viewpager. It works but as I said in question, there is a problem in scrolling. It blocks the parent viewpager(Vertical Viewpager). It means, if i scroll vertically on the Image after some horizontal swipes, it blocks moving to next item.

Help me to get out of it. Thanks in advance!!!

解决方案

You can use Vertical RecyclerView with Horizontal ViewPager

Here is the sample demo of your requirement with some bonus modification hope it helps you

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>

OUTPUT

这篇关于在 Vertical ViewPager 中实现 ViewPager的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

How to target newer versions in .gitlab-ci.yml using auto devops (java 11 instead of 8 and Android 31 instead of 29)(如何在.gitlab-ci.yml中使用自动开发工具(Java 11而不是8,Android 31而不是29)瞄准较新的版本)
Android + coreLibraryDesugaring: which Java 11 APIs can I expect to work?(Android+core LibraryDesugering:我可以期待哪些Java 11API能够工作?)
How to render something in an if statement React Native(如何在If语句中呈现某些内容Reaction Native)
How can I sync two flatList scroll position in react native(如何在本机Reaction中同步两个平面列表滚动位置)
Using Firebase Firestore in offline only mode(在仅脱机模式下使用Firebase FiRestore)
Crash on Google Play Pre-Launch Report: java.lang.NoSuchMethodError(Google Play发布前崩溃报告:java.lang.NoSuchMethodError)