ViewPager + Fragment 實(shí)現(xiàn)滑動(dòng)導(dǎo)航
-
引言
- ViewPager + Fragment組合模式經(jīng)常用于實(shí)現(xiàn)Apps整體的導(dǎo)航布局結(jié)構(gòu)澜搅，這種布局結(jié)構(gòu)也成為了目前主流的一種Apps的布局模式诅岩。
- ViewPager組件是一個(gè)輪播組件，單獨(dú)使用的時(shí)經(jīng)常用于圖片的輪轉(zhuǎn)播放芒炼。
- Fragment組件是Android4.0以后主推的一種窗體構(gòu)建模型。兩種組件的組合開發(fā)模式可以大幅度提高項(xiàng)目開發(fā)的效率同時(shí)也可以對(duì)項(xiàng)目進(jìn)行有效的頁(yè)面整合抵恋。
- 這種模式開發(fā)的時(shí)候我們需要一個(gè)很重要的類庫(kù)android-support-v4.jar文件焕议。我們的ViewPager+PagerTabStrip兩個(gè)組件都是基于android.support.v4.*這個(gè)包下的。我們默認(rèn)創(chuàng)建的Android Porject都會(huì)默認(rèn)添加這個(gè)兼容包。
-
開發(fā)流程
-
步驟1：在res -> layout中創(chuàng)建一個(gè)布局資源文件盅安，在該文件中設(shè)置兩個(gè)嵌套組件唤锉。
<android.support.v4.ViewPager ...> <android.support.v4.PagerTabStrip .../> </android.support.v4.ViewPager> 步驟2：在res -> layout中創(chuàng)建多個(gè)窗體布局資源fragment_first.xml ......
步驟3：在src下創(chuàng)建一個(gè)主窗體類MainActivity.java，該類必須繼承FragmentActivity
注：聲明以下對(duì)象
// 用于存放每個(gè)Fragment窗體界面
private List<Fragment> lstFragments;
// 用于存放導(dǎo)航選項(xiàng)菜單
private List<String> lstTitles;- 步驟4：在src下創(chuàng)建多個(gè)窗體類FirstFragment.java别瞭，必須繼承Fragment窿祥，同時(shí)重寫onCreateView()方法。
-
步驟5：在MainActivity中蝙寨，重寫onPostResume()方法(在該方法中實(shí)例化對(duì)象晒衩，為了提高頁(yè)面加載速度)
- 5-1：實(shí)例化 步驟4 創(chuàng)建的每一個(gè)Fragment窗體及l(fā)stFragments集合
- 5-2：將實(shí)例化好的窗體添加到步驟3創(chuàng)建的lstFragments集合中
- 5-3：實(shí)例化 步驟3 創(chuàng)建的lstTitles集合并向其添加導(dǎo)航菜單名稱
- 步驟6 自定義一個(gè)Adapter適配器類，該類必須繼承FragmentPagerAdapter
- 步驟7 繼續(xù)步驟5的編碼墙歪，實(shí)例化適配器听系，并綁定步驟5初始化的兩個(gè)集合
- 步驟8 組件綁定自定義實(shí)例化好的適配器
-
-
實(shí)現(xiàn)效果
實(shí)現(xiàn)效果.JPG - 代碼清單
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.chinasofti.demo05viewpager.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/myViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">
<!-- 設(shè)置指示器組件 -->
<android.support.v4.view.PagerTabStrip
android:id="@+id/myPagerTabStrip"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#5362b7" />
</android.support.v4.view.ViewPager>
</RelativeLayout>
fragment_first.xml & fragment_second.xml & fragment_third.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.chinasofti.demo05viewpager.FirstFragment">
<!-- TODO: Update blank relative layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="First Fragment"
android:textSize="30sp"/>
</RelativeLayout>
MainActivity.java
package com.chinasofti.demo05viewpager;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.TypedValue;
import com.chinasofti.util.AppViewPagerAdapter;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private ViewPager myViewPager;
private PagerTabStrip pagerTabStrip;
private List<Fragment> lstFragments;
private List<String> lstTabsTitle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.getSupportActionBar().show();
}
@Override
protected void onPostResume() {
super.onPostResume();
this.lstFragments = getLstFragments();
this.lstTabsTitle = getLstTabsTitle();
this.myViewPager = (ViewPager) findViewById(R.id.myViewPager);
FragmentManager fragmentManager = getSupportFragmentManager();
AppViewPagerAdapter adapter = new AppViewPagerAdapter(fragmentManager, lstFragments, lstTabsTitle);
this.myViewPager.setAdapter(adapter);
this.pagerTabStrip = (PagerTabStrip) findViewById(R.id.myPagerTabStrip);
this.pagerTabStrip.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
}
public List<Fragment> getLstFragments() {
FirstFragment firstFragment = new FirstFragment();
SecondFragment secondFragment = new SecondFragment();
ThirdFragment thirdFragment = new ThirdFragment();
List<Fragment> lstFragments = new ArrayList<>();
lstFragments.add(firstFragment);
lstFragments.add(secondFragment);
lstFragments.add(thirdFragment);
return lstFragments;
}
public List<String> getLstTabsTitle() {
List<String> lstTabsTitle = new ArrayList<>();
lstTabsTitle.add("選項(xiàng)01");
lstTabsTitle.add("選項(xiàng)02");
lstTabsTitle.add("選項(xiàng)03");
return lstTabsTitle;
}
}
FirstFragment.java & SecondFragment.java & ThirdFragment.java
package com.chinasofti.demo05viewpager;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class FirstFragment extends Fragment {
public FirstFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_first, container, false);
}
}
AppViewPagerAdapter.java
package com.chinasofti.util;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.text.SpannableStringBuilder;
import android.text.Spanned;
import android.text.style.ForegroundColorSpan;
import java.util.List;
public class AppViewPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> lstFragments;
private List<String> lstTabsTitle;
public AppViewPagerAdapter(FragmentManager fm, List<Fragment> lstFragments, List<String> lstTabsTitle) {
super(fm);
this.lstFragments = lstFragments;
this.lstTabsTitle = lstTabsTitle;
}
@Override
public Fragment getItem(int position) {
return (this.lstFragments.size() == 0 || this.lstFragments == null)? null: this.lstFragments.get(position);
}
@Override
public int getCount() {
return (this.lstFragments.size() == 0 || this.lstFragments == null)? 0: this.lstFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
SpannableStringBuilder ssb = new SpannableStringBuilder(this.lstTabsTitle.get(position));
ForegroundColorSpan fcs = new ForegroundColorSpan(Color.WHITE);
ssb.setSpan(fcs, 0, ssb.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
return ssb;
}
}