Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)

使用ViewPager，PagerSlidingTabStrip，SwipeRefreshLayout打造一款可以点击可以侧滑的顶部导航栏。

先简单介绍一下所用的两个个开源库。

PagerSlidingTabStrip

Github地址

用法：

1.向app Module中的build.gradle中添加依赖

dependencies {
compile 'com.astuetz:pagerslidingtabstrip:1.0.1'
} 

2.把PagerSlidingTabStrip这个控件添加到你的布局中，它通常会放在ViewPager的上面

<com.astuetz.PagerSlidingTabStrip
  android:id="@+id/tabs"
  android:layout_width="match_parent"
  android:layout_height="48dip" /> 

3.在你的onCreate()方法中(或者是在Fragment里面的onCreateView()方法中)，把PagerSlidingTabStrip跟ViewPager绑定在一起

// Initialize the ViewPager and set an adapter
 ViewPager pager = (ViewPager) findViewById(R.id.pager);
 pager.setAdapter(new TestAdapter(getSupportFragmentManager()));
 // Bind the tabs to the ViewPager
 PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
 tabs.setViewPager(pager); 

4.如果你要设置PagerChange监听的话

// continued from above
tabs.setOnPageChangeListener(mPageChangeListener); 

至于它里面的其他很多方法我在这里就不多讲了，需要了解的同学可以去看下Github。

SwipeRefreshLayout

SwipeRefreshLayout是谷歌官方出的一款下拉刷新的控件，只支持下拉刷新，并不支持上拉加载，当然，Github里面也有人基于这个控件写了上拉加载的开源框架，嘻嘻，下一篇给你们介绍。

用法：

1.在xml文件中添加Android.support.v4.widget.SwipeRefreshLayout

<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/refresh_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <ListView
    android:id="@+id/lv"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout> 

2.下拉时若需要出发事件，需实现SwipeRefreshLayout.OnRefreshListener，重写onRefresh()方法。

仿豆瓣实现滑动效果

首先我们先看到MainActivity.class

package com.example.dragonhaw.doubandemo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;
import com.astuetz.PagerSlidingTabStrip;
import com.example.dragonhaw.doubandemo.fragment.PagerFragment;
import com.example.dragonhaw.doubandemo.fragment.RefreshFragment;
/**
 * Created by dragonhaw at 9/13/2016
 */
public class MainActivity extends AppCompatActivity {
  /**
   * Page的数量
   */
  private static final int PAGER_NUM = 4;
  /**
   * PagerSlidingTabStrip的对象
   */
  private PagerSlidingTabStrip pagerSlidingTabStrip;
  /**
   * ViewPager的对象
   */
  private ViewPager viewPager;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //隐藏ActionBar，此方法必须写在setContentView的前面，因为必须在contentView未加载之前将其去掉
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    initView();
  }
  /**
   * 初始化View
   */
  private void initView() {
    pagerSlidingTabStrip = (PagerSlidingTabStrip) findViewById(R.id.pager_tabs);
    viewPager = (ViewPager) findViewById(R.id.pager);
    //设置ViewPager每次预加载3个pager，也就是除当前pager外另外加载了三个pager，默认为1
    viewPager.setOffscreenPageLimit(3);
    viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));
    pagerSlidingTabStrip.setViewPager(viewPager);
  }
  public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private String[] Titles = new String[]{
        "豆瓣", "发现", "讨论", "我的"
    };
    public MyFragmentPagerAdapter(FragmentManager fm) {
      super(fm);
    }
    /**
     * 回调此方法得到Title内容
     */
    @Override
    public CharSequence getPageTitle(int position) {
      return Titles[position];
    }
    /**
     * 回调此方法得到Fragment，这里使用Bundle是为了给PagerFragment里面的TextView传入数据
     */
    @Override
    public Fragment getItem(int position) {
      Bundle bundle = new Bundle();
      Fragment pagerFragment;
      if (position == 0) {
        pagerFragment = new RefreshFragment();
      } else {
        pagerFragment = new PagerFragment();
      }
      bundle.putInt("pager_num", position);
      pagerFragment.setArguments(bundle);
      return pagerFragment;
    }
    /**
     * 回调此方法得到Pager的个数
     */
    @Override
    public int getCount() {
      return PAGER_NUM;
    }
  }
} 

整个MainActivity应该没什么好说的吧，难理解的地方我都注释了。然后我们写Fragment，在这里我们写两个Fragment，第一个Fragment也就是首页，要实现ListView跟下拉刷新的那个Fragment，RefreshFragment.class代码如下：

package com.example.dragonhaw.doubandemo.fragment;
 import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.Fragment;
import android.support.v4.widget.SwipeRefreshLayout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import com.example.dragonhaw.doubandemo.R;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by dragonhaw on 2016/9/13.
 */
public class RefreshFragment extends Fragment implements SwipeRefreshLayout.OnRefreshListener{
  private SwipeRefreshLayout swipeRefreshLayout;
  private ListView listView;
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view =inflater.inflate(R.layout.fragment_refresh, container, false);
    swipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.refresh_layout);
    swipeRefreshLayout.setOnRefreshListener(this);
    //为下拉刷新的设置四种颜色
    swipeRefreshLayout.setColorSchemeResources(
        android.R.color.holo_blue_light,
        android.R.color.holo_green_light,
        android.R.color.holo_green_light,
        android.R.color.holo_orange_light
    );
    listView = (ListView) view.findViewById(R.id.lv);
    listView.setAdapter(new ArrayAdapter<String >(getActivity(), android.R.layout.simple_list_item_1,getData()));
    return view;
  }
  @Override
  public void onRefresh() {
    swipeRefreshLayout.setRefreshing(true);
    new Handler().postDelayed(new Runnable() {
      @Override
      public void run() {
        swipeRefreshLayout.setRefreshing(false);
      }
    }, 3000);
  }
  public List<String> getData() {
    List<String> data = new ArrayList<>();
    for (int i = 0; i < 30; i++) {
      data.add("数据" + i);
    }
    return data;
  }
} 

SwipeRefreshLayout的setColorSchemeResources()方法，是给下拉刷新的那个圆圈设置颜色，最多可以设置四种颜色，这个框架在Android5.0之前是一个横线的颜色变化，很一般，一点都不好看，但是在Android5.0后就变为了一个圆圈的变化，很多APP都用的它，比如说斗鱼tv等。

另外，在onRefresh()方法中，我们设置了三秒钟刷新完成，即setRefreshing()中状态从true变为false。

再接下来我们又建一个Fragment，PagerFragment.class代码如下：

package com.example.dragonhaw.doubandemo.fragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.example.dragonhaw.doubandemo.R;
/**
 * Created by dragonhaw on 2016/9/13.
 */
public class PagerFragment extends Fragment {
  private TextView textView;
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_pager, container, false);
    textView = (TextView) view.findViewById(R.id.text);
    Bundle bundle = getArguments();
    int pager = bundle.getInt("pager_num");
    textView.setText("" + pager);
    return view;
  }
} 

MainActivity的布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity">
  <com.astuetz.PagerSlidingTabStrip
    android:id="@+id/pager_tabs"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="#ff2d2d2d"
    android:textColor="#ff8f8f8f"
    android:textSize="18sp"
    app:pstsIndicatorColor="#ff00cd79"
    app:pstsIndicatorHeight="4dp"
    app:pstsShouldExpand="true" />
  <android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout> 

PagerFragment的布局文件如下：

<?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:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text=""
    android:textSize="50sp"
    android:gravity="center"
    />
</LinearLayout> 

RefreshFragment的布局文件如下：

<android.support.v4.widget.SwipeRefreshLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/refresh_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  >
  <ListView
    android:id="@+id/lv"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout> 

以上所述是小编给大家介绍的Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！