代码之家 › 专栏 › 技术社区 › Jyoti JK

在垂直ViewPager中实现ViewPager

android-viewpager android-recyclerview android-layout android

Jyoti JK · 技术社区 · 6 年前

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

但是 . 这意味着,如果我在第一个项目中水平滚动,我可以看到所有的图像,但我不能移动到父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);

同样的问题也会出现。我找了很多。我发现了一些类似的问题,但没有答案。

更多详情:

我的场景:

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

1 回复 | 直到 4 年前

AskNilesh 6 年前

你可以用垂直的 RecyclerView

这是你的要求与一些奖金修改的示例演示,希望它能帮助你

主要活动

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


    }
}

<?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>

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\u布局

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

图像适配器

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\u布局

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

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

标签_选择器.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>

<?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>

@可绘制/默认\u点

<?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>

输出