一个带分类 tag 的 ViewPager

ViewTager

项目地址:auv1107/ViewTager 

简介:一个带分类 tag 的 ViewPager

viewpager-分类-category-tag-

一个带分类 tag 的 ViewPager,因此命名为 ViewTager

在目前流行的 APP 中应用很多,比如

网易新闻触宝输入法
Alt textAlt text

1. 结构

Alt text

2. 用法

2.1 引用

# 项目 build.gradle

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}


# 模块 build.gradle

dependencies {
    compile 'com.github.auv1107:ViewTager:a73de7facf'
}

2.2 添加布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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="com.sctdroid.app.sample.MainActivity">

    <com.sctdroid.app.viewtager.ViewTager
        android:id="@+id/view_tager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

2.3 初始化数据

主要使用两个方法添加适配器

ViewTager viewTager = (ViewTager) findViewById(R.id.view_tager);
viewTager.setRadioGroupAdapter(new RadioAdapter(){
    ...
});
mViewTager.setViewPagerAdapter(new PagerAdapter() {
    ...
});

RadioAdapter 对应 分类列表数据 PagerAdapter 对应 单页 ViewPager 数据

重点: RadioAdapter 和 PagerAdapter 数量要一致。

3. 效果

Alt text

4. 其它方法说明

方法说明
setViewPagerHeightDelegate(ViewHeightDelegate): void若 ViewTager 在 ScrollView 中, 可能需要自己设定ViewPager 的高度
setViewPagerOnPageChangeListener: void用户 OnPageChange 事件
ViewPager指示器是用来显示ViewPager当前页面位置的小组件,一般位于ViewPager的底部或顶部。下面给出一个简单的ViewPager指示器的实现方法。 首先,我们需要在布局文件中添加一个ViewPager和一个指示器组件,可以使用LinearLayout或RelativeLayout等布局容器。 ``` <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"/> <LinearLayout android:id="@+id/indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:orientation="horizontal"/> </RelativeLayout> ``` 其中,ViewPager的id为view_pager,指示器的id为indicator,指示器使用LinearLayout实现,其中包含若干个ImageView组件。 接下来,我们需要在代码中实现ViewPager指示器的逻辑。具体步骤如下: 1. 在Activity或Fragment中获取ViewPager和指示器组件的引用。 2. 创建一个ImageView数组,长度为ViewPager的页面数量。 3. 遍历ImageView数组,为每个ImageView设置未选中状态的图片,并将其添加到指示器组件中。 4. 监听ViewPager的页面滑动事件,根据页面位置更新指示器的状态。 示例代码如下: ``` private ViewPager mViewPager; private LinearLayout mIndicator; private ImageView[] mImageViews; private void initIndicator() { int count = mViewPager.getAdapter().getCount(); mImageViews = new ImageView[count]; for (int i = 0; i < count; i++) { mImageViews[i] = new ImageView(this); mImageViews[i].setImageResource(R.drawable.indicator_unselected); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); lp.setMargins(10, 0, 10, 0); mIndicator.addView(mImageViews[i], lp); } mImageViews[0].setImageResource(R.drawable.indicator_selected); mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { for (int i = 0; i < mImageViews.length; i++) { mImageViews[i].setImageResource(R.drawable.indicator_unselected); } mImageViews[position].setImageResource(R.drawable.indicator_selected); } @Override public void onPageScrollStateChanged(int state) { } }); } ``` 在initIndicator()方法中,我们首先获取ViewPager和指示器组件的引用,然后创建一个ImageView数组,长度为ViewPager的页面数量。接着,我们遍历ImageView数组,为每个ImageView设置未选中状态的图片,并将其添加到指示器组件中。最后,我们监听ViewPager的页面滑动事件,根据页面位置更新指示器的状态。 注意,这里使用了两种不同的图片作为指示器的状态图,一种是未选中状态的图片,另一种是选中状态的图片。这两种图片可以根据自己的需求进行替换。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值