PagerTitleStrip 的使用
新建一个PagerTitleStripActivity,如下:
public class PagerTitleStripActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private ArrayList<GoodsInfo> goodsList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_pager_title_strip);
initPagerStrip(); // 初始化翻页标题栏
initViewPager(); // 初始化翻页视图
}
private void initPagerStrip() {
PagerTitleStrip pts_title = findViewById(R.id.pts_title);
// PagerTitleStrip 这个控件只能在代码中设置文本样式,没法在xml中设置,因为xml中没有对应的样式属性
pts_title.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);
pts_title.setTextColor(Color.BLUE);
}
private void initViewPager() {
goodsList = GoodsInfo.getDefaultList();
ImagePagerAdapter adapter = new ImagePagerAdapter(this, goodsList);
ViewPager vp_content = findViewById(R.id.vp_content);
vp_content.setAdapter(adapter);
vp_content.addOnPageChangeListener(this);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
ToastUtil.showToast(this, "您翻到的手机品牌是:" + goodsList.get(position).name);
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
对应的xml为activity_pager_title_strip,如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:orientation="vertical">
<androidx.viewpager.widget.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="400dp" >
<androidx.viewpager.widget.PagerTitleStrip
android:id="@+id/pts_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</androidx.viewpager.widget.ViewPager>
</LinearLayout>
PagerTabStrip 的使用
新建一个activity,命名为PagerTabStripActivity,如下
public class PagerTabStripActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private ArrayList<GoodsInfo> goodsList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_pager_tab_strip);
initPagerStrip();
initViewPager();
}
private void initPagerStrip() {
PagerTabStrip pts_tab = findViewById(R.id.pts_tab);
// PagerTabStrip 这个控件只能在代码中设置文本样式,没法在xml中设置,因为xml中没有对应的样式属性
pts_tab.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);
pts_tab.setTextColor(Color.RED);
}
private void initViewPager() {
goodsList = GoodsInfo.getDefaultList();
ImagePagerAdapter adapter = new ImagePagerAdapter(this, goodsList);
ViewPager vp_content = findViewById(R.id.vp_content);
vp_content.setAdapter(adapter);
vp_content.setCurrentItem(1);
vp_content.addOnPageChangeListener(this);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
ToastUtil.showToast(this, "您翻到的手机品牌是:" + goodsList.get(position).name);
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
PagerTabStripActivity 对应的布局文件为activity_pager_tab_strip,如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.viewpager.widget.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.viewpager.widget.PagerTabStrip
android:id="@+id/pts_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</androidx.viewpager.widget.ViewPager>
</LinearLayout>
公共用到的部分为适配器以及模型,如下:
用到的适配为ImagePagerAdapter,如下
public class ImagePagerAdapter extends PagerAdapter {
private Context mContext;
private ArrayList<GoodsInfo> mGoodsList = new ArrayList<GoodsInfo>();
private ArrayList<ImageView> mViewList = new ArrayList<ImageView>();
public ImagePagerAdapter(Context mContext, ArrayList<GoodsInfo> mGoodsList) {
this.mContext = mContext;
this.mGoodsList = mGoodsList;
for (int i = 0; i < mGoodsList.size(); i ++) {
ImageView view = new ImageView(mContext);
view.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
view.setImageResource(mGoodsList.get(i).pic);
view.setScaleType(ImageView.ScaleType.FIT_CENTER);
mViewList.add(view);
}
}
@Override
public int getCount() {
return mViewList.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
// 从容器中销毁指定位置的页面
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView(mViewList.get(position));
}
// 实例化指定位置的页面,并将其添加到容器中
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
container.addView(mViewList.get(position));
return mViewList.get(position);
}
// 获得指定页面的标题文本
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return mGoodsList.get(position).name;
}
}
用到的模型为GoodsInfo,如下:
public class GoodsInfo {
public long rowId; // 行号
public int xuHao; // 序号
public String name;
public String desc;
public float price;
public String thumb_path; // 小图的保存路径
public String pic_path; // 大图的保存路径
public int thumb;
public int pic;
public int count;
public GoodsInfo() {
rowId = 0L;
xuHao = 0;
name = "";
desc = "";
price = 0f;
thumb_path = "";
pic_path = "";
thumb = 0;
pic = 0;
count = 0;
}
private static String[] mNameArr = {
"iPhone8", "Mate10", "小米6", "OPPO R11", "vivo X9S", "魅族Pro6S"
};
private static String[] mDescArr = {
"Apple iPhone 8 256GB 玫瑰金色 移动联通电信4G手机",
"华为 HUAWEI Mate10 6GB+128GB 全网通(香槟金)",
"小米 MI6 全网通版 6GB+128GB 亮白色",
"OPPO R11 4G+64G 全网通4G智能手机 玫瑰金",
"vivo X9s 4GB+64GB 全网通4G拍照手机 玫瑰金",
"魅族 PRO6S 4GB+64GB 全网通公开版 星空黑 移动联通电信4G手机"
};
// 声明一个手机商品的价格数组
private static float[] mPriceArr = {6888, 3999, 2999, 2899, 2698, 2098};
private static int[] mCountArr = {1, 5, 3, 2, 4, 2};
// 声明一个手机商品的小图数组
private static int[] mThumbArr = {
R.drawable.iphone_s, R.drawable.huawei_s, R.drawable.xiaomi_s,
R.drawable.oppo_s, R.drawable.vivo_s, R.drawable.meizu_s
};
// 声明一个手机商品的大图数组
private static int[] mPicArr = {
R.drawable.iphone, R.drawable.huawei, R.drawable.xiaomi,
R.drawable.oppo, R.drawable.vivo, R.drawable.meizu
};
// 获取默认的手机信息列表
public static ArrayList<GoodsInfo> getDefaultList() {
ArrayList<GoodsInfo> goodsList = new ArrayList<GoodsInfo>();
for (int i = 0; i < mNameArr.length; i++) {
GoodsInfo info = new GoodsInfo();
info.name = mNameArr[i];
info.desc = mDescArr[i];
info.price = mPriceArr[i];
info.thumb = mThumbArr[i];
info.pic = mPicArr[i];
info.count = mCountArr[i];
goodsList.add(info);
}
return goodsList;
}
}
效果图如下:
- 左边的图是:PagerTitleStripActivity的效果
- 右边的图是:PagerTabStripActivity的效果
两者对比:
- PagerTitleStrip 只有文字,不可点击进行页面切换
- PagerTabStrip 类似于选项卡效果,除了文字,再文字下方还有横线,点击对应tab,可以进行对应页面的切换