当前位置： 移动技术网 > 移动技术>移动开发>Android > Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)

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

2019年07月24日  | 移动技术网移动技术  | 我要评论

 使用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实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网