Android如何實現京東首頁效果

這篇文章主要介紹了Android如何實現京東首頁效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

本文實例為大家分享了Android實現京東首頁效果的具體代碼，供大家參考，具體內容如下

1.效果圖：

2.布局

源碼鏈接

<?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>

3.功能

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如何實現京東首頁效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!