一、为什么学习添加标题栏
简单的引导界面我们已将学习完了,那么为什么还要学习添加标题栏呢?如果添加上标题栏会不会很丑呢?之前学习的时候,做完了简单的效果我也觉得挺难看的,但是看了微信的界面(如上图所示)才深有体会。
二、PagerTabStrip
PagerTabStrip的简单介绍
在学习PagerTabStrip的用法之前,先来简单介绍一下它。 PagerTabStrip可以用来设置ViewPager的标题栏,它在标题栏下面会有一条灰色的指示线,指示当前的View对象,可以通过点击来切换,PagerTabStrip在使用时会自动加载三个页卡,当前页卡的前一个页卡,当前页卡和当前页卡的后一个页卡。
PagerTabStrip的使用
1、在布局文件中写入PagerTabStrip,在MainActivity中find
2、利用List<>
给出title,并赋初值
3、在PagerAdapter构造器中传入title并重写getPageTitle()方法
4、在MainActivity中设置属性
布局
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<android.support.v4.view.PagerTabStrip
android:id="@+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
></android.support.v4.view.PagerTabStrip>
title与传参
private List<String> mtitle;
mtab=(PagerTabStrip) findViewById(R.id.tab);
/**
* 为ViewPager设置页卡标题
* */
mtitle=new ArrayList<String>();
mtitle.add("第一个");
mtitle.add("第二个");
mtitle.add("第三个");
mtitle.add("第四个");
//传参
madapter=new MyPagerAdapter(mViews, mtitle);
Adapter中的重写
@Override
public CharSequence getPageTitle(int position) {
return mtitle.get(position);
}
设置属性
//为PagerTabStrip设置属性
mtab.setBackgroundColor(Color.WHITE);
mtab.setTextColor(Color.GRAY);
mtab.setDrawFullUnderline(false);
mtab.setTabIndicatorColor(Color.GREEN);
效果图与小结
通过图片的演示我们可以看到标题栏下面的指示线及其点击的效果
三、PagerTitleStrip
PagerTitleStrip也是用于添加标题栏的,也会自动加载三个页卡,但是标题栏下没有指示线,也没有点击事件。
用法只需要在布局文件中添加,并创建title给Adapter传参数即可。这里需要注意,只要在布局中加了PagerTitleStrip,相应的PagerTabStrip的点击效果与指示线效果就会失效。
布局
一般PagerTabStrip与PagerTitleStrip不会出现在同一个布局中,为了看添加了PagerTitleStrip之后,PagerTabStrip是否还有效才这样添加的。
<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=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<android.support.v4.view.PagerTabStrip
android:id="@+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
></android.support.v4.view.PagerTabStrip>
<android.support.v4.view.PagerTitleStrip
android:id="@+id/tab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
></android.support.v4.view.PagerTitleStrip>
</android.support.v4.view.ViewPager>
</RelativeLayout>
效果图与小结
在上面的图片中我们可以看到PagerTitleStrip没有指示线也没有点击事件,而且有了它之后PagerTabStrip不会再生效。
四、PagerTabStrip与PagerTitleStrip区别
PagerTabStrip与PagerTitleStrip区别有以下两点:
1、PagerTabStrip设置的标题栏下面有指示线,PagerTitleStrip设置的标题栏下面没有指示线。
2、PagerTabStrip是可以通过点击来实现页卡的切换的,而PagerTitleStrip没有点击效果。
五、大部分代码
MainActivity
package com.example.viewpagergongcheng;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
public class MainActivity extends Activity {
private List<View> mViews;
private MyPagerAdapter madapter;
private ViewPager mviewpager;
private PagerTabStrip mtab;
private List<String> mtitle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mviewpager=(ViewPager) findViewById(R.id.viewpager);
mtab=(PagerTabStrip) findViewById(R.id.tab);
/**
* 为ViewPager设置页卡标题
* */
mtitle=new ArrayList<String>();
mtitle.add("第一个");
mtitle.add("第二个");
mtitle.add("第三个");
mtitle.add("第四个");
//为PagerTabStrip设置属性
mtab.setBackgroundColor(Color.WHITE);
mtab.setTextColor(Color.GRAY);
mtab.setDrawFullUnderline(false);
mtab.setTabIndicatorColor(Color.GREEN);
/**为mViews初始化数据
* */
mViews=new ArrayList<View>();
initData();
madapter=new MyPagerAdapter(mViews, mtitle);
mviewpager.setAdapter(madapter);
mviewpager.setPageTransformer(true, new DepthPageTransformer());
}
private void initData() {
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
View view4=View.inflate(this, R.layout.view4, null);
mViews.add(view1);
mViews.add(view2);
mViews.add(view3);
mViews.add(view4);
}
}
PagerAdapter
package com.example.viewpagergongcheng;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class MyPagerAdapter extends PagerAdapter{
private List<View> mViews;
private List<String> mtitle;
public MyPagerAdapter(List<View> mViews, List<String> mtitle) {
super();
this.mViews = mViews;
this.mtitle = mtitle;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViews.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mViews.get(position));
return mViews.get(position);
}
/**
* 返回页卡的数量
* */
@Override
public int getCount() {
// TODO Auto-generated method stub
return mViews.size();
}
/**
* view是否来自于对象
* */
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
/**设置页卡的标题
* */
@Override
public CharSequence getPageTitle(int position) {
return mtitle.get(position);
}
}