我想用viewpager2来实现横向滑动卡片的效果,但是遇到问题

我想用viewpager2来实现横向滑动卡片的效果,但是遇到问题

http://img1.sycdn.imooc.com//climg/5f657a0909c6d2d210801028.jpg

我需要的效果是这样横向滑动但是每个卡片不需要match_parent来占据整个width的。然而我遇到的问题是,当我设置item对应的layout的时候,它被要求width和height要设置成match_parent才能不报错。然后我换思路,调节父容器的height,但是展示出来的不是想要的效果,如下图

http://img1.sycdn.imooc.com//climg/5f657c5309ceb72a17320971.jpg

那么如何才能做到图一的效果呢?

ViewPagerActivity

package com.example.viewpager;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerActivity extends AppCompatActivity {

    List<Msg> datas = new ArrayList<>();
    ViewPager2 mViewPager;

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

        datas.addAll(MsgLab.generateMockList());

        RecyclerView.Adapter mAdapter = new RecyclerView.Adapter() {
            @NonNull
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
                View view = LayoutInflater.from(ViewPagerActivity.this).inflate(R.layout.viewpager_item_msg, parent, false);
                return new ViewHolder(view);
            }

            @Override
            public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
                ViewHolder viewHolder = (ViewHolder) holder;

                viewHolder.mIvImg.setImageResource(datas.get(position).getIntResId());
                viewHolder.mTvTitle.setText(datas.get(position).getTitle());
            }

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

        mViewPager = findViewById(R.id.id_vp2_msgPager);
        mViewPager.setAdapter(mAdapter);
    }

    private class ViewHolder extends RecyclerView.ViewHolder{
        private ImageView mIvImg;
        private TextView mTvTitle;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            mIvImg = itemView.findViewById(R.id.id_iv_img);
            mTvTitle = itemView.findViewById(R.id.id_tv_title);
        }
    }
}

activity_view_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".ViewPagerActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/id_vp2_msgPager"
        android:layout_width="200dp"
        android:layout_height="250dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

viewpager_item_msg.xml

<?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:background="#ffffffff"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="205dp"
        android:layout_marginHorizontal="8dp"
        android:layout_marginVertical="8dp"
        app:cardCornerRadius="8dp">

        <ImageView
            android:id="@+id/id_iv_img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            tools:src="@drawable/img01" />

    </androidx.cardview.widget.CardView>

    <TextView
        android:id="@+id/id_tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="10dp"
        android:textColor="#000000"
        android:textSize="15dp"
        android:maxLines="2"
        android:textStyle="bold"
        tools:text="在xx网学习Android技术" />


</LinearLayout>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕雪 2020-09-21 11:01:28

xml里为父控件和自己都设置上android:clipChildren="false",这样超出View的子页面,不会被切掉,仍然可以显示。

http://img1.sycdn.imooc.com//climg/5f6816f809edcdc610060624.jpg

代码中

http://img1.sycdn.imooc.com//climg/5f6817260987f50b07680655.jpg

好帮手慕雪 2020-09-19 20:51:16

 给ViewPager的左右android:layout_marginLeft ,android:layout_marginRight留一下空间再试一下。祝:学习愉快


  • 提问者 AgonyX #1
    我觉得老师您没好好理解我的问题
    2020-09-19 20:54:27
  • 好帮手慕雪 回复 提问者 AgonyX #2
    ViewPager的宽度还改为match_parent,每个item也还是match_parent,都没问题,只是让ViewPager增加android:layout_marginLeft 和android:layout_marginRigh
    2020-09-19 21:02:03
  • 提问者 AgonyX 回复 好帮手慕雪 #3
    这不就只有一个viewpager或者只有一个卡片占领一整块屏幕吗,达不到图一那个两到三个卡片在同一块屏幕的效果啊 <androidx.viewpager2.widget.ViewPager2 android:id="@+id/id_vp2_msgPager" android:layout_width="match_parent" android:layout_height="250dp" android:layout_marginHorizontal="10dp" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
    2020-09-19 21:11:07
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.Android 网络操作与流行框架
  • 参与学习           人
  • 提交作业       220    份
  • 解答问题       1800    个

本阶段是联网及数据处理的必备技能。课程从网络基础知识到线程间协同工作、异步下载处理;从文件存储、到轻量级数据库SQLite的使用;最后利用最流程的第三方框架助你快速开发企业级APP。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师