CoordinatorLayout+AppBarLayout+RecyclerView+ViewPager打造可上下左右滑动的App主框架-CSDN博客

71:CoordinatorLayout+AppBarLayout+RecyclerView+ViewPager打造可上下左右滑动的App主框架

标签： CoordinatorLayout AppBarLayout RecyclerView ViewPager 上下左右滑动

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

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

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

第一步：引入V7的支持库

build.gradle里面引入

[html]view plaincopy 
    
 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

[html]view plaincopy 
    
 <?xml version="1.0" encoding="utf-8"?>  
 <android.support.design.widget.CoordinatorLayout  
     android:id="@+id/main_content"  
     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.support.design.widget.AppBarLayout  
         android:id="@+id/appbar"  
         android:layout_width="match_parent"  
         android:layout_height="wrap_content"  
         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">  
   
         <LinearLayout  
             android:id="@+id/toolbar"  
             android:layout_width="match_parent"  
             android:layout_height="100dp"  
             android:background="#123456"  
             app:layout_scrollFlags="scroll|enterAlways"  
             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  
             android:gravity="center_vertical"  
             android:orientation="vertical">  
             <TextView  
                 android:layout_width="wrap_content"  
                 android:layout_height="wrap_content"  
                 android:text="the best app"/>  
             </LinearLayout>  
   
         <android.support.design.widget.TabLayout  
             android:id="@+id/tabs"  
             android:layout_width="match_parent"  
             android:layout_height="40dp"  
             android:background="#810e88"/>  
   
     </android.support.design.widget.AppBarLayout>  
     <android.support.v4.view.ViewPager  
         android:id="@+id/vp_body"  
         android:layout_width="match_parent"  
         android:layout_height="match_parent"  
         app:layout_behavior="@string/appbar_scrolling_view_behavior">  
   
     </android.support.v4.view.ViewPager>  
   
 </android.support.design.widget.CoordinatorLayout>  

第三步：编写MainActivity.java

[java]view plaincopy 
    
 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<Fragment> fragmentsList;  
     private int currIndex;  
     List<String> 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<Fragment>();  
             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<Fragment> mFragmentsList;  
   
         public TabFragmentPagerAdapter(FragmentManager fm) {  
             super(fm);  
         }  
   
         public TabFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> 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

[java]view plaincopy 
    
 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<RecyclerViewAdapter.ViewHolder> {  
   
         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布局

[html]view plaincopy 
    
 <?xml version="1.0" encoding="utf-8"?>  
 <android.support.v7.widget.RecyclerView  
     xmlns:android="http://schemas.android.com/apk/res/android"  
     android:id="@+id/rv_activity"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent" />  

fragment_activity.xml布局

[html]view plaincopy 
    
 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:orientation="vertical" android:layout_width="match_parent"  
     android:layout_height="match_parent">  
   
     <TextView  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:text="Activity"  
         android:id="@+id/textView"  
         android:layout_gravity="center_horizontal" />  
 </LinearLayout>  

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

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

[html]view plaincopy 
    
 <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">  
     </style>  
   
     <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">  
         <item name="colorPrimary">#0fb73d</item>  
         <item name="colorPrimaryDark">#0ba823</item>  
         <item name="colorAccent">#FF4081</item>  
         <item name="android:windowBackground">@color/window_background</item>  
     </style>  

第六步：AndroidManifest.xml配置

[html]view plaincopy 
    
 <?xml version="1.0" encoding="utf-8"?>  
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
     package="com.figo.study" >  
   
     <application  
         android:allowBackup="true"  
         android:icon="@mipmap/ic_launcher"  
         android:label="@string/app_name"  
         android:theme="@style/Theme.DesignDemo">  
         <activity  
             android:name=".MainActivity"  
             android:label="@string/app_name" >  
             <intent-filter>  
                 <action android:name="android.intent.action.MAIN" />  
   
                 <category android:name="android.intent.category.LAUNCHER" />  
             </intent-filter>  
         </activity>  
     </application>  
   
 </manifest>  