顶部导航栏可点击可滑动，仿微信仿豆瓣

来源：互联网发布：欧美知乎编辑：程序博客网时间：2024/05/16 19:55

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

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

PagerSlidingTabStrip

Github地址

用法：

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

[java] view plain copy
dependencies {  
    compile 'com.astuetz:pagerslidingtabstrip:1.0.1'  
}  

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

[html] view plain copy
<com.astuetz.PagerSlidingTabStrip  
    android:id="@+id/tabs"  
    android:layout_width="match_parent"  
    android:layout_height="48dip" />  

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

[java] view plain copy
// 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监听的话

[java] view plain copy
// continued from above  
tabs.setOnPageChangeListener(mPageChangeListener);  

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

SwipeRefreshLayout

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

用法：

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

[html] view plain copy
<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

[java] view plain copy
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代码如下：

[java] view plain copy
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代码如下：

[java] view plain copy
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的布局文件：

[html] view plain copy
<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的布局文件如下：

[html] view plain copy
<?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的布局文件如下：

[html] view plain copy
<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>  

嘿嘿，就是这么简单啦，如果各位看官觉得满意的话，麻烦帮忙赞一下！！

源码请点击此处下载

0 0