使用ViewPager，PagerSlidingTabStrip，SwipeRefreshLayout打造一款可以點擊可以側滑的頂部導航欄。
先簡單介紹一下所用的兩個個開源庫。
PagerSlidingTabStrip
用法：
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實現頂部導航欄可點擊可滑動效果(仿微信仿豆瓣網)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
