android的导航栏简介,PagerTabStrip实现导航栏

PagerTabStrip实现导航栏

立即下载

金额: 4 元

支付方式：

友情提醒：源码购买后不支持退换货

立即支付

发布时间：2020-09-07

概述

PagerTabStrip快速实现 viewpager+fragment 布局的导航栏

详细

### 前言

之前写过关于`TabLayout`实现导航栏的文章，今天这篇文章，让我们来学习下新的实现导航栏效果的控件`PagerTabStrip`

今天涉及知识点：

1. PagerTabStrip简介

2. 实现导航栏的前置条件

3. PagerTabStrip在Activity中使用

4. 效果图和项目结构图

先来波效果图：



***

更多精彩内容，请关注微信公众号 "**Android进击**",大家一起来学习进步吧

***

#### 一. PagerTabStrip简介

`PagerTabStrip`是Android中一个实现`ViewPager+Fragment`界面时，帮助快速实现切换导航栏的类，其继承自`PagerTitleStrip`。`PagerTitleStrip`和`PagerTabStrip`使用方法差不多，但由于`PagerTabStrip`相比之下功能更加强大，所以此文主要介绍`PagerTabStrip`的使用，这里需要注意的是`PagerTabStrip`控件布局的时候必须放在`ViewPager`控件内部，且只有在和`ViewPager`结合使用的时候，`PagerTabStrip`功能才生效。可以说是为`ViewPager`实现导航效果而生。

#### 二. 实现导航栏的前置条件

要实现`ViewPager+Fragment`界面效果，首先我们得准备几个Fragement，这里为了方便讲述，我准备了三个Fragment：`FragmentA`,`FragmentB`和`FragmentC`。三个Fragment代码及布局几乎一致。下面就以`FragmentA`为例，贴下Fragment代码：

```

public class FragmentA extends Fragment {

private View mLayoutView;

private Context mContext;

private TextView mTvTestA;

@Override

public void onAttach(Context context) {

super.onAttach(context);

this.mContext=context;

}

@Nullable

@Override

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

mLayoutView = inflater.inflate(R.layout.fragment_a, container, false);

initView();

initData();

setListener();

return mLayoutView;

}

private void initView(){

mTvTestA=mLayoutView.findViewById(R.id.tv_a);

}

private void initData(){

Bundle bundle=getArguments();

String value="";

if(bundle!=null) {

value = bundle.getString("A");

}

mTvTestA.setText("魂斗罗");

}

private void setListener(){}

}

```

`FragmentA`对应布局`fragment_a.xml`代码如下：

```

```

然后还会涉及到一个ViewPager相关的适配器——`TempPagerAdapter`.我在`TempPagerAdapter`中封装了几个关于`PagerTabStrip`属性设置的方法：

```

/***

* 设置PagerTabStrip字体颜色

*

* @param colorId: eg:R.color.red

*/

public void setColorId(int colorId)

/**设置PagerTabStrip字体大小**/

public void setTextSize(float textSize)

/***

* 设置PagerTabStrip下划线颜色

* @param indicatorColor eg:R.color.red

* @param pagerTabStrip PagerTabStrip对象

*/

public void setIndicatorColor(int indicatorColor, PagerTabStrip pagerTabStrip)

```

`TempPagerAdapter`代码demo中有，这里不多赘述。

#### 三. PagerTabStrip在Activity中使用

下面贴出`PagerTabStrip`在`Activity`中使用代码:

```

public class TempActivity extends AppCompatActivity implements View.OnClickListener {

private ViewPager mViewPager;

private PagerTabStrip mPagerTabStrip;

private ListmTitleList;

private ListmFragmentList;

private TempPagerAdapter mTempPagerAdapter;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_temp);

//初始化控件

initView();

//初始化数据

initData();

//控件监听

setListener();

}

/**初始化控件**/

private void initView(){

mViewPager=findViewById(R.id.viewPager);

mPagerTabStrip=findViewById(R.id.pagertab);

}

/**初始化数据**/

private void initData(){

//标题填充

mTitleList = new ArrayList<>();

mTitleList.add("魂斗罗");

mTitleList.add("双截龙");

mTitleList.add("忍者神龟");

//fragment填充

mFragmentList = new ArrayList<>();

mFragmentList.add(0, new FragmentA());

mFragmentList.add(1, new FragmentB());

mFragmentList.add(2, new FragmentC());

//viewPager设置

mTempPagerAdapter = new TempPagerAdapter(getSupportFragmentManager(), mFragmentList,mTitleList);

mViewPager.setOffscreenPageLimit(mTitleList.size());// 设置预加载Fragment个数

mViewPager.setAdapter(mTempPagerAdapter);

mViewPager.setCurrentItem(0);// 设置当前显示标签页为第一页

//PagerTabStrip设置

mTempPagerAdapter.setIndicatorColor(R.color.blue,mPagerTabStrip);//改下划线颜色

//设置PagerTabStrip字体颜色

mTempPagerAdapter.setColorId(R.color.black);

//设置PagerTabStrip字体大小

mTempPagerAdapter.setTextSize(1.5f);

}

/**控件监听**/

private void setListener(){

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override

public void onPageSelected(int position) {

switch (position) {

case 0:

break;

case 1:

break;

case 2:

break;

default:

break;

}

}

@Override

public void onPageScrollStateChanged(int state) {

}

});

}

@Override

public void onClick(View v) {

}

}

```

接着贴出`TempActivity`对应布局`activity_temp.xml`代码:

```

```

#### 四. 效果图和项目结构图




ok，今天的内容就介绍到这里了，谢谢大家。

***

更多精彩内容，请关注微信公众号 "**Android进击**",大家一起来学习进步吧