首页 > 其他分享 >翻页标题栏 PagerTitleStrip 和 PagerTabStrip

翻页标题栏 PagerTitleStrip 和 PagerTabStrip

时间:2023-03-06 10:22:05浏览次数:42  
标签:翻页 int PagerTabStrip void 标题栏 private Override position public

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,可以进行对应页面的切换

标签:翻页,int,PagerTabStrip,void,标题栏,private,Override,position,public
From: https://www.cnblogs.com/styCy/p/17182836.html

相关文章