在Vertical ViewPager中实现ViewPager [英] Implement ViewPager inside Vertical 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.
但是当我水平滚动时，它会阻塞垂直Viewpager(Parent).这意味着，如果我在第一项中水平滚动，则可以看到所有图像，但不能移至父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.
然后我尝试将RecyclerView与PagerSnapHelper一起使用
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.
更多详细信息:
我的情况:
我需要在每个项目中显示带有文本和一些按钮的图像.我已经用Vertical Viewpager完成了.但是在某些项目中，图像计数不止一个.因此，我决定使用水平viewpager.它有效，但是正如我所说的，滚动存在问题.它阻止了父viewpager(Vertical Viewpager).这意味着，如果在水平滑动后我在图片"上垂直滚动，则会阻止移至下一个项目.
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!!!
推荐答案
您可以将Vertical
RecyclerView与Horizontal ViewPager一起使用
You can use Vertical
RecyclerViewwith Horizontal ViewPager
这是您的要求的示例演示，希望对奖金有一些修改，希望对您有帮助
Here is the sample demo of your requirement with some bonus modification hope it helps you
MainActivity
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
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
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
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
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
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
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
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
@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
@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>
输出
这篇关于在Vertical ViewPager中实现ViewPager的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
