devbox
pgrmghi
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android Studio App开发实战项目之实现淘宝电商App首页界面（附源码，可用于大作业参考）_android 淘宝代码

作者：pgrmghi | 2023-12-17 12:35:19

赞

踩

android 淘宝代码

需要源码和图片集请点赞关注收藏后评论区留言或者私信~~~

各家电商的App首页都是动感十足，页面元素丰富令人眼花缭乱，其中运用了Android的多种组合控件，可以说是App界面开发的集大成之作，下面我们也动手实现一个。

一、需求描述

本次项目主要模仿淘宝App采用的技术，所以有底部标签栏，顶部也有标题栏，并且对于分类页面的商品列表，也会有高低不一呈现的瀑布流效果

二、界面设计

界面主要用到了以下控件

1：底部标签栏

2：广告条

3：循环视图RecyclerView

4：工具栏Toolbar

5：标签布局TabLaout

6：第二代翻页视图

7：循环视图的瀑布流布局

8：下拉刷新布局

三、关键部分

1：在ScrollView内部添加RecyclerView

2：关于ViewPager+Fragment的多重嵌套

3：电商首页项目的源码之间关系

与本次项目主要有关的代码之间关系如下

1：DepartmentStoreActivity.java 这是电商App首页的入口代码

2：DepartmentPagerAdapter.java  这是电商首页集成3个碎片页的翻页适配代码

3：DepartmentHomeFragment.java 这是首页标签对应的碎片代码

4：DepartmentClassFragment.java 这是分类标签对应的碎片代码

5：DepartmentCartFragment.java 这是购物车标签对应的碎片代码

四、演示效果 

首页效果如下

 点击下方的标签栏可切换

点击上方的标签栏可以切换到时装频道

 

购物车频道可以参见我之前的博客

 

五、代码 

主类代码

  1. package com.example.chapter12;
  2.  
  3. import androidx.appcompat.app.AppCompatActivity;
  4. import androidx.viewpager.widget.ViewPager;
  5.  
  6. import android.os.Bundle;
  7. import android.widget.RadioButton;
  8. import android.widget.RadioGroup;
  9.  
  10. import com.example.chapter12.adapter.DepartmentPagerAdapter;
  11.  
  12. public class DepartmentStoreActivity extends AppCompatActivity {
  13.     private ViewPager vp_content; // 声明一个翻页视图对象
  14.     private RadioGroup rg_tabbar; // 声明一个单选组对象
  15.  
  16.     @Override
  17.     protected void onCreate(Bundle savedInstanceState) {
  18.         super.onCreate(savedInstanceState);
  19.         setContentView(R.layout.activity_department_store);
  20.         vp_content = findViewById(R.id.vp_content);
  21.         // 构建一个翻页适配器
  22.         DepartmentPagerAdapter adapter = new DepartmentPagerAdapter(getSupportFragmentManager());
  23.         vp_content.setAdapter(adapter); // 设置翻页视图的适配器
  24.         // 给翻页视图添加页面变更监听器
  25.         vp_content.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
  26.             @Override
  27.             public void onPageSelected(int position) {
  28.                 // 选中指定位置的单选按钮
  29.                 rg_tabbar.check(rg_tabbar.getChildAt(position).getId());
  30.             }
  31.         });
  32.         rg_tabbar = findViewById(R.id.rg_tabbar);
  33.         // 设置单选组的选中监听器
  34.         rg_tabbar.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
  35.             @Override
  36.             public void onCheckedChanged(RadioGroup group, int checkedId) {
  37.                 for (int pos=0; pos<rg_tabbar.getChildCount(); pos++) {
  38.                     // 获得指定位置的单选按钮
  39.                     RadioButton tab = (RadioButton) rg_tabbar.getChildAt(pos);
  40.                     if (tab.getId() == checkedId) { // 正是当前选中的按钮
  41.                         vp_content.setCurrentItem(pos); // 设置翻页视图显示第几页
  42.                     }
  43.                 }
  44.             }
  45.         });
  46.     }
  47. }

适配器类代码

  1. package com.example.chapter12.adapter;
  2.  
  3. import androidx.fragment.app.Fragment;
  4. import androidx.fragment.app.FragmentManager;
  5. import androidx.fragment.app.FragmentPagerAdapter;
  6.  
  7. import com.example.chapter12.fragment.DepartmentHomeFragment;
  8. import com.example.chapter12.fragment.DepartmentClassFragment;
  9. import com.example.chapter12.fragment.DepartmentCartFragment;
  10.  
  11. public class DepartmentPagerAdapter extends FragmentPagerAdapter {
  12.  
  13.     // 碎片页适配器的构造方法，传入碎片管理器
  14.     public DepartmentPagerAdapter(FragmentManager fm) {
  15.         super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
  16.     }
  17.  
  18.     // 获取指定位置的碎片Fragment
  19.     public Fragment getItem(int position) {
  20.         if (position == 0) {
  21.             return new DepartmentHomeFragment();
  22.         } else if (position == 1) {
  23.             return new DepartmentClassFragment();
  24.         } else if (position == 2) {
  25.             return new DepartmentCartFragment();
  26.         } else {
  27.             return null;
  28.         }
  29.     }
  30.  
  31.     // 获取碎片Fragment的个数
  32.     public int getCount() {
  33.         return 3;
  34.     }
  35. }

碎片类代码

  1. package com.example.chapter12.fragment;
  2.  
  3. import android.os.Bundle;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7.  
  8. import androidx.appcompat.app.AppCompatActivity;
  9. import androidx.appcompat.widget.Toolbar;
  10. import androidx.fragment.app.Fragment;
  11.  
  12. import com.example.chapter12.R;
  13.  
  14. public class DepartmentCartFragment extends Fragment {
  15.     protected View mView; // 声明一个视图对象
  16.     protected AppCompatActivity mActivity; // 声明一个活动对象
  17.  
  18.     @Override
  19.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  20.         mActivity = (AppCompatActivity) getActivity();
  21.         mView = inflater.inflate(R.layout.fragment_department_cart, container, false);
  22.         // 从布局文件中获取名叫tl_head的工具栏
  23.         Toolbar tl_head = mView.findViewById(R.id.tl_head);
  24.         tl_head.setTitle("购物车"); // 设置工具栏的标题文字
  25.         mActivity.setSupportActionBar(tl_head); // 使用tl_head替换系统自带的ActionBar
  26.         return mView;
  27.     }
  28. }

2

  1. package com.example.chapter12.fragment;
  2.  
  3. import android.os.Bundle;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7.  
  8. import androidx.appcompat.app.AppCompatActivity;
  9. import androidx.appcompat.widget.Toolbar;
  10. import androidx.fragment.app.Fragment;
  11. import androidx.viewpager2.widget.ViewPager2;
  12.  
  13. import com.example.chapter12.R;
  14. import com.example.chapter12.adapter.ClassPagerAdapter;
  15. import com.google.android.material.tabs.TabLayout;
  16. import com.google.android.material.tabs.TabLayoutMediator;
  17.  
  18. import java.util.ArrayList;
  19. import java.util.List;
  20.  
  21. public class DepartmentClassFragment extends Fragment {
  22.     protected View mView; // 声明一个视图对象
  23.     protected AppCompatActivity mActivity; // 声明一个活动对象
  24.     private List<String> mTitleList = new ArrayList<String>(); // 标题文字列表
  25.  
  26.     @Override
  27.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  28.         mActivity = (AppCompatActivity) getActivity();
  29.         mView = inflater.inflate(R.layout.fragment_department_class, container, false);
  30.         // 从布局文件中获取名叫tl_head的工具栏
  31.         Toolbar tl_head = mView.findViewById(R.id.tl_head);
  32.         mActivity.setSupportActionBar(tl_head); // 使用tl_head替换系统自带的ActionBar
  33.         mTitleList.add("服装");
  34.         mTitleList.add("电器");
  35.         // 从布局文件中获取名叫tab_title的标签布局
  36.         TabLayout tab_title = mView.findViewById(R.id.tab_title);
  37.         // 从布局文件中获取名叫vp2_content的二代翻页视图
  38.         ViewPager2 vp2_content = mView.findViewById(R.id.vp2_content);
  39.         // 构建一个分类信息的翻页适配器。注意Fragment嵌套时要传getChildFragmentManager
  40.         ClassPagerAdapter adapter = new ClassPagerAdapter(mActivity, mTitleList);
  41.         vp2_content.setAdapter(adapter); // 设置二代翻页视图的适配器
  42.         // 把标签布局跟翻页视图通过指定策略连为一体，二者在页面切换时一起联动
  43.         new TabLayoutMediator(tab_title, vp2_content, new TabLayoutMediator.TabConfigurationStrategy() {
  44.             @Override
  45.             public void onConfigureTab(TabLayout.Tab tab, int position) {
  46.                 tab.setText(mTitleList.get(position)); // 设置每页的标签文字
  47.             }
  48.         }).attach();
  49.         return mView;
  50.     }
  51.  
  52. }

3

  1. package com.example.chapter12.fragment;
  2.  
  3. import android.os.Bundle;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.widget.LinearLayout;
  8. import android.widget.Toast;
  9.  
  10. import androidx.appcompat.app.AppCompatActivity;
  11. import androidx.appcompat.widget.Toolbar;
  12. import androidx.fragment.app.Fragment;
  13. import androidx.recyclerview.widget.DefaultItemAnimator;
  14. import androidx.recyclerview.widget.GridLayoutManager;
  15. import androidx.recyclerview.widget.RecyclerView;
  16.  
  17. import com.example.chapter12.R;
  18. import com.example.chapter12.adapter.MobileGridAdapter;
  19. import com.example.chapter12.adapter.MobileRecyclerAdapter;
  20. import com.example.chapter12.adapter.RecyclerCombineAdapter;
  21. import com.example.chapter12.adapter.RecyclerGridAdapter;
  22. import com.example.chapter12.bean.GoodsInfo;
  23. import com.example.chapter12.bean.NewsInfo;
  24. import com.example.chapter12.util.Utils;
  25. import com.example.chapter12.widget.BannerPager;
  26. import com.example.chapter12.widget.SpacesDecoration;
  27.  
  28. import java.util.ArrayList;
  29. import java.util.List;
  30.  
  31. public class DepartmentHomeFragment extends Fragment implements BannerPager.BannerClickListener {
  32.     protected View mView; // 声明一个视图对象
  33.     protected AppCompatActivity mActivity; // 声明一个活动对象
  34.  
  35.     private List<Integer> getImageList() {
  36.         ArrayList<Integer> imageList = new ArrayList<Integer>();
  37.         imageList.add(R.drawable.banner_1);
  38.         imageList.add(R.drawable.banner_2);
  39.         imageList.add(R.drawable.banner_3);
  40.         imageList.add(R.drawable.banner_4);
  41.         imageList.add(R.drawable.banner_5);
  42.         return imageList;
  43.     }
  44.  
  45.     @Override
  46.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  47.         mActivity = (AppCompatActivity) getActivity();
  48.         mView = inflater.inflate(R.layout.fragment_department_home, container, false);
  49.         // 从布局文件中获取名叫tl_head的工具栏
  50.         Toolbar tl_head = mView.findViewById(R.id.tl_head);
  51.         tl_head.setTitle("商城首页"); // 设置工具栏的标题文字
  52.         mActivity.setSupportActionBar(tl_head); // 使用tl_head替换系统自带的ActionBar
  53.         initBanner(); // 初始化广告轮播条
  54.         initGrid(); // 初始化市场网格列表
  55.         initCombine(); // 初始化猜你喜欢的商品展示网格
  56.         initPhone(); // 初始化手机网格列表
  57.         return mView;
  58.     }
  59.  
  60.     private void initBanner() {
  61.         // 从布局文件中获取名叫banner_pager的广告轮播条
  62.         BannerPager banner = mView.findViewById(R.id.banner_pager);
  63.         // 获取广告轮播条的布局参数
  64.         LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) banner.getLayoutParams();
  65.         params.height = (int) (Utils.getScreenWidth(mActivity) * 250f / 640f);
  66.         banner.setLayoutParams(params); // 设置广告轮播条的布局参数
  67.         banner.setImage(getImageList()); // 设置广告轮播条的广告图片列表
  68.         banner.setOnBannerListener(this); // 设置广告轮播条的广告点击监听器
  69.         banner.start(); // 开始轮播广告图片
  70.     }
  71.  
  72.     // 一旦点击了广告图，就回调监听器的onBannerClick方法
  73.     public void onBannerClick(int position) {
  74.         String desc = String.format("您点击了第%d张图片", position + 1);
  75.         Toast.makeText(mActivity, desc, Toast.LENGTH_LONG).show();
  76.     }
  77.  
  78.     private void initGrid() {
  79.         // 从布局文件中获取名叫rv_grid的循环视图
  80.         RecyclerView rv_grid = mView.findViewById(R.id.rv_grid);
  81.         // 创建一个网格布局管理器
  82.         GridLayoutManager manager = new GridLayoutManager(mActivity, 5);
  83.         rv_grid.setLayoutManager(manager); // 设置循环视图的布局管理器
  84.         // 构建一个市场列表的网格适配器
  85.         RecyclerGridAdapter adapter = new RecyclerGridAdapter(mActivity, NewsInfo.getDefaultGrid());
  86.         adapter.setOnItemClickListener(adapter); // 设置网格列表的点击监听器
  87.         adapter.setOnItemLongClickListener(adapter); // 设置网格列表的长按监听器
  88.         rv_grid.setAdapter(adapter); // 设置循环视图的网格适配器
  89.         rv_grid.setItemAnimator(new DefaultItemAnimator()); // 设置循环视图的动画效果
  90.         rv_grid.addItemDecoration(new SpacesDecoration(1)); // 设置循环视图的空白装饰
  91.     }
  92.  
  93.     private void initCombine() {
  94.         // 从布局文件中获取名叫rv_combine的循环视图
  95.         RecyclerView rv_combine = mView.findViewById(R.id.rv_combine);
  96.         // 创建一个四列的网格布局管理器
  97.         GridLayoutManager manager = new GridLayoutManager(mActivity, 4);
  98.         // 设置网格布局管理器的占位规则
  99.         // 以下占位规则的意思是：第一项和第二项占两列，其它项占一列；
  100.         // 如果网格的列数为四，那么第一项和第二项平分第一行，第二行开始每行有四项。
  101.         manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
  102.             @Override
  103.             public int getSpanSize(int position) {
  104.                 if (position == 0 || position == 1) { // 为第一项或者第二项
  105.                     return 2; // 占据两列
  106.                 } else { // 为其它项
  107.                     return 1; // 占据一列
  108.                 }
  109.             }
  110.         });
  111.         rv_combine.setLayoutManager(manager); // 设置循环视图的布局管理器
  112.         // 构建一个猜你喜欢的网格适配器
  113.         RecyclerCombineAdapter adapter = new RecyclerCombineAdapter(mActivity, NewsInfo.getDefaultCombine());
  114.         adapter.setOnItemClickListener(adapter); // 设置网格列表的点击监听器
  115.         adapter.setOnItemLongClickListener(adapter); // 设置网格列表的长按监听器
  116.         rv_combine.setAdapter(adapter); // 设置循环视图的网格适配器
  117.         rv_combine.setItemAnimator(new DefaultItemAnimator());  // 设置循环视图的动画效果
  118.         rv_combine.addItemDecoration(new SpacesDecoration(1));  // 设置循环视图的空白装饰
  119.     }
  120.  
  121.     private void initPhone() {
  122.         // 从布局文件中获取名叫rv_phone的循环视图
  123.         RecyclerView rv_phone = mView.findViewById(R.id.rv_phone);
  124.         // 创建一个网格布局管理器
  125.         GridLayoutManager manager = new GridLayoutManager(mActivity, 3);
  126.         rv_phone.setLayoutManager(manager); // 设置循环视图的布局管理器
  127.         // 构建一个手机列表的循环适配器
  128.         MobileGridAdapter adapter = new MobileGridAdapter(mActivity, GoodsInfo.getDefaultList());
  129.         rv_phone.setAdapter(adapter); // 设置循环视图的网格适配器
  130.         adapter.setOnItemClickListener(adapter); // 设置网格列表的点击监听器
  131.         adapter.setOnItemLongClickListener(adapter); // 设置网格列表的长按监听器
  132.         rv_phone.setItemAnimator(new DefaultItemAnimator()); // 设置循环视图的动画效果
  133.         rv_phone.addItemDecoration(new SpacesDecoration(1)); // 设置循环视图的空白装饰
  134.     }
  135.  
  136. }

XML文件

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:orientation="vertical">
  5.  
  6.     <androidx.viewpager.widget.ViewPager
  7.         android:id="@+id/vp_content"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="0dp"
  10.         android:layout_weight="1" />
  11.  
  12.     <RadioGroup
  13.         android:id="@+id/rg_tabbar"
  14.         android:layout_width="match_parent"
  15.         android:layout_height="60dp"
  16.         android:orientation="horizontal">
  17.  
  18.         <RadioButton
  19.             android:id="@+id/rb_home"
  20.             style="@style/TabButton"
  21.             android:checked="true"
  22.             android:text="首页"
  23.             android:drawableTop="@drawable/tab_first_selector" />
  24.  
  25.         <RadioButton
  26.             android:id="@+id/rb_class"
  27.             style="@style/TabButton"
  28.             android:text="分类"
  29.             android:drawableTop="@drawable/tab_second_selector" />
  30.  
  31.         <RadioButton
  32.             android:id="@+id/rb_cart"
  33.             style="@style/TabButton"
  34.             android:text="购物车"
  35.             android:drawableTop="@drawable/tab_third_selector" />
  36.     </RadioGroup>
  37.  
  38. </LinearLayout>

创作不易 觉得有帮助请点赞关注收藏~~~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/31509
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号