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

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

标签： CoordinatorLayoutAppBarLayoutRecyclerViewViewPager上下左右滑动

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

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

       

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

         第一步：引入V7的支持库

         build.gradle里面引入

[html]  view plain  copy

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

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

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <android.support.design.widget.CoordinatorLayout  
3.     android:id="@+id/main_content"  
4.     xmlns:android="http://schemas.android.com/apk/res/android"  
5.     xmlns:app="http://schemas.android.com/apk/res-auto"  
6.     android:layout_width="match_parent"  
7.     android:layout_height="match_parent">  
8.   
9.     <android.support.design.widget.AppBarLayout  
10.         android:id="@+id/appbar"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">  
14.   
15.         <LinearLayout  
16.             android:id="@+id/toolbar"  
17.             android:layout_width="match_parent"  
18.             android:layout_height="100dp"  
19.             android:background="#123456"  
20.             app:layout_scrollFlags="scroll|enterAlways"  
21.             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  
22.             android:gravity="center_vertical"  
23.             android:orientation="vertical">  
24.             <TextView  
25.                 android:layout_width="wrap_content"  
26.                 android:layout_height="wrap_content"  
27.                 android:text="the best app"/>  
28.             </LinearLayout>  
29.   
30.         <android.support.design.widget.TabLayout  
31.             android:id="@+id/tabs"  
32.             android:layout_width="match_parent"  
33.             android:layout_height="40dp"  
34.             android:background="#810e88"/>  
35.   
36.     </android.support.design.widget.AppBarLayout>  
37.     <android.support.v4.view.ViewPager  
38.         android:id="@+id/vp_body"  
39.         android:layout_width="match_parent"  
40.         android:layout_height="match_parent"  
41.         app:layout_behavior="@string/appbar_scrolling_view_behavior">  
42.   
43.     </android.support.v4.view.ViewPager>  
44.   
45. </android.support.design.widget.CoordinatorLayout>  

         第三步：编写MainActivity.java

[java]  view plain  copy

1. package com.figo.study;  
2.   
3. import android.os.Bundle;  
4. import android.support.design.widget.TabLayout;  
5. import android.support.v4.app.Fragment;  
6. import android.support.v4.app.FragmentActivity;  
7. import android.support.v4.app.FragmentManager;  
8. import android.support.v4.app.FragmentPagerAdapter;  
9. import android.support.v4.view.ViewPager;  
10. import android.util.Log;  
11. import android.view.View;  
12. import com.figo.study.fragment.ActivityFragment;  
13. import com.figo.study.fragment.ExchangeFragment;  
14. import com.figo.study.fragment.MeFragment;  
15. import java.util.ArrayList;  
16. import java.util.List;  
17.   
18. public class MainActivity extends FragmentActivity {  
19.     private ViewPager mVpBody;  
20.     ArrayList<Fragment> fragmentsList;  
21.     private int currIndex;  
22.     List<String> titles;  
23.   
24.     @Override  
25.     protected void onCreate(Bundle savedInstanceState) {  
26.         super.onCreate(savedInstanceState);  
27.         setContentView(R.layout.activity_main);  
28.         initViewPager();  
29.     }  
30.   
31.     private void initViewPager() {  
32.         try {  
33.             TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabs);  
34.             titles = new ArrayList<>();  
35.             titles.add("Exchange");  
36.             titles.add("Activity");  
37.             titles.add("Me");  
38.   
39.             mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(0)));  
40.             mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(1)));  
41.             mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(2)));  
42.   
43.             mTabLayout.setTabTextColors(getResources().getColor(R.color.white), getResources().getColor(R.color.selected));  
44.   
45.             mVpBody = (ViewPager) findViewById(R.id.vp_body);  
46.             fragmentsList = new ArrayList<Fragment>();  
47.             Bundle bundle = new Bundle();  
48.             Fragment exchangeFragment = ExchangeFragment.newInstance(  
49.                     MainActivity.this, bundle);  
50.             Fragment activityFragment = ActivityFragment.newInstance(  
51.                     MainActivity.this, bundle);  
52.             Fragment meFragment = MeFragment.newInstance(  
53.                     MainActivity.this, bundle);  
54.   
55.   
56.             fragmentsList.add(exchangeFragment);  
57.             fragmentsList.add(activityFragment);  
58.             fragmentsList.add(meFragment);  
59.             TabFragmentPagerAdapter tabFragmentPagerAdapter = new TabFragmentPagerAdapter(  
60.                     getSupportFragmentManager(), fragmentsList);  
61.             mVpBody.setAdapter(new TabFragmentPagerAdapter(  
62.                     getSupportFragmentManager(), fragmentsList));  
63.             mVpBody.setCurrentItem(0);  
64.             mVpBody.setOnPageChangeListener(new MyOnPageChangeListener());  
65.   
66.   
67.             mTabLayout.setupWithViewPager(mVpBody);  
68.             mTabLayout.setTabsFromPagerAdapter(tabFragmentPagerAdapter);  
69.   
70.         } catch (Exception e) {  
71.             Log.e("initViewPager", "initViewPager", e);  
72.         }  
73.   
74.     }  
75.   
76.     public class TabFragmentPagerAdapter extends FragmentPagerAdapter {  
77.         ArrayList<Fragment> mFragmentsList;  
78.   
79.         public TabFragmentPagerAdapter(FragmentManager fm) {  
80.             super(fm);  
81.         }  
82.   
83.         public TabFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragmentsList) {  
84.             super(fm);  
85.             mFragmentsList = fragmentsList;  
86.         }  
87.   
88.         @Override  
89.         public Fragment getItem(int position) {  
90.             return mFragmentsList.get(position);  
91.         }  
92.   
93.         @Override  
94.         public int getCount() {  
95.             return mFragmentsList.size();  
96.         }  
97.   
98.         @Override  
99.         public CharSequence getPageTitle(int position) {  
100.             return titles.get(position);  
101.         }  
102.     }  
103.   
104.     public class TabOnClickListener implements View.OnClickListener {  
105.         private int index = 0;  
106.   
107.         public TabOnClickListener(int i) {  
108.             index = i;  
109.         }  
110.   
111.         @Override  
112.         public void onClick(View v) {  
113.             mVpBody.setCurrentItem(index);  
114.         }  
115.     }  
116.   
117.     ;  
118.   
119.     public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {  
120.   
121.         @Override  
122.         public void onPageSelected(int arg0) {  
123.   
124.             switch (arg0) {  
125.                 case 0:  
126.   
127.   
128.                     break;  
129.                 case 1:  
130.   
131.                     break;  
132.                 case 2:  
133.   
134.                     break;  
135.   
136.             }  
137.             currIndex = arg0;  
138.   
139.         }  
140.   
141.         @Override  
142.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
143.         }  
144.   
145.         @Override  
146.         public void onPageScrollStateChanged(int arg0) {  
147.         }  
148.     }  
149. }  

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

[java]  view plain  copy

1. package com.figo.study.fragment;  
2.   
3. import android.animation.Animator;  
4. import android.animation.AnimatorListenerAdapter;  
5. import android.animation.ObjectAnimator;  
6. import android.annotation.TargetApi;  
7. import android.content.Context;  
8. import android.content.Intent;  
9. import android.os.Build;  
10. import android.os.Bundle;  
11. import android.support.annotation.Nullable;  
12. import android.support.v7.widget.LinearLayoutManager;  
13. import android.support.v7.widget.RecyclerView;  
14. import android.view.LayoutInflater;  
15. import android.view.View;  
16. import android.view.ViewGroup;  
17.   
18. import com.figo.study.R;  
19.   
20. /** 
21.  * Activity 
22.  */  
23. public class ActivityFragment extends android.support.v4.app.Fragment {  
24.     public static ActivityFragment newInstance(Context context,Bundle bundle) {  
25.         ActivityFragment newFragment = new ActivityFragment();  
26.         newFragment.setArguments(bundle);  
27.         return newFragment;  
28.   
29.     }  
30.   
31.     private RecyclerView mRecyclerView;  
32.   
33.     @Override  
34.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
35.         mRecyclerView =  
36.                 (RecyclerView) inflater.inflate(R.layout.fragment_activity_new, container, false);  
37.         return mRecyclerView;  
38.     }  
39.   
40.     @Override  
41.     public void onActivityCreated(Bundle savedInstanceState) {  
42.         super.onActivityCreated(savedInstanceState);  
43.         mRecyclerView.setLayoutManager(new LinearLayoutManager(mRecyclerView.getContext()));  
44.         mRecyclerView.setAdapter(new RecyclerViewAdapter(getActivity()));  
45.     }  
46.   
47.   
48.   
49.   
50.     public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {  
51.   
52.         private Context mContext;  
53.   
54.         public RecyclerViewAdapter(Context mContext) {  
55.             this.mContext = mContext;  
56.         }  
57.   
58.         @Override  
59.         public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
60.             View view =  
61.                     LayoutInflater.from(parent.getContext()).inflate(R.layout.fragment_activity, parent, false);  
62.             return new ViewHolder(view);  
63.         }  
64.   
65.         @TargetApi(Build.VERSION_CODES.LOLLIPOP)  
66.         @Override  
67.         public void onBindViewHolder(final RecyclerViewAdapter.ViewHolder holder, int position) {  
68.             final View view = holder.mView;  
69.   
70.         }  
71.   
72.         @Override  
73.         public int getItemCount() {  
74.             return 1;  
75.         }  
76.   
77.         public  class ViewHolder extends RecyclerView.ViewHolder {  
78.             public final View mView;  
79.   
80.             public ViewHolder(View view) {  
81.                 super(view);  
82.                 mView = view;  
83.             }  
84.         }  
85.     }  
86.   
87. }  

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

         fragment_activity_new.xml布局

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <android.support.v7.widget.RecyclerView  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:id="@+id/rv_activity"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent" />  

        fragment_activity.xml布局

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical" android:layout_width="match_parent"  
4.     android:layout_height="match_parent">  
5.   
6.     <TextView  
7.         android:layout_width="wrap_content"  
8.         android:layout_height="wrap_content"  
9.         android:text="Activity"  
10.         android:id="@+id/textView"  
11.         android:layout_gravity="center_horizontal" />  
12. </LinearLayout>  

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

     

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

[html]  view plain  copy

1. <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">  
2.     </style>  
3.   
4.     <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">  
5.         <item name="colorPrimary">#0fb73d</item>  
6.         <item name="colorPrimaryDark">#0ba823</item>  
7.         <item name="colorAccent">#FF4081</item>  
8.         <item name="android:windowBackground">@color/window_background</item>  
9.     </style>  

        第六步：AndroidManifest.xml配置

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
3.     package="com.figo.study" >  
4.   
5.     <application  
6.         android:allowBackup="true"  
7.         android:icon="@mipmap/ic_launcher"  
8.         android:label="@string/app_name"  
9.         android:theme="@style/Theme.DesignDemo">  
10.         <activity  
11.             android:name=".MainActivity"  
12.             android:label="@string/app_name" >  
13.             <intent-filter>  
14.                 <action android:name="android.intent.action.MAIN" />  
15.   
16.                 <category android:name="android.intent.category.LAUNCHER" />  
17.             </intent-filter>  
18.         </activity>  
19.     </application>  
20.   
21. </manifest>  

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