ViewPager + Fragment 实现滑动导航
-
引言
- ViewPager + Fragment组合模式经常用于实现Apps整体的导航布局结构，这种布局结构也成为了目前主流的一种Apps的布局模式。
- ViewPager组件是一个轮播组件，单独使用的时经常用于图片的轮转播放。
- Fragment组件是Android4.0以后主推的一种窗体构建模型。两种组件的组合开发模式可以大幅度提高项目开发的效率同时也可以对项目进行有效的页面整合。
- 这种模式开发的时候我们需要一个很重要的类库android-support-v4.jar文件。我们的ViewPager+PagerTabStrip两个组件都是基于android.support.v4.*这个包下的。我们默认创建的Android Porject都会默认添加这个兼容包。
-
开发流程
-
步骤1：在res -> layout中创建一个布局资源文件，在该文件中设置两个嵌套组件。
<android.support.v4.ViewPager ...> <android.support.v4.PagerTabStrip .../> </android.support.v4.ViewPager> 步骤2：在res -> layout中创建多个窗体布局资源fragment_first.xml ......
步骤3：在src下创建一个主窗体类MainActivity.java，该类必须继承FragmentActivity
注：声明以下对象
// 用于存放每个Fragment窗体界面
private List<Fragment> lstFragments;
// 用于存放导航选项菜单
private List<String> lstTitles;- 步骤4：在src下创建多个窗体类FirstFragment.java，必须继承Fragment，同时重写onCreateView()方法。
-
步骤5：在MainActivity中，重写onPostResume()方法(在该方法中实例化对象，为了提高页面加载速度)
- 5-1：实例化 步骤4 创建的每一个Fragment窗体及lstFragments集合
- 5-2：将实例化好的窗体添加到步骤3创建的lstFragments集合中
- 5-3：实例化 步骤3 创建的lstTitles集合并向其添加导航菜单名称
- 步骤6 自定义一个Adapter适配器类，该类必须继承FragmentPagerAdapter
- 步骤7 继续步骤5的编码，实例化适配器，并绑定步骤5初始化的两个集合
- 步骤8 组件绑定自定义实例化好的适配器
-
-
实现效果
实现效果.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">
<!-- 设置指示器组件 -->
<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("选项01");
lstTabsTitle.add("选项02");
lstTabsTitle.add("选项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;
}
}