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

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

 使用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_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,Bundle savedInstanceState) {     VIEw vIEw = inflater.inflate(R.layout.fragment_pager,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实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

总结

以上是内存溢出为你收集整理的Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)全部内容，希望文章能够帮你解决Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。