Android Tablayout、CoordinatorLayout、AppBarLayout的使用 實現懸停 頁面切換

效果圖：

1.添加依賴app下的build.gradle

implementation 'com.android.support:design:28.0.0'

2.MainActivity：

   private String[] titles = new String[]{"推薦", "物業.生活", "美食.健康", "醫療.養老"};
    private ViewPager viewPager;
    private TabLayout tablayout;
    private LinearLayout ll_tab_bg;
    private Context context = this;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
    }

    private void initData() {
        List<Fragment> fragments = new ArrayList<Fragment>();
        fragments.add(new PropertyFragment());
        fragments.add(new RecommendFragment());
        fragments.add(new DeliciousFoodFragment());
        fragments.add(new MedicalCareFragment());
        viewPager.setAdapter(new TabFragmentAdapter(fragments, titles, getSupportFragmentManager(), context));
        tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                View view = tab.getCustomView();
                if (null == view) {
                    tab.setCustomView(R.layout.tab_layout_text);
                }
                TextView textView = tab.getCustomView().findViewById(android.R.id.text1);
                textView.setTextAppearance(context, R.style.TabLayoutTextSize);
                switch (tab.getPosition()) {
                    case 0:
                        ll_tab_bg.setBackgroundResource(R.drawable.home_navigation4);
                        break;
                    case 1:

                        ll_tab_bg.setBackgroundResource(R.drawable.home_navigation1);
                        break;
                    case 2:
                        ll_tab_bg.setBackgroundResource(R.drawable.home_navigation3);
                        break;
                    case 3:
                        ll_tab_bg.setBackgroundResource(R.drawable.home_navigation2);
                        break;
                    default:
                        break;
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                View view = tab.getCustomView();
                if (null == view) {
                    tab.setCustomView(R.layout.tab_layout_text);
                }
                TextView textView = tab.getCustomView().findViewById(android.R.id.text1);
                textView.setTextAppearance(context, R.style.TabLayoutTextSize_two);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        tablayout.setupWithViewPager(viewPager);
        tablayout.setTabTextColors(getResources().getColor(R.color.dark_white), Color.WHITE);
    }

    private void initView() {
        viewPager = findViewById(R.id.viewPager);
        tablayout = findViewById(R.id.tablayout);
        ll_tab_bg = findViewById(R.id.ll_tab_bg);
    }

xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/ll_tab_bg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_navigation_1"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            app:tabBackground="@color/transparent"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabMode="scrollable"
            app:tabRippleColor="@color/transparent" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="8dp"
            android:src="@drawable/home_page_more" />
    </LinearLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:overScrollMode="never" />
</LinearLayout>

 3.PropertyFragment:

  public TabLayout mTabLayout;
    private ViewPager mViewPager;
    private List<Fragment> fragmentList = new ArrayList<>();

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_recommend1, container, false);
        initViewFbi(view);
        initData();
        return view;
    }

    private void initViewFbi(View view) {
        mTabLayout = view.findViewById(R.id.tablayout);
        mViewPager = view.findViewById(R.id.viewpager);
    }

    public void initData() {
        fragmentList.clear();
        fragmentList.add(new PropertyStewardFragment());
        fragmentList.add(new ButlerServiceFragment());
        OrderViewPagerAdapter viewPagerAdapter = new OrderViewPagerAdapter(getChildFragmentManager(), fragmentList);
        mViewPager.setAdapter(viewPagerAdapter);
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        mTabLayout.addTab(mTabLayout.newTab().setText("物業服務"));
        mTabLayout.addTab(mTabLayout.newTab().setText("生活服務"));
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.getTabAt(0).setText("物業服務");
        mTabLayout.getTabAt(1).setText("生活服務");
    }

 fragment_recommend1:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#fff"
                android:orientation="vertical"
                app:layout_scrollFlags="scroll">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="10dp"
                        android:scaleType="fitXY"
                        android:src="@drawable/home_wuye" />
                </LinearLayout>

            </LinearLayout>

            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#fff"
                app:tabBackground="@color/transparent"
                app:tabIndicatorColor="#07D97F"
                app:tabIndicatorFullWidth="false"
                app:tabMode="scrollable"
                app:tabRippleColor="@color/transparent"
                app:tabSelectedTextColor="#333"
                app:tabTextColor="#333" />
        </android.support.design.widget.AppBarLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

 4.RecommendFragment:

public class RecommendFragment extends Fragment {
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_recommend, container, false);
        return view;
    }
}

 fragment_recommend:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fadingEdge="none"
        android:overScrollMode="never">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#e52"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:src="@drawable/home_tuijian" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1000dp"
                android:background="#fff" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</LinearLayout>

 5.剩下的Fragment和RecommendFragment的寫法一樣   PropertyStewardFragment和ButlerServiceFragment也一樣

6.bg_navigation_1-4.xml

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="#00DE7B"
        android:startColor="#00C7B4" />
</shape>


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="#15C2D0"
        android:startColor="#76BDEA" />
</shape>


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="#F34630"
        android:startColor="#FDB962" />
</shape>


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="#F34630"
        android:startColor="#FD627E" />
</shape>

color.xml:

<color name="transparent">#00000000</color>
<color name="dark_white">#99ffffff</color>

styles.xml:

   <style name="TabLayoutTextSize_two">
        <item name="android:textSize">16sp</item>
        <item name="android:textStyle">normal</item>
    </style>
    <style name="TabLayoutTextSize">
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">18sp</item>
    </style>

 這裏包含幾個圖片就不傳了 （home_meishi.png
home_navigation1.png
home_navigation2.png
home_navigation4.png
home_page_more.png
home_navigation3.png
home_tuijian.png
home_wuye.png
home_yiliao.png）