开发Android微商城记录

Android微商城购物选购商品界面实现（1）

最近在做安卓开发实习，正好做到微商城这块，刚开始做，准备将整个过程记录下来。现在微商城越来越多，基本格式也就那么多，我做的也就是仿照基本的布局做的，有不足之处欢迎交流。

1.首先是界面布局

 1.1 主界面商铺介绍
 公告和商铺信息可以展开查看详情，进行编辑，上部设置导航栏。

 1.2底部导航栏准备设置四部分
   商品界面使用相对布局，设置一个listview显示商品种类，另外用多个listview显示各个类型的商品，当选择某个类型的商品的时候，通过获取id进行选择所要显示的listview，其他的listview设置为invisible，这样才能达到显示不同种类的商品。但是在开发的过程中发现当使用多个listview时，选择不同类型的商品会出现商品详细信息出现乱位的现象。另一篇博客有介绍（解决listview与scrollview结合使用时出现的问题）。但是现在使用listview的GONE属性将其他的隐藏，然后就可以显示每一个分类的情况，目的达成。

布局文件tab02.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.weishop.MainActivity" >

    <LinearLayout
        android:id="@+id/name_type"
        android:layout_width="90dp"
        android:layout_height="match_parent"
        android:orientation="vertical" 
       >
        <ListView 
            android:id="@android:id/list"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            > 
        </ListView>  
    </LinearLayout>

    <LinearLayout
        android:id="@+id/sale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="90dp"
        android:orientation="vertical" >
        <ListView
            android:id="@+id/cont1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            ></ListView>
        <ListView
            android:id="@+id/cont2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            ></ListView>
        <ListView
            android:id="@+id/cont3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            ></ListView>
        <ListView
            android:id="@+id/cont4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            ></ListView>
        <ListView
            android:id="@+id/cont5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            ></ListView>
        <ListView
            android:id="@+id/cont6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            ></ListView>

    </LinearLayout>

</RelativeLayout>

2.四个界面打算用Fragement实现

设置四个 Fragment界面，对应底部导航栏，选中时设置高亮，未选中时无效果。

public class Main extends FragmentActivity implements OnClickListener {

    private LinearLayout mTabHome;
    private LinearLayout mTabSelect;
    private LinearLayout mTabCart;
    private LinearLayout mTabSetting;

    /*
     * 图片按钮
     */
    private ImageButton mImgHome;
    private ImageButton mImgSelect;
    private ImageButton mImgCart;
    private ImageButton mImgSetting;

    /*
     * Fragment设置
     */
    private Fragment mTab01;
    private Fragment mTab02;
    private Fragment mTab03;
    private Fragment mTab04;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        initView();
        initEvent();
        setSelect(0);
    }

    /*
     * 点击事件
     */
    private void initEvent() {
        mTabHome.setOnClickListener(this);
        mTabSelect.setOnClickListener(this);
        mTabCart.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

    /*
     * 视图设置
     */
    private void initView() {
        mTabHome = (LinearLayout) findViewById(R.id.id_tab_home);
        mTabSelect = (LinearLayout) findViewById(R.id.id_tab_select);
        mTabCart = (LinearLayout) findViewById(R.id.id_tab_cart);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);

        mImgHome = (ImageButton) findViewById(R.id.id_tab_home_img);
        mImgSelect = (ImageButton) findViewById(R.id.id_tab_select_img);
        mImgCart = (ImageButton) findViewById(R.id.id_tab_cart_img);
        mImgSetting = (ImageButton) findViewById(R.id.id_tab_settings_img);
    }

    /*
     * 设置选择触发事件
     */
    private void setSelect(int i) {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        /*
         * 把图片设置为亮的 设置内容区域
         */
        switch (i) {
        case 0:
            if (mTab01 == null) {
                mTab01 = new tapOne();
                transaction.add(R.id.id_content, mTab01);
            } else {
                transaction.show(mTab01);
            }
            mImgHome.setImageResource(R.drawable.home_pressed);
            break;
        case 1:
            if (mTab02 == null) {
                mTab02 = new tapTwo();
                transaction.add(R.id.id_content, mTab02);
            } else {
                transaction.show(mTab02);

            }
            mImgSelect.setImageResource(R.drawable.select_pressed);
            break;
        case 2:
            if (mTab03 == null) {
                mTab03 = new tapThree();
                transaction.add(R.id.id_content, mTab03);
            } else {
                transaction.show(mTab03);
            }
            mImgCart.setImageResource(R.drawable.cart_pressed);
            break;
        case 3:
            if (mTab04 == null) {
                mTab04 = new tapFour();
                transaction.add(R.id.id_content, mTab04);
            } else {
                transaction.show(mTab04);
            }
            mImgSetting.setImageResource(R.drawable.setting_pressed);
            break;
        default:
            break;
        }

        transaction.commit();
    }

    private void hideFragment(FragmentTransaction transaction) {
        if (mTab01 != null) {
            transaction.hide(mTab01);
        }
        if (mTab02 != null) {
            transaction.hide(mTab02);
        }
        if (mTab03 != null) {
            transaction.hide(mTab03);
        }
        if (mTab04 != null) {
            transaction.hide(mTab04);
        }
    }

    @Override
    public void onClick(View v) {
        resetImgs();
        switch (v.getId()) {
        case R.id.id_tab_home:
            setSelect(0);
            break;
        case R.id.id_tab_select:
            setSelect(1);
            break;
        case R.id.id_tab_cart:
            setSelect(2);
            break;
        case R.id.id_tab_setting:
            setSelect(3);
            break;

        default:
            break;
        }
    }

    /**
     * 切换图片至暗色
     */
    private void resetImgs() {
        mImgHome.setImageResource(R.drawable.home_normal);
        mImgSelect.setImageResource(R.drawable.select_normal);
        mImgCart.setImageResource(R.drawable.cart_normal);
        mImgSetting.setImageResource(R.drawable.setting_normal);
    }

}

3.功能介绍

微商城将线下的商品交易转移到线上进行，极大的方便了商家开拓市场，作为在校的大学生，现在很多都使用微商城来购物（基于微信的公众号和服务号）
购物车界面还未完成，个人中心界面的布局已经完成。想说的是个人中心界面中显示图标为圆形时，参考了网上的教程，使用canavs实现，但是只能固定的取圆形，里边的图片位置无法实现移动。

圆形图标实现代码和布局
代码
CircleImageView.java

/**
 * 
 * 圆形ImageView，可设置最多两个宽度不同且颜色不同的圆形边框。
 * 
 * 设置颜色在xml布局文件中由自定义属性配置参数指定
 * 
 */
public class CircleImageView extends ImageView {

    Path path;
    public PaintFlagsDrawFilter mPaintFlagsDrawFilter;// 毛边过滤
    Paint paint;

    public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
        init();
    }

    public CircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        init();
    }

    public CircleImageView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        init();
    }

    public void init() {
        mPaintFlagsDrawFilter = new PaintFlagsDrawFilter(0,Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setColor(Color.WHITE);

    }
    @Override
    protected void onDraw(Canvas cns) {
        // TODO Auto-generated method stub
        float h = getMeasuredHeight() - 3.0f;
        float w = getMeasuredWidth() - 3.0f;
        if (path == null) {
            path = new Path();
            path.addCircle(w / 2.0f, h / 2.0f,
                    (float) Math.min(w / 2.0f, (h / 2.0)), Path.Direction.CCW);
            path.close();
        }
        cns.drawCircle(w / 2.0f, h / 2.0f, Math.min(w / 2.0f, h / 2.0f) + 1.5f,
                paint);
        int saveCount = cns.getSaveCount();
        cns.save();
        cns.setDrawFilter(mPaintFlagsDrawFilter);
        cns.clipPath(path, Region.Op.REPLACE);
        cns.setDrawFilter(mPaintFlagsDrawFilter);
        cns.drawColor(Color.WHITE);
        super.onDraw(cns);
        cns.restoreToCount(saveCount);
    }

}

布局文件
实现圆形图标显示

        <com.example.util.CircleImageView
            android:id="@+id/round_picture"
            android:layout_width="55dp"
            android:layout_height="60dp"
            android:layout_marginLeft="30dp"
            android:src="@drawable/person" />

未完成的功能：
1.商品介绍详细信息
2.商品选择，下单，计算价格
3.订单管理
4.服务器和后台的设计

暂时想到这么多，毕竟学的不算太深，欢迎各位有兴趣的和我交流，大家一起进步！！！