1. 程式人生 > >仿淘寶訂單管理介面設計

仿淘寶訂單管理介面設計

package com.taobao.pll.tborderdemo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import com.taobao.pll.tborderdemo.adapter.FragmentAdapter;
import com.taobao.pll.tborderdemo.fragment.OrderGetFragment;
import com.taobao.pll.tborderdemo.fragment.OrderListFragment;
import com.taobao.pll.tborderdemo.fragment.OrderPayFragment;
import com.taobao.pll.tborderdemo.fragment.OrderSendFragment;
import com.taobao.pll.tborderdemo.fragment.OrderServiceFragment;
import com.taobao.pll.tborderdemo.view.CustomViewPager;

import java.util.ArrayList;
import java.util.List;

public class OrderActivity extends FragmentActivity {

    private List mFragmentList;//五個介面的集合
    private FragmentAdapter mFragmentAdapter;//介面介面卡
    private CustomViewPager vp_order;//自定義viewpager
    private int page;//得到選擇的頁碼
    private RadioGroup rg_order;//頂部頁碼
    /**
     * Tab顯示內容TextView
     */
    private RadioButton tv_order_all, tv_order_pay, tv_order_send, tv_order_get,tv_order_service;
    //頂部導航欄的集合
    private ArrayList tabList;
    /**
     * Tab的那個引導線
     */
    private ImageView mTabLineIv;
    /**
     * Fragment
     */
    private OrderListFragment mOrderListFragment;//全部訂單
    private OrderPayFragment mOrderPayFragment;//待支付
    private OrderSendFragment mOderSendFragment;//待發貨
    private OrderGetFragment mOderGetFragment;//待收貨
    private OrderServiceFragment mOderServiceFragment;//售後服務
    /**
     * ViewPager的當前選中頁
     */
    private int currentIndex;
    /**
     * 螢幕的寬度
     */
    private int screenWidth;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_order);
        initView();
        initData();
        initTabLineWidth();
    }

    /**
     * 設定滑動條的寬度為螢幕的1/5(根據Tab的個數而定)
     */
    private void initTabLineWidth() {
        DisplayMetrics dpMetrics = new DisplayMetrics();
        getWindow().getWindowManager().getDefaultDisplay()
                .getMetrics(dpMetrics);
        screenWidth = dpMetrics.widthPixels;
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
                .getLayoutParams();
        lp.width = screenWidth / 5;
        mTabLineIv.setLayoutParams(lp);
    }

    private void initData() {
        /**
         * 進入時候根據page值設定導航欄選中哪個
         */
        initDataForTopPage();
        /**
         * 載入引導頁的資料
         */
        mFragmentList = new ArrayList();
        mOrderListFragment = new OrderListFragment();
        mOrderPayFragment = new OrderPayFragment();
        mOderSendFragment = new OrderSendFragment();
        mOderGetFragment = new OrderGetFragment();
        mOderServiceFragment = new OrderServiceFragment();

        mFragmentList.add(mOrderListFragment);
        mFragmentList.add(mOrderPayFragment);
        mFragmentList.add(mOderSendFragment);
        mFragmentList.add(mOderGetFragment);
        mFragmentList.add(mOderServiceFragment);
        mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList);
        vp_order.setAdapter(mFragmentAdapter);
        vp_order.setCurrentItem(page);
        vp_order.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
                        .getLayoutParams();
                /**
                 * 利用currentIndex(當前所在頁面)和position(下一個頁面)以及offset來
                 * 設定mTabLineIv的左邊距 滑動場景:
                 * 記5個頁面,
                 * 從左到右分別為0,1,2,3,4
                 * 0->1; 1->2; 2->3; 3->4; 4->3; 3->2;2->1; 1->0
                 */
                if (currentIndex == 0 && position == 0)// 0->1
                {
                    lp.leftMargin = (int) (positionOffset * (screenWidth * 1.0 / 5) + currentIndex
                            * (screenWidth / 5));

                } else if (currentIndex == 1 && position == 0) // 1->0
                {
                    lp.leftMargin = (int) (-(1 - positionOffset)
                            * (screenWidth * 1.0 / 5) + currentIndex
                            * (screenWidth / 5));

                } else if (currentIndex == 1 && position == 1) // 1->2
                {
                    lp.leftMargin = (int) (positionOffset * (screenWidth * 1.0 / 5) + currentIndex
                            * (screenWidth / 5));
                } else if (currentIndex == 2 && position == 1) // 2->1
                {
                    lp.leftMargin = (int) (-(1 - positionOffset)
                            * (screenWidth * 1.0 / 5) + currentIndex
                            * (screenWidth / 5));
                } else if (currentIndex == 2 && position == 2) // 2->3
                {
                    lp.leftMargin = (int) (positionOffset * (screenWidth * 1.0 / 5) + currentIndex
                            * (screenWidth / 5));
                } else if (currentIndex == 3 && position == 3) // 3->4
                {
                    lp.leftMargin = (int) (positionOffset * (screenWidth * 1.0 / 5) + currentIndex
                            * (screenWidth / 5));
                } else if (currentIndex == 3 && position == 2) // 3->2
                {
                    lp.leftMargin = (int) (-(1 - positionOffset)
                            * (screenWidth * 1.0 / 5) + currentIndex
                            * (screenWidth / 5));

                } else if (currentIndex == 4 && position == 3) // 4->3
                {
                    lp.leftMargin = (int) (-(1 - positionOffset)
                            * (screenWidth * 1.0 / 5) + currentIndex
                            * (screenWidth / 5));
                } else if (currentIndex == 4 && position == 4) // 4->3
                {
                    lp.leftMargin = (int) (positionOffset * (screenWidth * 1.0 / 5) + currentIndex
                            * (screenWidth / 5));
                }

                mTabLineIv.setLayoutParams(lp);
            }

            /**
             * position :當前頁面,及你點選滑動的頁面 offset:當前頁面偏移的百分比
             * offsetPixels:當前頁面偏移的畫素位置
             */
            @Override
            public void onPageSelected(int position) {
                resetTextView();
                switch (position) {
                    case 0:
                        tv_order_all.setTextColor(Color.BLUE);
                        break;
                    case 1:
                        tv_order_pay.setTextColor(Color.BLUE);
                        break;
                    case 2:
                        tv_order_send.setTextColor(Color.BLUE);
                        break;
                    case 3:
                        tv_order_get.setTextColor(Color.BLUE);
                        break;
                    case 4:
                        tv_order_service.setTextColor(Color.BLUE);
                        break;
                }
                currentIndex = position;
            }

            /**
             * state滑動中的狀態 有三種狀態(0,1,2) 1:正在滑動 2:滑動完畢 0:什麼都沒做。
             */
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        /**
         * 頂部導航介面切換的監聽
         */
        rg_order.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
                switch (checkedId) {
                    case R.id.tv_order_all:
                        vp_order.setCurrentItem(0);
                        break;
                    case R.id.tv_order_pay:
                        vp_order.setCurrentItem(1);
                        break;
                    case R.id.tv_order_send:
                        vp_order.setCurrentItem(2);
                        break;
                    case R.id.tv_order_get:
                        vp_order.setCurrentItem(3);
                        break;
                    case R.id.tv_order_service:
                        vp_order.setCurrentItem(4);
                        break;
                }
            }
        });
    }

    private void initDataForTopPage() {
        vp_order.setCurrentItem(0);
        tabList = new ArrayList<>();
        tabList.add(R.id.tv_order_all);
        tabList.add(R.id.tv_order_pay);
        tabList.add(R.id.tv_order_send);
        tabList.add(R.id.tv_order_get);
        tabList.add(R.id.tv_order_service);
        rg_order.check(tabList.get(page));
        resetTextView();
        switch (page){
            case 0:
                tv_order_all.setTextColor(Color.BLUE);
                break;
            case 1:
                tv_order_pay.setTextColor(Color.BLUE);
                break;
            case 2:
                tv_order_send.setTextColor(Color.BLUE);
                break;
            case 3:
                tv_order_get.setTextColor(Color.BLUE);
                break;
            case 4:
                tv_order_service.setTextColor(Color.BLUE);
                break;
        }
        currentIndex = page;
    }

    private void initView() {
        vp_order = (CustomViewPager)findViewById(R.id.vp_order);
        tv_order_all = (RadioButton)findViewById(R.id.tv_order_all);
        tv_order_pay = (RadioButton)findViewById(R.id.tv_order_pay);
        tv_order_send = (RadioButton)findViewById(R.id.tv_order_send);
        tv_order_get = (RadioButton)findViewById(R.id.tv_order_get);
        tv_order_service = (RadioButton)findViewById(R.id.tv_order_service);
        mTabLineIv = (ImageView)findViewById(R.id.mTabLineIv);
        rg_order = (RadioGroup)findViewById(R.id.rg_order);
        page = getIntent().getIntExtra("page", -1);
    }

    /**
     * 重置顏色
     */
    private void resetTextView() {
        tv_order_all.setTextColor(Color.parseColor("#777777"));
        tv_order_pay.setTextColor(Color.parseColor("#777777"));
        tv_order_send.setTextColor(Color.parseColor("#777777"));
        tv_order_get.setTextColor(Color.parseColor("#777777"));
        tv_order_service.setTextColor(Color.parseColor("#777777"));
    }
}