一、布局实现
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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"
android:clipChildren="false"
>
<androidx.viewpager.widget.ViewPager
android:id="@+id/vp_card"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="50dp"
android:layout_marginTop="20dp"
android:layout_marginRight="50dp"
android:clipChildren="false"
></androidx.viewpager.widget.ViewPager>
</RelativeLayout>
单项布局实现 item_task_viewcard.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"
android:id="@+id/ll_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="vertical"
>
<!--cardCornerRadius边缘的弧度,
cardElevation高度,cardMaxElevation最大高度,cardUseCompatPadding设置内边距-->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="5dp"
app:cardElevation="10dp"
app:cardMaxElevation="12dp"
app:cardUseCompatPadding="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:gravity="center"
android:id="@+id/tv_task_card_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:text="我是任务1"
android:textSize="16sp"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#00ff5f"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
二、代码实现
卡片适配器 ViewPagerCardAdapter
public class ViewPagerCardAdapter extends PagerAdapter {
private MainActivity mainActivity;
@Override
public int getCount() {
return 8;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = LayoutInflater.from(container.getContext()).inflate(R.layout.item_task_viewcard, null);
TextView cardNumber = view.findViewById(R.id.tv_task_card_number);
cardNumber.setText("任务" + (position + 1));
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
卡片滑动动画 CardTransformer:
public class CardTransformer implements ViewPager.PageTransformer {
private static final float MAX_SCALE = 1.2f;
private static final float MIN_SCALE = 1.0f;//0.85f
@Override
public void transformPage(View page, float position) {
if (position <= 1) {
// 1.2f + (1-1)*(1.2-1.0)
float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);
page.setScaleX(scaleFactor); //缩放效果
if (position > 0) {
page.setTranslationX(-scaleFactor * 2);
} else if (position < 0) {
page.setTranslationX(scaleFactor * 2);
}
page.setScaleY(scaleFactor);
} else {
page.setScaleX(MIN_SCALE);
page.setScaleY(MIN_SCALE);
}
}
}
实现代码 MainActivity:
public class MainActivity extends AppCompatActivity {
private ViewPager mViewCard;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mViewCard = (ViewPager) findViewById(R.id.vp_card);
mViewCard.setAdapter(new ViewPagerCardAdapter());
mViewCard.setOffscreenPageLimit(2);//预加载2个
mViewCard.setPageMargin(50);//设置viewpage之间的间距
mViewCard.setClipChildren(false);
mViewCard.setPageTransformer(true, new CardTransformer());
}
}