android开发步步为营之71:CoordinatorLayout+AppBarLayout+RecyclerView+ViewPager打造可上下左右滑动的App主框架

       在看过很多app之后，你会发现现在很多的app的主框架是可以上下左右滑动，左右滑动，我们自然会想到用viewpager，但是上下可以滑动，而且顶部广告或者背景划上去之后，还需要保留tab标签用什么来实现？查阅过很多资料，最终发现sdk里面android support v7有CoordinatorLayout+AppBarLayout+RecyclerView，两个组件组合可以支持上下滑动效果，另外CoordinatorLayout+AppBarLayout+NestedScrollView也可以实现上下滑动效果，但是经试验证明，NestedScrollView需要本身可以滑动，也就是里面的数据超过满屏需要滑动，才能将AppBarLayout划上去。

        先给出效果图，不好意思，不知道怎么弄动态图，给出两张静态效果图。

       

         OK，现在我们来实现这个功能，这里给出主要的步骤。

         第一步：引入V7的支持库

         build.gradle里面引入

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
}

         第二步：设计主页面activity_main.xml

        第三步：编写MainActivity.java

package com.figo.study;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import com.figo.study.fragment.ActivityFragment;
import com.figo.study.fragment.ExchangeFragment;
import com.figo.study.fragment.MeFragment;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity {
    private ViewPager mVpBody;
    ArrayList fragmentsList;
    private int currIndex;
    List titles;

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

    private void initViewPager() {
        try {
            TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabs);
            titles = new ArrayList<>();
            titles.add("Exchange");
            titles.add("Activity");
            titles.add("Me");

            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(0)));
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(1)));
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(2)));

            mTabLayout.setTabTextColors(getResources().getColor(R.color.white), getResources().getColor(R.color.selected));

            mVpBody = (ViewPager) findViewById(R.id.vp_body);
            fragmentsList = new ArrayList();
            Bundle bundle = new Bundle();
            Fragment exchangeFragment = ExchangeFragment.newInstance(
                    MainActivity.this, bundle);
            Fragment activityFragment = ActivityFragment.newInstance(
                    MainActivity.this, bundle);
            Fragment meFragment = MeFragment.newInstance(
                    MainActivity.this, bundle);


            fragmentsList.add(exchangeFragment);
            fragmentsList.add(activityFragment);
            fragmentsList.add(meFragment);
            TabFragmentPagerAdapter tabFragmentPagerAdapter = new TabFragmentPagerAdapter(
                    getSupportFragmentManager(), fragmentsList);
            mVpBody.setAdapter(new TabFragmentPagerAdapter(
                    getSupportFragmentManager(), fragmentsList));
            mVpBody.setCurrentItem(0);
            mVpBody.setOnPageChangeListener(new MyOnPageChangeListener());


            mTabLayout.setupWithViewPager(mVpBody);
            mTabLayout.setTabsFromPagerAdapter(tabFragmentPagerAdapter);

        } catch (Exception e) {
            Log.e("initViewPager", "initViewPager", e);
        }

    }

    public class TabFragmentPagerAdapter extends FragmentPagerAdapter {
        ArrayList mFragmentsList;

        public TabFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        public TabFragmentPagerAdapter(FragmentManager fm, ArrayList fragmentsList) {
            super(fm);
            mFragmentsList = fragmentsList;
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentsList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentsList.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return titles.get(position);
        }
    }

    public class TabOnClickListener implements View.OnClickListener {
        private int index = 0;

        public TabOnClickListener(int i) {
            index = i;
        }

        @Override
        public void onClick(View v) {
            mVpBody.setCurrentItem(index);
        }
    }

    ;

    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageSelected(int arg0) {

            switch (arg0) {
                case 0:


                    break;
                case 1:

                    break;
                case 2:

                    break;

            }
            currIndex = arg0;

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }
}

         第四步：编写fragment,这里给出其中一个ActivityFragment.java

package com.figo.study.fragment;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.figo.study.R;

/**
 * Activity
 */
public class ActivityFragment extends android.support.v4.app.Fragment {
    public static ActivityFragment newInstance(Context context,Bundle bundle) {
        ActivityFragment newFragment = new ActivityFragment();
        newFragment.setArguments(bundle);
        return newFragment;

    }

    private RecyclerView mRecyclerView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        mRecyclerView =
                (RecyclerView) inflater.inflate(R.layout.fragment_activity_new, container, false);
        return mRecyclerView;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(mRecyclerView.getContext()));
        mRecyclerView.setAdapter(new RecyclerViewAdapter(getActivity()));
    }




    public class RecyclerViewAdapter extends RecyclerView.Adapter {

        private Context mContext;

        public RecyclerViewAdapter(Context mContext) {
            this.mContext = mContext;
        }

        @Override
        public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view =
                    LayoutInflater.from(parent.getContext()).inflate(R.layout.fragment_activity, parent, false);
            return new ViewHolder(view);
        }

        @TargetApi(Build.VERSION_CODES.LOLLIPOP)
        @Override
        public void onBindViewHolder(final RecyclerViewAdapter.ViewHolder holder, int position) {
            final View view = holder.mView;

        }

        @Override
        public int getItemCount() {
            return 1;
        }

        public  class ViewHolder extends RecyclerView.ViewHolder {
            public final View mView;

            public ViewHolder(View view) {
                super(view);
                mView = view;
            }
        }
    }

}

         可以看到真正的fragment布局其实是当做recylerview的一项了。

         fragment_activity_new.xml布局

        fragment_activity.xml布局

        注意一点，fragment_activity.xml里面如有listview的话，listitem的布局必须是LinearLayout，而且必须计算listview的高度，不然上下滑动的效果不管用的。

     

      第五步：相关的样式设计style.xml文件

       第六步：AndroidManifest.xml配置

         有了以上6步,相信你也可以打造上下左右都可以有滑动效果的APP了