在看过很多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
<?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
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
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布局
<?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布局
<?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文件
<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配置
<?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>
有了以上6步,相信你也可以打造上下左右都可以有滑动效果的APP了