手机淘宝订单页面设计怎么做？需要什么代码？

问答

提问

取消

淘宝开店

手机淘宝订单页面设计怎么做？需要什么代码？

2018-06-08 12:51:51 6104人阅读

　　我们在淘宝购物下单了后，肯定是会去看订单页面的，因为这里，大家看到物流的信息和订单的编码等，最近有网友咨询小编手机淘宝订单页面设计方面的内容，想知道该如何去设计。

　　订单的页面效果如下：

　　手机淘宝订单页面设计.png

　　需要设计订单页面话，一些代码是需要而更改的。布局代码如下。

　　[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值得时候，就手动把引导线和字体颜色进行改变。

　　其实订单页面设计方面已经牵扯到了程序方面了，这个都是技术的问题了。需要懂开发的朋友去进行操作哦，至于设计所用到的一些代码，小编在以上的内容中已经完全为大家整理出来了哦。

手机淘宝订单页面设计怎么做？需要什么代码？

推荐阅读

热门文章

关于

链接

合作伙伴

商务合作

淘宝大学