欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-01 13:16:40
 使用viewpager,pagerslidingtabstrip,swiperefreshlayout打造一款可以点击可以侧滑的顶部导航栏。 先简单介绍一...

 使用viewpager,pagerslidingtabstrip,swiperefreshlayout打造一款可以点击可以侧滑的顶部导航栏。

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

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

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