商品秒杀倒计时功能+ViewPager实现画廊效果

模式一:列表形式展示数据,倒计时完成移除此条数据

效果:

商品秒杀倒计时功能+ViewPager实现画廊效果_第1张图片 商品秒杀倒计时功能+ViewPager实现画廊效果_第2张图片 商品秒杀倒计时功能+ViewPager实现画廊效果_第3张图片

涉及到的技术:RecyclerView、CardView、Fresco、CountDownTimer等,可以到本博客去查找

// 倒计时的实现
public class TimeDown extends CountDownTimer {

    // 传进来的TextView
    private TextView mTextView;

    public TimeDown(TextView textView,long millisInFuture,
                    RecyclerViewBaseAdapter adapter,Goods goods) {
        // 1秒更新
        super(millisInFuture, 1000);
        mTextView = textView;
    }

    /** * 剩余的倒计时数值 * @param millisUntilFinished */
    @Override
    public void onTick(long millisUntilFinished) {

        mTextView.setText(" "+getData(millisUntilFinished));
    }

    @Override
    public void onFinish() {

    }


    // 利用DateFormat类 格式化毫秒数,转变成 时:分:秒 格式
    // ******注意****** 毫秒数不能大于86400000,即24小时,
    // 此种写法仅适合小于24小时的格式化
    private String getData(long millisUntilFinished){

        // 初始化Formatter的转换格式
        SimpleDateFormat dateFormat = new SimpleDateFormat("HH:mm:ss");
        dateFormat.setTimeZone(TimeZone.getTimeZone("GMT+00:00"));

        String hms = dateFormat.format(millisUntilFinished);

        return hms;

    }
}

剩下的就是展示数据工作与倒计时完成删除条目操作,请转到下方源码下载

模式二:ViewPager画廊模式

效果:

商品秒杀倒计时功能+ViewPager实现画廊效果_第4张图片 商品秒杀倒计时功能+ViewPager实现画廊效果_第5张图片 商品秒杀倒计时功能+ViewPager实现画廊效果_第6张图片
1.布局

    
    <RelativeLayout  android:gravity="center" android:clipChildren="false" android:id="@+id/viewPagerParent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1">
        <android.support.v4.view.ViewPager  android:id="@+id/viewPager" android:clipChildren="false" android:layout_marginTop="15dp" android:layout_width="270dp" android:layout_height="match_parent" android:layout_marginBottom="20dp">
        android.support.v4.view.ViewPager>
    RelativeLayout>

2.ViewPager设置

private void inflateView(List data) {

        // 设置适配器
        mViewPager.setAdapter(new HomeContentAdapter(data));
        // 指定加载页数
        mViewPager.setOffscreenPageLimit(3);
        // 设置page之间的距离
        mViewPager.setPageMargin(10);

        // 设置ViewPager的切换动画-缩放及透明度
        mViewPager.setPageTransformer(true, new ScalePageTransformer());

        // 监听viewpager滑动
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                // 在page滑动的时候更新界面
                if (mViewPager != null) {
                    mViewPager.invalidate();
                }

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        /** * 需要将整个页面的事件分发给ViewPager,否则只有中间的view能滑动,其他的地方都不能滑动, * 因为ViewPager布局就是中间那一块区域,设置了clipChildren属性, * 其他的子布局都才超出ViewPager范围 */
        mParent.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return mViewPager.dispatchTouchEvent(event);
            }
        });
    }

3.自定义PageTransformer 动画效果

public class ScalePageTransformer implements ViewPager.PageTransformer {

    private static final  float  MAX_SCALE = 1.0f;
    private static final  float  MIN_SCALE = 0.8f;

    /** * * @param page 当前显示的currentPage(View) * @param position 当前currentPage的偏移量 * 比如 a 是第一页 b 是第二页 * 当前页为 a, 当 a 向左滑动, 直到滑到 b 时: * a 的position变化是 [-1 , 0] 由 0 慢慢变到 -1 * b 的position变化是 ( 0 , 1] 由 1 慢慢变到 0 */
    @Override
    public void transformPage(View page, float position) {


        if (position < -1) {
            position = -1;
        } else if (position > 1) {
            position = 1;
        }

        float tempScaleValue = position < 0 ? 1 + position : 1 - position;

        // 计算公式
        float scaleValue = MIN_SCALE + tempScaleValue * (MAX_SCALE - MIN_SCALE);

        //设置缩放比例
        page.setScaleX(scaleValue);
        page.setScaleY(scaleValue);
        //设置透明度
        page.setAlpha(scaleValue);
    }
}

完整功能版源码

你可能感兴趣的:(商品秒杀倒计时功能+ViewPager实现画廊效果)