我们在淘宝购物下单了后，肯定是会去看订单页面的，因为这里，大家看到物流的信息和订单的编码等，最近有网友咨询小编手机淘宝订单页面设计方面的内容，想知道该如何去设计。 订单的页面效果如下： 需要设计订单页面话，一些代码是需要而更改的。布局代码如下。 [plain] view plain copy 布局很简单，就不多说明，然后就是mainactivity的代码了 [plain] view plain copypackage com.taobao.pll.tborderdemo; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.RelativeLayout; public class MainActivity extends Activity { private RelativeLayout rl_person_alllist;//全部订单 private RelativeLayout rl_person_wait_pay;//待支付 private RelativeLayout rl_person_send;//待发货 private RelativeLayout rl_person_wait_get;//待收货 private RelativeLayout rl_person_aftermarket;//售后 private Intent intent;//需要启动的界面 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); } private void initData() { /** * 全部订单 */ rl_person_alllist.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { intent = new Intent(getApplicationContext(),OrderActivity.class); intent.putExtra("page",0); startActivity(intent); } }); /** * 待支付 */ rl_person_wait_pay.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { intent = new Intent(getApplicationContext(),OrderActivity.class); intent.putExtra("page",1); startActivity(intent); } }); /** * 待发货 */ rl_person_send.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { intent = new Intent(getApplicationContext(),OrderActivity.class); intent.putExtra("page",2); startActivity(intent); } }); /** * 待收货 */ rl_person_wait_get.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { intent = new Intent(getApplicationContext(),OrderActivity.class); intent.putExtra("page",3); startActivity(intent); } }); /** * 售后 */ rl_person_aftermarket.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { intent = new Intent(getApplicationContext(),OrderActivity.class); intent.putExtra("page",4); startActivity(intent); } }); } private void initView() { rl_person_alllist = (RelativeLayout) findViewById(R.id.rl_person_alllist); rl_person_wait_pay = (RelativeLayout) findViewById(R.id.rl_person_wait_pay); rl_person_send = (RelativeLayout) findViewById(R.id.rl_person_send); rl_person_wait_get = (RelativeLayout) findViewById(R.id.rl_person_wait_get); rl_person_aftermarket = (RelativeLayout) findViewById(R.id.rl_person_aftermarket); } } 这里需要说明就只有一点：intent.putExtra("page",0);因为每个点击都需要对应跳转页面的页卡选中哪个，所以需要传入一个page值 再来看OrderActivity的局部，这里稍微复杂那么一点点吧，使用的是radiogroup+viewpager，但是需要禁止左右滑动的，所以 我这里的viewpager是自定义的，先看布局，再看自定的viewpager吧。 [plain] view plain copy [plain] view plain copypackage com.taobao.pll.tborderdemo.view; import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.MotionEvent; /** * Created by pll on 2016/6/26. */ public class CustomViewPager extends ViewPager{ private boolean isCanScroll = false; public CustomViewPager(Context context) { super(context); } public CustomViewPager(Context context, AttributeSet attrs) { super(context, attrs); } public void setScanScroll(boolean isCanScroll){ this.isCanScroll = isCanScroll; } @Override public void scrollTo(int x, int y){ // if (isCanScroll){ super.scrollTo(x, y); // } } @Override public void setCurrentItem(int item) { // TODO Auto-generated method stub super.setCurrentItem(item); } @Override public boolean onTouchEvent(MotionEvent arg0) { // TODO Auto-generated method stub if (isCanScroll) { return super.onTouchEvent(arg0); } else { return false; } } @Override public boolean onInterceptTouchEvent(MotionEvent arg0) { // TODO Auto-generated method stub if (isCanScroll) { return super.onInterceptTouchEvent(arg0); } else { return false; } } } 因为禁止左右滑动，viewpager也只是对 ontouchevent事件做了些处理，很简单，也就不解释了。 再来看OrderActivity.java代码 [plain] view plain copypackage 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")); } } 这里用到的fragment界面布局很简单，就不粘贴出来了，需要说明的是Tab的引导线只根据viewpager和界面的宽度来设定的。 代码注释已经详细说明，还有个需要注意的是，如果禁止了左右滑动，直接代码调用setCurrentItem(page)是不会调用。 setOnPageChangeListener中的onPageSelected方法，所以需要在传入page值得时候，就手动把引导线和字体颜色进行改变。 其实订单页面设计方面已经牵扯到了程序方面了，这个都是技术的问题了。需要懂开发的朋友去进行操作哦，至于设计所用到的一些代码，小编在以上的内容中已经完全为大家整理出来了哦。
|
