Android实训项目报告

2019.7.3（实训第三天）

实验目标：本次实训的主要目标是主界面的设计

实验步骤：

步骤一：在layout文件下，创建三个xml文件，分别为，home_viewpager，fragment_shopping_cart,fragment_type和fragment_user,它们的作用是首页（主界面）头部的轮播图，控制购物车，分类和用户的布局。

步骤二：在包src.com.example下创建一个fragment包，在fragment包中创建五个类，分别为BaseFragment，HomeFragment,ShopingCartFragment,TypeFragment,UserFragment其中HomeFragment,ShopingCartFragment,TypeFragment，UserFragment分别用于调用home_viewpager，fragment_shopping_cart,fragment_type，fragment_user这四个布局视图，由于这四个类调用的方法类似，这里只列举HomeFragment的关键代码，如下：

HomeFragment.class

View view = View.inflate(mContext, R.layout.home_viewpager, null);
		vp=(ViewPager) view.findViewById(R.id.viewpager);

上述代码先从r文件调用layout下的home_viewpager,传递给view对象，并将view对象返回给主函数。

步骤三：在类MainActivity中，调用界面下方的图标，即"主页"，"分类"，"购物车"和"我的",当用户点击四个图标时，下述代码段用于控制页面切换，代码如下：

 private void switchFrament(BaseFragment fragment) {
        //1.得到FragmentManger
        FragmentManager fm = getSupportFragmentManager();
        //2.开启事务
        FragmentTransaction transaction = fm.beginTransaction();
        //3.替换
        transaction.replace(R.id.fl_content, fragment);
        //4.提交事务
        transaction.commit();
    }

下述代码段用于监听用户点击图标时，根据对应的id获取对应位置fragment，并进行替换，代码如下：

class MyOnCheckedChangeListener implements RadioGroup.OnCheckedChangeListener {

        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId){
                case R.id.rb_home://主页      
                    position = 0;
                    break;
                case R.id.rb_type://分类
                    position = 1;
                    break;
                case R.id.rb_shopingcart://购物车
                    position = 2;
                    break;
                case R.id.rb_user://我的
                    position = 3;
                    break;
                default:
                    position = 0;
                    break;
            }

            //根据位置得到对应的Fragment
            BaseFragment to = getFragment();
            //替换
            switchFrament(to);

        }
    }

最终效果图如下：