仿淘寶訂單管理介面設計
阿新 • • 發佈:2019-01-02
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")); } }