PagerTitleStrip标题栏
- 先上所有代码,在进行细节说明
<LinearLayout
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"
android:orientation="vertical"
tools:context="com.lingzhuo.testviewpager.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTitleStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"></android.support.v4.view.PagerTitleStrip>
</android.support.v4.view.ViewPager>
</LinearLayout>
- 首先必须在布局文件中添加PagerTitleStrip作为ViewPager的子控件,并设置bottom/top,
- 注意PagerTitleStrip是ViewPager的子控件
- 三个滑动页面的布局就是上一篇博客的代码,这里就不在进行介绍了,并无改动。
public class MainActivity extends AppCompatActivity {
private List<View> list_view =new ArrayList<>();
private List<String> list_title =new ArrayList<>();
private ViewPager viewPager;
private View view1,view2,view3;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
LayoutInflater inflater=getLayoutInflater();
view1=inflater.inflate(R.layout.layout_pager1,null);
view2=inflater.inflate(R.layout.layout_pager2,null);
view3=inflater.inflate(R.layout.layout_pager3,null);
list_view.add(view1);
list_view.add(view2);
list_view.add(view3);
list_title.add("星期一");
list_title.add("星期二");
list_title.add("星期三");
PagerAdapter pagerAdapter=new PagerAdapter() {
@Override
public CharSequence getPageTitle(int position) {
return list_title.get(position);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list_view.get(position));
return position;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list_view.get(position));
}
@Override
public int getCount() {
return list_view.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view== list_view.get(Integer.parseInt(object.toString()));
}
};
viewPager.setAdapter(pagerAdapter);
}
private void init() {
viewPager= (ViewPager) findViewById(R.id.viewPager);
}
}
这里相比较上一篇博客就做了以下更改
private List<String> list_title =new ArrayList<>();
list_title.add("星期一");
list_title.add("星期二");
list_title.add("星期三");
- 只是在变量声明阶段增加了一个list_title的list声明,在代码中添加了滑动页面相应个数的名称,其实对应位置的名称,就是对应页面的标题
@Override
public CharSequence getPageTitle(int position) {
return list_title.get(position);
}
- 在PagerAdapter中复写了getPageTitle这个方法,更具当前位置返回页面的标题
- 效果图如下
PagerTabStrip标题栏
- 这个标题栏的设置与除了布局文件里添加的控件不同之外,其它的代码编写与PagerTitleStrip完全相同
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical"
tools:context="com.lingzhuo.testviewpager.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTabStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"></android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</LinearLayout>
- 首先必须在布局文件中添加PagerTabStrip作为ViewPager的子控件,并设置bottom/top,
- 注意PagerTabStrip是ViewPager的子控件
- 其它的代码设置与上面的PagerTitleStrip完全一致,这里就不在一一赘述。
两种方式的区别
- 通过效果图,我们可以发现这两种实现方式的两点不同之处
1、PagerTabStrip在当前页面下,会有一个下划线条来提示当前页面的Tab是哪个。
2、PagerTabStrip的Tab是可以点击的,当用户点击某一个Tab时,当前页面就会跳转到这个页面,而PagerTitleStrip则没这个功能。
扩展:PagerTabStrip属性更改
先上效果图
实现标题栏的自定义,只需要在复写的getPageTitle方法返回值进行自定义就可以了,这里应用了富文本的使用,富文本的使用可以参见我的博客 UI控件–TextView
具体代码如下
public CharSequence getPageTitle(int position) {
String picHtml="<img src='ic_launcher'><font color='#ff0000'>"+list_title.get(position)+"</font>";
Spanned spanned= Html.fromHtml(picHtml, new Html.ImageGetter() {
//通过反射获取文件
Class clazz=R.mipmap.class;
Drawable drawable=null;
public Drawable getDrawable(String source) {
try {
//通过反射通过传进来的source也就是图片名称,获取图片的属性实例
Field field=clazz.getDeclaredField(source);
//通过图片属性获取图片的id
int id=field.getInt(null);
drawable=getResources().getDrawable(id,null);
//注意一定要对图片设置坐标点和相应的宽和高,否则图片没设置大小,会不显示
drawable.setBounds(0,0,drawable.getMinimumWidth(),drawable.getMinimumHeight());
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
return drawable;
}
},null);
return spanned;
}
- 其它的代码设置,与上面贴的代码完全一致,仅仅对getPageTitle方法进行了上面的修改。