2018-06-08 12:51:51
手机淘宝订单页面设计怎么做？需要什么代码？
我们在淘宝购物下单了后，肯定是会去看订单页面的，因为这里，大家看到物流的信息和订单的编码等，最近有网友咨询小编手机淘宝订单页面设计方面的内容，想知道该如何去设计。
订单的页面效果如下：
需要设计订单页面话，一些代码是需要而更改的。布局代码如下。
[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值得时候，就手动把引导线和字体颜色进行改变。
其实订单页面设计方面已经牵扯到了程序方面了，这个都是技术的问题了。需要懂开发的朋友去进行操作哦，至于设计所用到的一些代码，小编在以上的内容中已经完全为大家整理出来了哦。
推荐阅读：
