這篇文章主要介紹了Android如何實現京東首頁效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
本文實例為大家分享了Android實現京東首頁效果的具體代碼，供大家參考，具體內容如下
源碼鏈接
<?xml version="1.0" encoding="utf-8"?> <com.scwang.smart.refresh.layout.SmartRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/refresh_view" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/background_color" app:srlDisableContentWhenRefresh="true" app:srlEnableOverScrollBounce="false" app:srlHeaderMaxDragRate="2" app:srlPrimaryColor="@color/theme_color"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" app:elevation="0dp" app:layout_behavior="com.yuruiyin.appbarlayoutbehavior.AppBarLayoutBehavior"> <com.google.android.material.appbar.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white_color"> <ImageView android:layout_width="match_parent" android:layout_height="180dp" android:scaleType="fitXY" android:visibility="gone" android:src="@drawable/ic_launcher_background" /> <RelativeLayout android:id="@+id/ll_header" android:layout_width="match_parent" android:layout_height="wrap_content" /> </RelativeLayout> <!-- 給SlidingTabLayout占位的--> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="40dp" /> </com.google.android.material.appbar.CollapsingToolbarLayout> <com.flyco.tablayout.SlidingTabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/background_color" app:tl_indicator_height="0dp" app:tl_textBold="SELECT" app:tl_textSelectColor="#f000" app:tl_textUnselectColor="@color/txt_color" app:tl_textsize="16sp" /> </com.google.android.material.appbar.AppBarLayout> <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </androidx.coordinatorlayout.widget.CoordinatorLayout> <RelativeLayout android:id="@+id/ll_fotter" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="50dp" android:layout_alignParentBottom="true"> </RelativeLayout> <RelativeLayout android:id="@+id/rl_float_search" android:layout_width="match_parent" android:layout_height="40dp" android:background="@color/theme_color"> <include layout="@layout/top_view_layout" /> </RelativeLayout> </RelativeLayout> </com.scwang.smart.refresh.layout.SmartRefreshLayout>
package com.example.doublesucktopdemo;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.cardview.widget.CardView;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager.widget.ViewPager;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.example.doublesucktopdemo.adapter.HomeViewPagerAdapter;
import com.example.doublesucktopdemo.adapter.MyBannerAdapter;
import com.example.doublesucktopdemo.adapter.RecommendAdapter;
import com.example.doublesucktopdemo.grid.MyAdapter2;
import com.example.doublesucktopdemo.grid.PagerConfig;
import com.example.doublesucktopdemo.grid.PagerGridLayoutManager;
import com.example.doublesucktopdemo.widget.RecyclerViewDivider;
import com.example.doublesucktopdemo.widget.RefreshHeaderView.TodayNewsHeader;
import com.flyco.tablayout.SlidingTabLayout;
import com.flyco.tablayout.listener.OnTabSelectListener;
import com.google.android.material.appbar.AppBarLayout;
import com.leaf.library.StatusBarUtil;
import com.scwang.smart.refresh.layout.SmartRefreshLayout;
import com.scwang.smart.refresh.layout.api.RefreshLayout;
import com.scwang.smart.refresh.layout.listener.OnRefreshListener;
import com.youth.banner.Banner;
import com.youth.banner.config.IndicatorConfig;
import com.youth.banner.indicator.CircleIndicator;
import java.util.ArrayList;
import java.util.List;
/**
* Created by weioule
* on 2019/6/26.
*/
public class MainActivity extends FragmentActivity implements PagerGridLayoutManager
.PageListener {
private SmartRefreshLayout refreshView;
private AppBarLayout mAppBarLayout;
private RelativeLayout mFloatSearchRl;
///非常重要
private RelativeLayout mHeaderLl;
private RelativeLayout mFotterLl;
CardView mCardView;
private SlidingTabLayout mTabView;
private ViewPager mViewPager;
private int totalScrollRange, oldVerticalOffset = -1;
private HomeViewPagerAdapter fragmentAdapter;
private String[] titles = {"首頁", "手機", "食品", "生鮮", "休閑零食", "家居廚具", "美妝"};
private ArrayList<ProductBean> list = new ArrayList<>();
private List<Fragment> fragmentList;
private int mRows = 1; //設置行數
private int mColumns = 4; //設置列數
private RecyclerView mRecyclerView;
private MyAdapter2 mAdapter;
private PagerGridLayoutManager mLayoutManager;
private RelativeLayout lineParent;
private int mTotal = 0;
private int mCurrent = 0;
private View lineChild;
private ImageView iv_icon_bottom;
private RelativeLayout rl_cancel_bottom;
private String[] names = {"多多果園","九塊九特賣","多多愛消除","天天領現金"
,"行家幫你選","限時秒殺","斷碼清倉","跟著好評買"
,"充值中心","醫藥館","簽到","多多賺大錢"
,"砍價免費拿","多多精靈","省錢月卡","現金大轉盤"
};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
addListener();
}
private void initView() {
// StatusBarUtil.setColor(this, getColor(R.color.theme_color));
refreshView = findViewById(R.id.refresh_view);
mFloatSearchRl = findViewById(R.id.rl_float_search);
mAppBarLayout = findViewById(R.id.app_bar);
mTabView = findViewById(R.id.tab_layout);
mViewPager = findViewById(R.id.view_pager);
mHeaderLl = findViewById(R.id.ll_header);
mFotterLl = findViewById(R.id.ll_fotter);
refreshView.setRefreshHeader(new TodayNewsHeader(this));
addProductBeans();
getData();
}
private void addListener() {
mAppBarLayout.addOnOffsetChangedListener(offsetChangedListener);
refreshView.setOnRefreshListener(new OnRefreshListener() {
@Override
public void onRefresh(@NonNull RefreshLayout refreshLayout) {
loadData();
}
});
}
private void loadData() {
refreshView.postDelayed(new Runnable() {
@Override
public void run() {
refreshView.finishRefresh();
refreshView.setEnabled(true);
}
}, 800);
}
// 這里的處理是當AppBarLayout處于最頂部也就是完全打開狀態verticalOffse=0時才允許刷新控件可用.
private AppBarLayout.OnOffsetChangedListener offsetChangedListener = new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffse) {
totalScrollRange = appBarLayout.getTotalScrollRange();
if (oldVerticalOffset == verticalOffse) return;
if (verticalOffse == 0) {
refreshView.setEnabled(true);
} else {
refreshView.setEnabled(false);
}
if (verticalOffse <= -Utils.dp2px(40)) {
mFloatSearchRl.setVisibility(View.VISIBLE);
} else {
mFloatSearchRl.setVisibility(View.GONE);
}
if (Math.abs(verticalOffse) >= totalScrollRange && totalScrollRange != 0) {
mTabView.setBackgroundColor(getResources().getColor(R.color.white_color));
} else {
mTabView.setBackgroundColor(getResources().getColor(R.color.background_color));
}
oldVerticalOffset = verticalOffse;
}
};
public void getData() {
mHeaderLl.removeAllViews();
mFotterLl.removeAllViews();
addTopView();
addBannerView();
addBannerTab();
addBottom();
// addRecommendView();
// addFeaturedView(); 圖片
initViewpager();
}
private void addBannerTab() {
View mTopView = getLayoutInflater().inflate(R.layout.activity_two, mHeaderLl, false);
lineParent = mTopView.findViewById(R.id.rl_line_parent);
lineChild = mTopView.findViewById(R.id.view_line_child);
mLayoutManager = new PagerGridLayoutManager(mRows, mColumns, PagerGridLayoutManager
.HORIZONTAL);
// 系統帶的 RecyclerView，無需自定義
mRecyclerView =mTopView.findViewById(R.id.recycler_view);
// 水平分頁布局管理器
mLayoutManager.setPageListener(this); // 設置頁面變化監聽器
mRecyclerView.setLayoutManager(mLayoutManager);
// 如果需要查看調試日志可以設置為true，一般情況忽略即可
PagerConfig.setShowLog(true);
initData();
mHeaderLl.addView(mTopView);
}
private void initData() {
List<String> list = new ArrayList<>();
for (int i = 0; i < 16; i++) {
list.add(names[i]);
}
// mAdapter.refreshDataList(list);
// 使用原生的 Adapter 即可
mAdapter = new MyAdapter2(MainActivity.this, list);
mRecyclerView.setAdapter(mAdapter);
}
private void addTopView() {
View mTopView = getLayoutInflater().inflate(R.layout.top_view_layout, mHeaderLl, false);
mHeaderLl.addView(mTopView);
}
private void addBottom() {
View mTopView = getLayoutInflater().inflate(R.layout.bottom_layout, mFotterLl, false);
iv_icon_bottom = mTopView.findViewById(R.id.iv_icon_bottom);
rl_cancel_bottom= mTopView.findViewById(R.id.rl_cancel_bottom);
iv_icon_bottom.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Log.e("TAG","click iv_icon_bottom ");
}
});
rl_cancel_bottom.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Log.e("TAG","click cancel");
}
});
mFotterLl.addView(mTopView);
}
private void addBannerView() {
View mBannerView = getLayoutInflater().inflate(R.layout.banner_layout, mHeaderLl, false);
Banner mBanner = mBannerView.findViewById(R.id.banner);
ArrayList<ProductBean> list = new ArrayList<>();
for (int i = 0; i < 3; i++) {
list.add(new ProductBean("三會一課","2","會議",R.mipmap.ic_launcher));
}
mBanner.addBannerLifecycleObserver(this)
.setAdapter(new MyBannerAdapter(list))
.setIndicator(new CircleIndicator(this))
.setIndicatorGravity(IndicatorConfig.Direction.RIGHT)
.start();
mHeaderLl.addView(mBannerView);
}
private void addRecommendView() {
RecyclerView mRecyclerView = new RecyclerView(this);
GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 6);
mRecyclerView.setLayoutManager(gridLayoutManager);
RecommendAdapter adapter = new RecommendAdapter(list);
adapter.setOnItemChildClickListener(new BaseQuickAdapter.OnItemChildClickListener() {
@Override
public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {
ProductBean productBean = (ProductBean) adapter.getItem(position);
Toast.makeText(MainActivity.this, productBean.getName(), Toast.LENGTH_SHORT).show();
}
});
mRecyclerView.setAdapter(adapter);
RecyclerViewDivider divider = new RecyclerViewDivider.Builder(this)
.setStyle(RecyclerViewDivider.Style.BOTH)
.setColor(0x00000000)
.setOrientation(RecyclerViewDivider.GRIDE_VIW)
.setSize(5)
.build();
mRecyclerView.addItemDecoration(divider);
mHeaderLl.addView(mRecyclerView);
}
private void addFeaturedView() {
View view = getLayoutInflater().inflate(R.layout.featured_layout, mHeaderLl, false);
mHeaderLl.addView(view);
}
private void initViewpager() {
if (fragmentList == null) {
fragmentList = new ArrayList<>();
} else {
fragmentList.clear();
}
for (int i = 0; i < titles.length; i++) {
fragmentList.add(new HomeFragment(list));
}
fragmentAdapter = new HomeViewPagerAdapter(getSupportFragmentManager(), fragmentList);
mViewPager.setAdapter(fragmentAdapter);
mTabView.setOnTabSelectListener(onTabSelectListener);
mViewPager.addOnPageChangeListener(onPageChangeListener);
mTabView.setViewPager(mViewPager, titles);
}
private OnTabSelectListener onTabSelectListener = new OnTabSelectListener() {
@Override
public void onTabSelect(int position) {
mTabView.setCurrentTab(position);
}
@Override
public void onTabReselect(int position) {
}
};
private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mTabView.setCurrentTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
/**
* 控制appbar的滑動
*
* @param isScroll true 允許滑動 false 禁止滑動
*/
private void banAppBarScroll(boolean isScroll) {
View mAppBarChildAt = mAppBarLayout.getChildAt(0);
AppBarLayout.LayoutParams mAppBarParams = (AppBarLayout.LayoutParams) mAppBarChildAt.getLayoutParams();
if (isScroll && mAppBarParams.getScrollFlags() == 0) {
mAppBarParams.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED);
mAppBarChildAt.setLayoutParams(mAppBarParams);
} else if (mAppBarParams.getScrollFlags() != 0)
mAppBarParams.setScrollFlags(0);
}
/**
* 控制appbar的開關
* 需要手動開關時調用
*
* @param open true 打開 false 關閉
*/
public void switchAppbarLayout(boolean open) {
CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams()).getBehavior();
if (behavior instanceof AppBarLayout.Behavior) {
AppBarLayout.Behavior appBarLayoutBehavior = (AppBarLayout.Behavior) behavior;
int topAndBottomOffset = appBarLayoutBehavior.getTopAndBottomOffset();
if (open && topAndBottomOffset != 0) {
//打開
appBarLayoutBehavior.setTopAndBottomOffset(0);
} else if (!open) {
//關閉
if (totalScrollRange == 0) totalScrollRange = mAppBarLayout.getHeight();
appBarLayoutBehavior.setTopAndBottomOffset(-totalScrollRange);
}
}
}
private void addProductBeans() {
for (int i = 0; i < 10; i++) {
list.add(new ProductBean("智慧美食","2","美食",R.mipmap.ic_launcher));
}
}
@Override
public void onPageSizeChanged(int pageSize) {
mTotal = pageSize;
Log.e("TAG", "總頁數 = " + pageSize);
}
@Override
public void onPageSelect(int pageIndex, int pageSize) {
mCurrent = pageIndex;
Log.e("TAG", "選中頁碼 = " + pageIndex + "\t" + pageSize);
//計算滾動條寬度
float proportion = (float) ((pageIndex + 1) / pageSize);
float transMaxRange = lineParent.getWidth() - lineChild.getWidth();
//設置滾動條移動
lineChild.setTranslationX(transMaxRange * proportion);
}
}感謝你能夠認真閱讀完這篇文章，希望小編分享的“Android如何實現京東首頁效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
