Android自定义多TAB悬浮控件实现蘑菇街首页效果

原文：http://www.cnblogs.com/ImyFen/archive/2015/11/15/4967127.html

说明：

1.viewpager不能左右滑动；
2.转载时代码略有改动（注：修复tab控件不能自动滑动的问题）；
3.原代码下载后不能直接运行，经过调整此问题已经修复。

修复后代码下载：https://github.com/jdsjlzx/MoGuJie

核心代码：

package com.Imy.Fuli.Fragment;

import android.os.Bundle;
import android.os.SystemClock;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RadioGroup;
import android.widget.TextView;

import com.Imy.Fuli.Activity.HomeActivity;
import com.Imy.Fuli.Adapter.HomeFragmentViewPagerAdapter;
import com.Imy.Fuli.R;
import com.Imy.Fuli.View.FragmentViewPager;
import com.Imy.Fuli.View.HorizontalListView;
import com.Imy.Fuli.View.LoadingPage;
import com.Imy.Fuli.View.SuspendScrollView;
import com.Imy.Fuli.common.Constant;
import com.Imy.Fuli.manager.ThreadManager;
import com.Imy.Fuli.tools.LogUtils;
import com.Imy.Fuli.tools.UiUtils;

/**
 * Created by user on 2015/11/9.
 */
public class HomeFragment extends BaseFragment {

    private FragmentViewPager mViewPager;

    private TextView mTextView;
    private LinearLayout mLinearLayout;
    private static boolean isInit = false;
    private HomeActivity mHomeActivity;
    private RadioGroup mRadioGroup;
    private LinearLayout linearLayout;
    private boolean isMeasured = false;
    private SuspendScrollView mSuspendScrollView;
    private LinearLayout RefreshHeadView;
    private HorizontalListView mHorizontalListView;
    private HorizontalListView mSupListView;
    private ImageView imageView;
    private LinearLayout mScrollContainer;

    /**
     * 当Fragment挂载的activity创建的时候调用
     *
     * @param savedInstanceState
     */
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        show(); //为了使第一次加载HomeFragment的时候可以正常显示 执行以下shouw方法.

    }

    @Override
    public void onPause() {
        super.onPause();
        isInit = true;
    }

    @Override
    public View createSuccessView() {
        View view = View.inflate(getContext(), R.layout.home_fragment_context, null);
        mScrollContainer = (LinearLayout) view.findViewById(R.id.scrollview_container);
        mLinearLayout = (LinearLayout) view.findViewById(R.id.home_banner_header);//广告头的总布局;
        mViewPager = (FragmentViewPager) view.findViewById(R.id.home_viewpager);
        mHorizontalListView = (HorizontalListView) view.findViewById(R.id.user); //非悬浮导航
        mSupListView = (HorizontalListView) view.findViewById(R.id.Sup); //悬浮导航
        Constant.MY_INDICATOR = mSupListView;
        imageView = (ImageView) view.findViewById(R.id.myimage);
        mHorizontalListView.setAdapter(new OrderAdapter(getContext()));
        mSupListView.setAdapter(new OrderAdapter(getContext()));
        RefreshHeadView = (LinearLayout) view.findViewById(R.id.scrollView_refresh_head);
        mSuspendScrollView = (SuspendScrollView) view.findViewById(R.id.home_scrollview);
        //接受参数
        mSuspendScrollView.setView(mLinearLayout, mSupListView, RefreshHeadView, mHorizontalListView,mScrollContainer);
        mSuspendScrollView.setOnRefreshScrollViewListener(new SuspendScrollView.OnRefreshScrollViewListener() {
            @Override
            public void onRefresh() {
                UiUtils.showToast("下啦刷新中");
                //请求数据操作 子线程操作
                ThreadManager.getInstance().createLongPool().execute(new Runnable() {
                    @Override
                    public void run() {
                        SystemClock.sleep(1000);//模拟请求数据
                        mSuspendScrollView.completeRefresh();


                    }
                });
            }

            /**
             * 刷新完成时需要的操作  更新UI等
             */
            @Override
            public void onRefreshFinish() {
                UiUtils.showToast("刷新完成");
            }
        });
        mViewPager.setAdapter(new HomeFragmentViewPagerAdapter(getActivity().getSupportFragmentManager()));
        mViewPager.setOffscreenPageLimit(2);//设置预加载 防止切换时状态丢失
        setViewpagerHeight(mViewPager);
        initIndicator();

        mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                ((OrderAdapter)mHorizontalListView.getAdapter()).setCurOrderItem(position);
            }

        });

        return view;
    }


    private void initIndicator() {
        mLinearLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (!isInit) {
                    int top = mHorizontalListView.getTop();
                    int height = mHorizontalListView.getHeight();
                    //mSupListView.layout(0, top, mSupListView.getWidth(), top + height);
                }
            }
        });
    }


    private void setViewpagerHeight(final ViewPager mViewPager) {
        mHomeActivity = (HomeActivity) getActivity();
        mRadioGroup = mHomeActivity.getRadioGroup();
        linearLayout = mHomeActivity.getHomeActivityLinearLayout();
        linearLayout.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                if (!isMeasured) {
                    int height = linearLayout.getHeight() - mRadioGroup.getHeight() - mHorizontalListView.getHeight();
                    LinearLayout.LayoutParams llparams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                            height);
                    mViewPager.setLayoutParams(llparams);
                    LogUtils.w("是---------------------dp=" + UiUtils.px2dip(imageView.getHeight()));
                    isMeasured = true;
                }
                return true;
            }
        });

    }

    @Override
    protected LoadingPage.LoadResult load() {
        return LoadingPage.LoadResult.success;
    }

}

---

类似实现：

1.高仿蘑菇街首页

演示地址：http://v.youku.com/v_show/id_XMTQ3NjM3MTkwNA==.html

代码：https://github.com/jjq3/MoguLayout

2.CollapsingToolbarLayout实现

效果图：
很遗憾的是图片太大超过2M，超过csdn图片大小限制，自己打开链接看吧！

https://github.com/sungerk/CoordinatorLayoutDemos/raw/master/art/5.gif

这个库里面还有很多CollapsingToolbarLayout控件的UI效果，有需要的可以参考。

代码：https://github.com/sungerk/CoordinatorLayoutDemos