需要源碼和圖片集請點贊關注收藏后評論區(qū)留言或者私信~~~
各家電商的App首頁都是動感十足，頁面元素豐富令人眼花繚亂，其中運用了Android的多種組合控件，可以說是App界面開發(fā)的集大成之作，下面我們也動手實現(xiàn)一個。
一、需求描述
本次項目主要模仿淘寶App采用的技術，所以有底部標簽欄，頂部也有標題欄，并且對于分類頁面的商品列表，也會有高低不一呈現(xiàn)的瀑布流效果
二、界面設計
界面主要用到了以下控件
1：底部標簽欄
2：廣告條
3：循環(huán)視圖RecyclerView
4：工具欄Toolbar
5：標簽布局TabLaout
6：第二代翻頁視圖
7：循環(huán)視圖的瀑布流布局
8：下拉刷新布局
三、關鍵部分
1：在ScrollView內(nèi)部添加RecyclerView
2：關于ViewPager+Fragment的多重嵌套
3：電商首頁項目的源碼之間關系
與本次項目主要有關的代碼之間關系如下
1：DepartmentStoreActivity.java 這是電商App首頁的入口代碼
2：DepartmentPagerAdapter.java? 這是電商首頁集成3個碎片頁的翻頁適配代碼
3：DepartmentHomeFragment.java 這是首頁標簽對應的碎片代碼
4：DepartmentClassFragment.java 這是分類標簽對應的碎片代碼
5：DepartmentCartFragment.java 這是購物車標簽對應的碎片代碼
四、演示效果?
首頁效果如下
?點擊下方的標簽欄可切換
點擊上方的標簽欄可以切換到時裝頻道
?
購物車頻道可以參見我之前的博客
?
五、代碼?
主類代碼
package com.example.chapter12;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import com.example.chapter12.adapter.DepartmentPagerAdapter;
public class DepartmentStoreActivity extends AppCompatActivity {
private ViewPager vp_content; // 聲明一個翻頁視圖對象
private RadioGroup rg_tabbar; // 聲明一個單選組對象
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_department_store);
vp_content = findViewById(R.id.vp_content);
// 構建一個翻頁適配器
DepartmentPagerAdapter adapter = new DepartmentPagerAdapter(getSupportFragmentManager());
vp_content.setAdapter(adapter); // 設置翻頁視圖的適配器
// 給翻頁視圖添加頁面變更監(jiān)聽器
vp_content.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
// 選中指定位置的單選按鈕
rg_tabbar.check(rg_tabbar.getChildAt(position).getId());
}
});
rg_tabbar = findViewById(R.id.rg_tabbar);
// 設置單選組的選中監(jiān)聽器
rg_tabbar.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
for (int pos=0; pos<rg_tabbar.getChildCount(); pos++) {
// 獲得指定位置的單選按鈕
RadioButton tab = (RadioButton) rg_tabbar.getChildAt(pos);
if (tab.getId() == checkedId) { // 正是當前選中的按鈕
vp_content.setCurrentItem(pos); // 設置翻頁視圖顯示第幾頁
}
}
}
});
}
}
適配器類代碼
package com.example.chapter12.adapter;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import com.example.chapter12.fragment.DepartmentHomeFragment;
import com.example.chapter12.fragment.DepartmentClassFragment;
import com.example.chapter12.fragment.DepartmentCartFragment;
public class DepartmentPagerAdapter extends FragmentPagerAdapter {
// 碎片頁適配器的構造方法，傳入碎片管理器
public DepartmentPagerAdapter(FragmentManager fm) {
super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
}
// 獲取指定位置的碎片F(xiàn)ragment
public Fragment getItem(int position) {
if (position == 0) {
return new DepartmentHomeFragment();
} else if (position == 1) {
return new DepartmentClassFragment();
} else if (position == 2) {
return new DepartmentCartFragment();
} else {
return null;
}
}
// 獲取碎片F(xiàn)ragment的個數(shù)
public int getCount() {
return 3;
}
}
碎片類代碼
package com.example.chapter12.fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import com.example.chapter12.R;
public class DepartmentCartFragment extends Fragment {
protected View mView; // 聲明一個視圖對象
protected AppCompatActivity mActivity; // 聲明一個活動對象
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mActivity = (AppCompatActivity) getActivity();
mView = inflater.inflate(R.layout.fragment_department_cart, container, false);
// 從布局文件中獲取名叫tl_head的工具欄
Toolbar tl_head = mView.findViewById(R.id.tl_head);
tl_head.setTitle("購物車"); // 設置工具欄的標題文字
mActivity.setSupportActionBar(tl_head); // 使用tl_head替換系統(tǒng)自帶的ActionBar
return mView;
}
}
2
package com.example.chapter12.fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;
import com.example.chapter12.R;
import com.example.chapter12.adapter.ClassPagerAdapter;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
import java.util.ArrayList;
import java.util.List;
public class DepartmentClassFragment extends Fragment {
protected View mView; // 聲明一個視圖對象
protected AppCompatActivity mActivity; // 聲明一個活動對象
private List<String> mTitleList = new ArrayList<String>(); // 標題文字列表
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mActivity = (AppCompatActivity) getActivity();
mView = inflater.inflate(R.layout.fragment_department_class, container, false);
// 從布局文件中獲取名叫tl_head的工具欄
Toolbar tl_head = mView.findViewById(R.id.tl_head);
mActivity.setSupportActionBar(tl_head); // 使用tl_head替換系統(tǒng)自帶的ActionBar
mTitleList.add("服裝");
mTitleList.add("電器");
// 從布局文件中獲取名叫tab_title的標簽布局
TabLayout tab_title = mView.findViewById(R.id.tab_title);
// 從布局文件中獲取名叫vp2_content的二代翻頁視圖
ViewPager2 vp2_content = mView.findViewById(R.id.vp2_content);
// 構建一個分類信息的翻頁適配器。注意Fragment嵌套時要傳getChildFragmentManager
ClassPagerAdapter adapter = new ClassPagerAdapter(mActivity, mTitleList);
vp2_content.setAdapter(adapter); // 設置二代翻頁視圖的適配器
// 把標簽布局跟翻頁視圖通過指定策略連為一體，二者在頁面切換時一起聯(lián)動
new TabLayoutMediator(tab_title, vp2_content, new TabLayoutMediator.TabConfigurationStrategy() {
@Override
public void onConfigureTab(TabLayout.Tab tab, int position) {
tab.setText(mTitleList.get(position)); // 設置每頁的標簽文字
}
}).attach();
return mView;
}
}
3文章來源：http://www.zghlxwxcb.cn/news/detail-778944.html
package com.example.chapter12.fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.DefaultItemAnimator;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.example.chapter12.R;
import com.example.chapter12.adapter.MobileGridAdapter;
import com.example.chapter12.adapter.MobileRecyclerAdapter;
import com.example.chapter12.adapter.RecyclerCombineAdapter;
import com.example.chapter12.adapter.RecyclerGridAdapter;
import com.example.chapter12.bean.GoodsInfo;
import com.example.chapter12.bean.NewsInfo;
import com.example.chapter12.util.Utils;
import com.example.chapter12.widget.BannerPager;
import com.example.chapter12.widget.SpacesDecoration;
import java.util.ArrayList;
import java.util.List;
public class DepartmentHomeFragment extends Fragment implements BannerPager.BannerClickListener {
protected View mView; // 聲明一個視圖對象
protected AppCompatActivity mActivity; // 聲明一個活動對象
private List<Integer> getImageList() {
ArrayList<Integer> imageList = new ArrayList<Integer>();
imageList.add(R.drawable.banner_1);
imageList.add(R.drawable.banner_2);
imageList.add(R.drawable.banner_3);
imageList.add(R.drawable.banner_4);
imageList.add(R.drawable.banner_5);
return imageList;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mActivity = (AppCompatActivity) getActivity();
mView = inflater.inflate(R.layout.fragment_department_home, container, false);
// 從布局文件中獲取名叫tl_head的工具欄
Toolbar tl_head = mView.findViewById(R.id.tl_head);
tl_head.setTitle("商城首頁"); // 設置工具欄的標題文字
mActivity.setSupportActionBar(tl_head); // 使用tl_head替換系統(tǒng)自帶的ActionBar
initBanner(); // 初始化廣告輪播條
initGrid(); // 初始化市場網(wǎng)格列表
initCombine(); // 初始化猜你喜歡的商品展示網(wǎng)格
initPhone(); // 初始化手機網(wǎng)格列表
return mView;
}
private void initBanner() {
// 從布局文件中獲取名叫banner_pager的廣告輪播條
BannerPager banner = mView.findViewById(R.id.banner_pager);
// 獲取廣告輪播條的布局參數(shù)
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) banner.getLayoutParams();
params.height = (int) (Utils.getScreenWidth(mActivity) * 250f / 640f);
banner.setLayoutParams(params); // 設置廣告輪播條的布局參數(shù)
banner.setImage(getImageList()); // 設置廣告輪播條的廣告圖片列表
banner.setOnBannerListener(this); // 設置廣告輪播條的廣告點擊監(jiān)聽器
banner.start(); // 開始輪播廣告圖片
}
// 一旦點擊了廣告圖，就回調(diào)監(jiān)聽器的onBannerClick方法
public void onBannerClick(int position) {
String desc = String.format("您點擊了第%d張圖片", position + 1);
Toast.makeText(mActivity, desc, Toast.LENGTH_LONG).show();
}
private void initGrid() {
// 從布局文件中獲取名叫rv_grid的循環(huán)視圖
RecyclerView rv_grid = mView.findViewById(R.id.rv_grid);
// 創(chuàng)建一個網(wǎng)格布局管理器
GridLayoutManager manager = new GridLayoutManager(mActivity, 5);
rv_grid.setLayoutManager(manager); // 設置循環(huán)視圖的布局管理器
// 構建一個市場列表的網(wǎng)格適配器
RecyclerGridAdapter adapter = new RecyclerGridAdapter(mActivity, NewsInfo.getDefaultGrid());
adapter.setOnItemClickListener(adapter); // 設置網(wǎng)格列表的點擊監(jiān)聽器
adapter.setOnItemLongClickListener(adapter); // 設置網(wǎng)格列表的長按監(jiān)聽器
rv_grid.setAdapter(adapter); // 設置循環(huán)視圖的網(wǎng)格適配器
rv_grid.setItemAnimator(new DefaultItemAnimator()); // 設置循環(huán)視圖的動畫效果
rv_grid.addItemDecoration(new SpacesDecoration(1)); // 設置循環(huán)視圖的空白裝飾
}
private void initCombine() {
// 從布局文件中獲取名叫rv_combine的循環(huán)視圖
RecyclerView rv_combine = mView.findViewById(R.id.rv_combine);
// 創(chuàng)建一個四列的網(wǎng)格布局管理器
GridLayoutManager manager = new GridLayoutManager(mActivity, 4);
// 設置網(wǎng)格布局管理器的占位規(guī)則
// 以下占位規(guī)則的意思是：第一項和第二項占兩列，其它項占一列；
// 如果網(wǎng)格的列數(shù)為四，那么第一項和第二項平分第一行，第二行開始每行有四項。
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
if (position == 0 || position == 1) { // 為第一項或者第二項
return 2; // 占據(jù)兩列
} else { // 為其它項
return 1; // 占據(jù)一列
}
}
});
rv_combine.setLayoutManager(manager); // 設置循環(huán)視圖的布局管理器
// 構建一個猜你喜歡的網(wǎng)格適配器
RecyclerCombineAdapter adapter = new RecyclerCombineAdapter(mActivity, NewsInfo.getDefaultCombine());
adapter.setOnItemClickListener(adapter); // 設置網(wǎng)格列表的點擊監(jiān)聽器
adapter.setOnItemLongClickListener(adapter); // 設置網(wǎng)格列表的長按監(jiān)聽器
rv_combine.setAdapter(adapter); // 設置循環(huán)視圖的網(wǎng)格適配器
rv_combine.setItemAnimator(new DefaultItemAnimator()); // 設置循環(huán)視圖的動畫效果
rv_combine.addItemDecoration(new SpacesDecoration(1)); // 設置循環(huán)視圖的空白裝飾
}
private void initPhone() {
// 從布局文件中獲取名叫rv_phone的循環(huán)視圖
RecyclerView rv_phone = mView.findViewById(R.id.rv_phone);
// 創(chuàng)建一個網(wǎng)格布局管理器
GridLayoutManager manager = new GridLayoutManager(mActivity, 3);
rv_phone.setLayoutManager(manager); // 設置循環(huán)視圖的布局管理器
// 構建一個手機列表的循環(huán)適配器
MobileGridAdapter adapter = new MobileGridAdapter(mActivity, GoodsInfo.getDefaultList());
rv_phone.setAdapter(adapter); // 設置循環(huán)視圖的網(wǎng)格適配器
adapter.setOnItemClickListener(adapter); // 設置網(wǎng)格列表的點擊監(jiān)聽器
adapter.setOnItemLongClickListener(adapter); // 設置網(wǎng)格列表的長按監(jiān)聽器
rv_phone.setItemAnimator(new DefaultItemAnimator()); // 設置循環(huán)視圖的動畫效果
rv_phone.addItemDecoration(new SpacesDecoration(1)); // 設置循環(huán)視圖的空白裝飾
}
}
XML文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.viewpager.widget.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioGroup
android:id="@+id/rg_tabbar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_home"
style="@style/TabButton"
android:checked="true"
android:text="首頁"
android:drawableTop="@drawable/tab_first_selector" />
<RadioButton
android:id="@+id/rb_class"
style="@style/TabButton"
android:text="分類"
android:drawableTop="@drawable/tab_second_selector" />
<RadioButton
android:id="@+id/rb_cart"
style="@style/TabButton"
android:text="購物車"
android:drawableTop="@drawable/tab_third_selector" />
</RadioGroup>
</LinearLayout>創(chuàng)作不易 覺得有幫助請點贊關注收藏~~~文章來源地址http://www.zghlxwxcb.cn/news/detail-778944.html
到了這里，關于Android Studio App開發(fā)實戰(zhàn)項目之實現(xiàn)淘寶電商App首頁界面（附源碼，可用于大作業(yè)參考）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
