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了大笑

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值