用Android语言及viewPager和pageAdapter实现广告页轮播、卡片内容包含一张图片及图片右上角的标签,打造卡片切换、卡片缩放动画的代码
时间: 2024-03-04 18:48:07 浏览: 156
以下是一个使用 Android 语言和 ViewPager 和 PagerAdapter 实现广告轮播和卡片内容的样例代码。代码中包括卡片切换和缩放动画的实现:
```
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ViewPager mPager;
private ArrayList<AdCard> mCards = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化卡片数据
mCards.add(new AdCard(R.drawable.card_1, "标签1"));
mCards.add(new AdCard(R.drawable.card_2, "标签2"));
mCards.add(new AdCard(R.drawable.card_3, "标签3"));
// 初始化 ViewPager
mPager = findViewById(R.id.viewPager);
mPager.setAdapter(new CardPagerAdapter(this, mCards));
mPager.setPageTransformer(false, new CardPageTransformer());
}
// 自定义 PagerAdapter
private class CardPagerAdapter extends PagerAdapter {
private Context mContext;
private ArrayList<AdCard> mCards;
public CardPagerAdapter(Context context, ArrayList<AdCard> cards) {
mContext = context;
mCards = cards;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = LayoutInflater.from(mContext).inflate(R.layout.card_layout, container, false);
ImageView imageView = view.findViewById(R.id.cardImage);
TextView textView = view.findViewById(R.id.cardLabel);
AdCard card = mCards.get(position);
imageView.setImageResource(card.getImageResId());
textView.setText(card.getLabel());
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
@Override
public int getCount() {
return mCards.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
}
// 自定义 ViewPager 页面切换动画
private class CardPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
@Override
public void transformPage(View page, float position) {
int pageWidth = page.getWidth();
int pageHeight = page.getHeight();
if (position < -1) {
page.setAlpha(0f);
} else if (position <= 1) {
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
page.setTranslationX(horzMargin - vertMargin / 2);
} else {
page.setTranslationX(-horzMargin + vertMargin / 2);
}
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
page.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else {
page.setAlpha(0f);
}
}
}
// 卡片数据类
private class AdCard {
private int mImageResId;
private String mLabel;
public AdCard(int imageResId, String label) {
mImageResId = imageResId;
mLabel = label;
}
public int getImageResId() {
return mImageResId;
}
public String getLabel() {
return mLabel;
}
}
}
```
以上代码中,我们自定义了一个 PagerAdapter 类,用于管理 ViewPager 中的卡片视图。在 instantiateItem 方法中,我们使用 LayoutInflater 加载了卡片布局,并将卡片的图片和标签设置到布局中。在 destroyItem 方法中,我们从容器中移除了不再需要的卡片视图。
我们还自定义了一个 ViewPager.PageTransformer 类,用于实现卡片切换和缩放动画。在 transformPage 方法中,我们根据页面的位置计算了页面的缩放比例、水平和垂直的偏移量以及页面的透明度。通过这些计算,我们实现了一种卡片式的页面切换效果。
最后,我们提供了一个 AdCard 类,用于存储卡片的图片和标签数据。
希望这个样例代码能够帮助到你!
阅读全文