仿購物類APP秒殺活動頁面

在淘寶和京東都可以看到一類秒殺活動，即在特定的時間段內商品有着“貌似十分實惠”的價格，誘惑衆親剁手。
本着學習的態度，模仿了一下整個頁面的內容，發現主要難點有兩個方面：

頂部指示器內容及位置的動態調整；
各個頁面計時器的實現

這裏就我所遇見的問題做一下分析，首先看一下效果圖。

由於動圖使用GifCam錄製，限制在2M內之後，效果不看起來是很流暢，實際中在ViewPager中切換fragment是很流暢的

效果圖可以看到，實際實現內容不多，主要是頂部Tab切換，並始終將選中項保持在中間位置，在一點就是右上角計時器的實現。
好了，這裏就這兩個問題說一下。

指示器-ViewPagerIndicator

其實ViewPager的Indicator（指示器），官方也有提供（如TabPageIndicator）使用起來也是很方便，但是在這裏使用有些不太合適，主要是每個Indicator的內容之間距離過寬，indicator的背景色也是無法修改。所以，這裏參考網絡各位大神自定義過的ViewPagerIndicator後，實現如下：

public class ViewPagerIndicator extends LinearLayout {

    private Paint mPaint;
    private Path mPath;
    private int mIndicatorWidth;
    private int mIndicatorHeight;

    /**
     * 三角形的寬度爲單個Tab的1/6
     */
    private static final float RADIO_TRIANGEL = 1.0f / 6;
    /**
     * 三角形的最大寬度
     */
    private final int DIMENSION_TRIANGEL_WIDTH = (int) (getScreenWidth() / 3 * RADIO_TRIANGEL);

    /**
     * 初始時，三角形指示器的偏移量
     */
    private int mInitTranslationX;
    /**
     * 手指滑動時的偏移量
     */
    private float mTranslationX;

    /**
     * 默認的Tab數量
     */
    private static final int COUNT_DEFAULT_TAB = 4;
    /**
     * tab數量
     */
    private int mTabVisibleCount = COUNT_DEFAULT_TAB;

    /**
     * tab上的內容
     */
    private List<String> mTabTitles;
    /**
     * 與之綁定的ViewPager
     */
    public ViewPager mViewPager;

    /**
     * 標題正常時的顏色
     */
    private static final int COLOR_TEXT_NORMAL = 0x77FFFFFF;
    private static final int COLOR_BG_NORMAL = 0xFF252a2e;
    /**
     * 標題選中時的顏色
     */
    private static final int COLOR_TEXT_HIGHLIGHTCOLOR = 0xFFFFFFFF;
    private static final int COLOR_BG_HIGHLIGHTCOLOR = 0xFFE5004F;

    private Context mContext;

    public ViewPagerIndicator(Context context) {
        this(context, null);
        mContext = context;
    }

    public ViewPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;

        // 獲得自定義屬性，tab的數量
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator);
        mTabVisibleCount = a.getInt(R.styleable.ViewPagerIndicator_item_count, COUNT_DEFAULT_TAB);
        if (mTabVisibleCount < 0)
            mTabVisibleCount = COUNT_DEFAULT_TAB;
        a.recycle();

        // 初始化畫筆
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.parseColor("#ffffffff"));
        mPaint.setStyle(Style.FILL);
        mPaint.setPathEffect(new CornerPathEffect(3));

    }

    /**
     * 繪製指示器
     */
    @Override
    protected void dispatchDraw(Canvas canvas) {
        canvas.save();
        canvas.drawPath(mPath, mPaint);
        canvas.restore();

        super.dispatchDraw(canvas);
    }

    /**
     * 初始化指示器的寬度
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mIndicatorWidth = (int) (w / mTabVisibleCount * RADIO_TRIANGEL);
        mIndicatorWidth = Math.min(DIMENSION_TRIANGEL_WIDTH, mIndicatorWidth);

        initTriangle();

        // 初始時的偏移量
        mInitTranslationX = 0 + mIndicatorWidth * 2;
    }

    /**
     * 設置可見的tab的數量
     *
     * @param count
     */
    public void setVisibleTabCount(int count) {
        this.mTabVisibleCount = count;
    }

    /**
     * @param datas
     */
    public void setTabItemTitles(List<String> datas) {
        // 如果傳入的list有值，則移除佈局文件中設置的view
        if (datas != null && datas.size() > 0) {
            this.removeAllViews();
            this.mTabTitles = datas;

            for (String title : mTabTitles) {
                // 添加view
                addView(generateTextView(title));
            }
            // 設置item的click事件
            setItemClickEvent();
        }

    }

    /**
     * 對外的ViewPager的回調接口
     */
    public interface PageChangeListener {
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

        public void onPageSelected(int position);

        public void onPageScrollStateChanged(int state);
    }

    // 對外的ViewPager的回調接口
    private PageChangeListener onPageChangeListener;

    // 對外的ViewPager的回調接口的設置
    public void setOnPageChangeListener(PageChangeListener pageChangeListener) {
        this.onPageChangeListener = pageChangeListener;
    }

    // 設置關聯的ViewPager
    public void setViewPager(ViewPager mViewPager, int pos) {
        this.mViewPager = mViewPager;

        mViewPager.addOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                // 設置字體顏色高亮
                resetTextViewColor();
                highLightTextView(position);

                // 回調
                if (onPageChangeListener != null) {
                    onPageChangeListener.onPageSelected(position);
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                // 滾動
                scroll(position, positionOffset);

                // 回調
                if (onPageChangeListener != null) {
                    onPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                // 回調
                if (onPageChangeListener != null) {
                    onPageChangeListener.onPageScrollStateChanged(state);
                }

            }
        });
        // 設置當前頁
        mViewPager.setCurrentItem(pos);
        // 高亮
        highLightTextView(pos);
    }

    /**
     * 高亮文本
     *
     * @param position
     */
    protected void highLightTextView(int position) {
        View view = getChildAt(position);
        if (view instanceof TextView) {
            ((TextView) view).setTextColor(COLOR_TEXT_HIGHLIGHTCOLOR);
            ((TextView) view).setBackgroundColor(COLOR_BG_HIGHLIGHTCOLOR);

        }

    }

    /**
     * 重置文本顏色
     */
    private void resetTextViewColor() {
        for (int i = 0; i < getChildCount(); i++) {
            View view = getChildAt(i);
            if (view instanceof TextView) {
                ((TextView) view).setTextColor(COLOR_TEXT_NORMAL);
                ((TextView) view).setBackgroundColor(COLOR_BG_NORMAL);
            }
        }
    }

    /**
     * 設置點擊事件
     */
    public void setItemClickEvent() {
        int cCount = getChildCount();
        for (int i = 0; i < cCount; i++) {
            final int j = i;
            View view = getChildAt(i);
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    mViewPager.setCurrentItem(j);
                }
            });
        }
    }

    /**
     * 根據標題生成我們的TextView
     *
     * @param text
     * @return
     */
    private TextView generateTextView(String text) {
        TextView tv = new TextView(getContext());
        LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT);
        lp.width = getScreenWidth() / mTabVisibleCount;
        tv.setGravity(Gravity.CENTER);
        tv.setTextColor(COLOR_TEXT_NORMAL);
        tv.setText(text);
        tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
        tv.setLayoutParams(lp);
        return tv;
    }

    /**
     * 初始化指示器
     */
    private void initTriangle() {
        mPath = new Path();
        mIndicatorHeight = (int) (mIndicatorWidth / 2 / Math.sqrt(2));
        mPath.moveTo(0, 0);
        mPath.lineTo(mIndicatorWidth, 0);
        mPath.lineTo(mIndicatorWidth / 2, -mIndicatorHeight);
        mPath.close();
    }

    /**
     * 指示器跟隨手指滾動，以及容器滾動
     *
     * @param position
     * @param offset
     */
    public void scroll(int position, float offset) {
        /**
         * <pre>
         *  0-1:position=0 ;1-0:postion=0;
         * </pre>
         */
        // 不斷改變偏移量，invalidate


        int tabWidth = getScreenWidth() / mTabVisibleCount;
        int movex = (getScreenWidth() - tabWidth) / 2;


        if (mTabVisibleCount != 1) {

            this.scrollTo((position - (mTabVisibleCount - 2)) * tabWidth + tabWidth / 2, 0);


        } else
        // 爲count爲1時 的特殊處理
        {
            this.scrollTo(position * tabWidth + (int) (tabWidth * offset), 0);
        }
        // }

        invalidate();
    }

    /**
     * 設置佈局中view的一些必要屬性；如果設置了setTabTitles，佈局中view則無效
     */
    @Override
    protected void onFinishInflate() {
        Log.e("TAG", "onFinishInflate");
        super.onFinishInflate();

        int cCount = getChildCount();

        if (cCount == 0)
            return;

        for (int i = 0; i < cCount; i++) {
            View view = getChildAt(i);
            LayoutParams lp = (LayoutParams) view.getLayoutParams();
            lp.weight = 0;
            lp.width = getScreenWidth() / mTabVisibleCount;
            view.setLayoutParams(lp);
        }
        // 設置點擊事件
        setItemClickEvent();

    }

    /**
     * 獲得屏幕的寬度
     *
     * @return
     */
    public int getScreenWidth() {
        WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.widthPixels;
    }

}

這個類在很大程度上參考了鴻洋大神的博客，並因此處所需就scroll方法做了調整，這裏在再一次慶幸我們可以站在巨人的肩膀上前行。

代碼可以看到，這個scroll方法是在ViewPager的onPageScrolled方法中調用，也就是隨着ViewPager的滑動，同時實現頂部Indicator的滑動，這裏要確保當前點擊某項或者是ViewPager滑動後對應的Indicator應該始終處在水平中間的位置，明白這點結合當前所需顯示tab的個數，即可確定scroll滑動距離的計算方法；這個其實很簡單，多做幾次嘗試就可以總結出規律來，這裏就不再詳細分析。

計時器的實現

第一次見到這個搶購頁面時，感覺很簡單，不就是一個計時器做倒計時嗎？而自己嘗試後卻發現有很多問題。首先這裏使用計時器必然要用到線程，那麼這個線程什麼時候開始呢？又在什麼時候結束呢？而且就算知道了，能確保每一次都能順利的結束線程嗎？（結束一個線程應該是一件很niubility的事情）

所以經過各種嘗試後，實現如下

public class VpSimpleFragment extends Fragment {
    public static final String BUNDLE_DATA = "bean";
    private TimeBean bean;
    private View rootView;
    private TextView TimerH, TimerM, TimerS;
    private TextView statusTv;


    //計時器
    private int TotalCount = 360;
    private ScheduledExecutorService scheduledExecutorService;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState)

    {

        rootView = inflater.inflate(R.layout.fragment_vs, null);
        Bundle arguments = getArguments();
        if (arguments != null) {
            bean = (TimeBean) arguments.getSerializable(BUNDLE_DATA);
        }
        InitView();
        setData();
        return rootView;

    }

    /**
     * 這裏針對不同的場次，隨機設定一個計數值（實際開發中可從服務器獲取這個計數值）
     */
    private void setData() {
        String temp="";
        switch (bean.getStatus()) {
            case 0:
                temp = "距離下場開始";
                TotalCount=2490;
                break;
            case 1:
                temp = "距離本次結束";
                TotalCount=1189;
                break;
            case 2:
                temp = "距離本場開始";
                TotalCount=3311;
                break;
            default:
                break;
        }
        statusTv.setText(temp);
    }

    private void InitView() {
        TimerH = V.f(rootView, R.id.TimerH);
        TimerM = V.f(rootView, R.id.TimerM);
        TimerS = V.f(rootView, R.id.TimerS);
        statusTv = V.f(rootView, R.id.statuTv);

        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        // 每隔一秒執行一次task任務
        scheduledExecutorService.scheduleAtFixedRate(task, 1, 1, TimeUnit.SECONDS);

    }


    final Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case 1:
                    int STv = TotalCount % 60;
                    int MTv = TotalCount / 60 % 60;
                    int Htv = TotalCount / 3600;

                    if (STv < 10) {
                        TimerS.setText("0" + STv);
                    } else {
                        TimerS.setText("" + STv);
                    }

                    if (MTv < 10) {
                        TimerM.setText("0" + MTv);
                    } else {
                        TimerM.setText("" + MTv);

                    }

                    if (Htv < 10) {
                        TimerH.setText("0" + Htv);
                    } else {
                        TimerH.setText("" + Htv);

                    }


                    if (TotalCount <= 0) {
                        task.cancel();
                        scheduledExecutorService.shutdown();
                    }
            }
        }
    };

    TimerTask task = new TimerTask() {
        @Override
        public void run() {
            TotalCount--;
            Message message = new Message();
            message.what = 1;
            handler.sendMessage(message);
        }
    };


    public static VpSimpleFragment newInstance(TimeBean bean) {
        Bundle bundle = new Bundle();
        bundle.putSerializable(BUNDLE_DATA, bean);
        VpSimpleFragment fragment = new VpSimpleFragment();
        fragment.setArguments(bundle);
        return fragment;
    }


    @Override
    public void onPause() {
        super.onPause();
        //這一句很關鍵，確保在fragment之間進行切換時，定時器不會出現混亂
        scheduledExecutorService.shutdown();
    }
}

這裏有些同學可能會說，何必用計時器自己算，獲取手機當前時間減去活動時間的，不就是剩下的時間了嗎？理論上是這樣，但是這種做法是有問題的。首先，如果秒殺活動結束時間爲22：00，有人刻意將手機時間又20：50改爲20：00，那麼這個時候活動倒計時怎麼向這類用戶解釋呢？很有可能就被惡意用戶鑽了空子；另一方面，就算沒有人惡意更改手機時間，那也無法保證手機時間和服務器的時間一致，這也會導致許多說不清的問題。所以，由服務器返回值，做倒計時計數是比較可取的方法。

• 倒計時更新時間

這裏的倒計時實現很好理解，開啓一個線程不斷的將總計數值做減法（直到歸零爲止），然後通過handler更新TextView的內容，並根據當前頁面的內容，顯示不同的指示信息。

• findViewByID的封裝

上面代碼裏中：

TimerH = V.f(rootView, R.id.TimerH);

這個的作用其實就是findViewByID，只不過是對其做了一下封裝，免得每次寫那麼一長串，還得加上強制類型轉換（真不知道官方這麼做的意義是什麼，爲什麼不在findViewByID內部自己實現強制類型轉換），這裏也分享一下這個方法

V.class

public class V {

    /**
     * activity.findViewById()
     * 
     * @param context
     * @param id
     * @return
     */
    public static <T extends View> T f(Activity context, int id) {
        return (T) context.findViewById(id);
    }

    /**
     * rootView.findViewById()
     * 
     * @param rootView
     * @param id
     * @return
     */

    public static <T extends View> T f(View rootView, int id) {
        return (T) rootView.findViewById(id);
    }

Mainactivity中使用

public class MainActivity extends FragmentActivity {
    private List<Fragment> mTabContents = new ArrayList<Fragment>();
    private FragmentPagerAdapter mAdapter;
    private ViewPager mViewPager;
    private List<String> mDatas = new ArrayList<>();
    private List<TimeBean> jsonbean = new ArrayList<>();

    private ViewPagerIndicator mIndicator;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.vp_indicator);

        initView();
        getDataFromServer();
        initDatas();


    }

    /**
     * 此處設定虛擬數據（實際應該從服務器獲取）
     */
    private void getDataFromServer() {
        TimeBean time1=new TimeBean();
        time1.setStatus(0);
        time1.setTime("08:00");
        TimeBean time2=new TimeBean();
        time2.setStatus(0);
        time2.setTime("10:00");
        TimeBean time3=new TimeBean();
        time3.setStatus(1);
        time3.setTime("12:00");
        TimeBean time4=new TimeBean();
        time4.setStatus(2);
        time4.setTime("18:00");
        TimeBean time5=new TimeBean();
        time5.setStatus(2);
        time5.setTime("22:00");

        jsonbean.add(time1);
        jsonbean.add(time2);
        jsonbean.add(time3);
        jsonbean.add(time4);
        jsonbean.add(time5);
    }

    private void initDatas() {
        int postion=0;
        for(int i=0;i<jsonbean.size();i++){
            String str="";
            switch (jsonbean.get(i).getStatus()){
                case 0:
                    str=jsonbean.get(i).getTime()+"\n已結束";
                    break;
                case 1:
                    str=jsonbean.get(i).getTime()+"\n進行中";
                    break;
                case 2:
                    str=jsonbean.get(i).getTime()+"\n即將開始";
                    break;
                default:
                    break;
            }
            mDatas.add(str);

            //將正在進行的活動位置進行標記
            if(jsonbean.get(i).getStatus()==1){
                postion=i;
            }
        }


        for (TimeBean data : jsonbean) {
            VpSimpleFragment fragment = VpSimpleFragment.newInstance(data);
            mTabContents.add(fragment);
        }




        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return mTabContents.size();
            }

            @Override
            public Fragment getItem(int position) {
                return mTabContents.get(position);
            }
        };

        //設置Tab上的標題
        mIndicator.setTabItemTitles(mDatas);
        mViewPager.setAdapter(mAdapter);
        //設置關聯的ViewPager,並且顯示爲當前正在進行的fragment頁面,確保每次進入頁面，正好顯示正在進行的活動
        mIndicator.setViewPager(mViewPager, postion);
    }

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.id_vp);
        mIndicator = (ViewPagerIndicator) findViewById(R.id.id_indicator);
    }

}

這裏vp_indicator這個佈局文件很簡單，就是Indicator下面放一個ViewPager，很典型的一種使用方法，這裏就不再列出。

---

好了，這個就是對秒殺活動頁面的一些理解，當然實際應用中比這裏要複雜很多，參與秒殺的時間段、計時數值的獲取是動態的，因此這裏只是就所遇到的問題做一些淺顯的記錄，方便日後使用。