(1)使用--//通过pagerTabStrip可以设置标题的属性private PagerTabStrip pagerTabStrip;private PagerTitleStrip pagerTitleStrip;
如下代码
package huahua.viewpager;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.ViewGroup;
public class MainActivity extends FragmentActivity {
private ViewPager m_vp;
private fragment1 mfragment1;
private fragment2 mfragment2;
private fragment3 mfragment3;
//页面列表
private ArrayList<Fragment> fragmentList;
//标题列表
ArrayList<String> titleList = new ArrayList<String>();
//通过pagerTabStrip可以设置标题的属性
private PagerTabStrip pagerTabStrip;
private PagerTitleStrip pagerTitleStrip;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
m_vp = (ViewPager)findViewById(R.id.viewpager);
pagerTabStrip=(PagerTabStrip) findViewById(R.id.pagertab);
//设置下划线的颜色
pagerTabStrip.setTabIndicatorColor(getResources().getColor(android.R.color.holo_green_dark));
//设置背景的颜色
pagerTabStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_dark));
// pagerTitleStrip=(PagerTitleStrip) findViewById(R.id.pagertab);
// //设置背景的颜色
// pagerTitleStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_dark));
mfragment1 = new fragment1();
mfragment2 = new fragment2();
mfragment3 = new fragment3();
fragmentList = new ArrayList<Fragment>();
fragmentList.add(mfragment1);
fragmentList.add(mfragment2);
fragmentList.add(mfragment3);
titleList.add("第一页 ");
titleList.add("第二页");
titleList.add("第三页 ");
m_vp.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager()));
// m_vp.setOffscreenPageLimit(2);
}
public class MyViewPagerAdapter extends FragmentPagerAdapter{
public MyViewPagerAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}
@Override
public Fragment getItem(int arg0) {
return fragmentList.get(arg0);
}
@Override
public int getCount() {
return fragmentList.size();
}
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}
}
}
在xml中如下
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 这里可以把PagerTabStrip替换成PagerTitleStrip看看效果有何不同 -->
<android.support.v4.view.PagerTabStrip
android:id="@+id/pagertab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</android.support.v4.view.ViewPager>
(2)自定义ViewPager的下滑线(推荐)
部分xml代码如下
<ImageView
android:id="@+id/iv_bottom_line"
android:layout_width="80dip"
android:layout_height="2dip"
android:scaleType="matrix"
android:src="@drawable/divider_1" />
<android.support.v4.view.ViewPager
android:id="@+id/vPager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1.0"
android:background="#000000"
android:flipInterval="30"
android:persistentDrawingCache="animation" >
</android.support.v4.view.ViewPager>
然后是java代码
package com.aven.qqdemo;
import java.util.ArrayList;
import java.util.List;
import android.content.res.Resources;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import com.demo.R;
/**
*
*
* @author avenwu iamavenwu@gmail.com
*
*/
public class MainActivity extends FragmentActivity {
private static final String TAG = "MainActivity";
private ViewPager mPager;
private ArrayList<Fragment> fragmentsList;
private ImageView ivBottomLine;
private TextView tvTabActivity, tvTabGroups, tvTabFriends, tvTabChat;
private int currIndex = 0;
private int bottomLineWidth;
private int offset = 0;
private int position_one;
private int position_two;
private int position_three;
private Resources resources;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
resources = getResources();
InitWidth();
InitTextView();
InitViewPager();
}
private void InitTextView() {
tvTabActivity = (TextView) findViewById(R.id.tv_tab_activity);
tvTabGroups = (TextView) findViewById(R.id.tv_tab_groups);
tvTabFriends = (TextView) findViewById(R.id.tv_tab_friends);
tvTabChat = (TextView) findViewById(R.id.tv_tab_chat);
tvTabActivity.setOnClickListener(new MyOnClickListener(0));
tvTabGroups.setOnClickListener(new MyOnClickListener(1));
tvTabFriends.setOnClickListener(new MyOnClickListener(2));
tvTabChat.setOnClickListener(new MyOnClickListener(3));
}
private void InitViewPager() {
mPager = (ViewPager) findViewById(R.id.vPager);
fragmentsList = new ArrayList<Fragment>();
Fragment activityfragment = TestFragment.newInstance("Hello Activity.");
Fragment groupFragment = TestFragment.newInstance("Hello Group.");
Fragment friendsFragment = TestFragment.newInstance("Hello Friends.");
Fragment chatFragment = TestFragment.newInstance("Hello Chat.");
fragmentsList.add(activityfragment);
fragmentsList.add(groupFragment);
fragmentsList.add(friendsFragment);
fragmentsList.add(chatFragment);
mPager.setAdapter(new MyFragmentPagerAdapter(
getSupportFragmentManager(), fragmentsList));
mPager.setCurrentItem(0);
mPager.setOnPageChangeListener(new MyOnPageChangeListener());
}
private void InitWidth() {
ivBottomLine = (ImageView) findViewById(R.id.iv_bottom_line);
bottomLineWidth = ivBottomLine.getLayoutParams().width;
Log.d(TAG, "cursor imageview width=" + bottomLineWidth);
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;
offset = (int) ((screenW / 4.0 - bottomLineWidth) / 2);//偏移量
Log.i("MainActivity", "offset=" + offset);
position_one = (int) (screenW / 4.0);
position_two = position_one * 2;
position_three = position_one * 3;
}
public class MyOnClickListener implements View.OnClickListener {
private int index = 0;
public MyOnClickListener(int i) {
index = i;
}
@Override
public void onClick(View v) {
mPager.setCurrentItem(index);
}
};
public class MyOnPageChangeListener implements OnPageChangeListener {
@Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0) {
case 0:
if (currIndex == 1) {
animation = new TranslateAnimation(position_one, 0, 0, 0);
tvTabGroups.setTextColor(resources
.getColor(R.color.lightwhite));
} else if (currIndex == 2) {
animation = new TranslateAnimation(position_two, 0, 0, 0);
tvTabFriends.setTextColor(resources
.getColor(R.color.lightwhite));
} else if (currIndex == 3) {
animation = new TranslateAnimation(position_three, 0, 0, 0);
tvTabChat.setTextColor(resources
.getColor(R.color.lightwhite));
}
tvTabActivity.setTextColor(resources.getColor(R.color.white));
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(0, position_one, 0, 0);
tvTabActivity.setTextColor(resources
.getColor(R.color.lightwhite));
} else if (currIndex == 2) {
animation = new TranslateAnimation(position_two,
position_one, 0, 0);
tvTabFriends.setTextColor(resources
.getColor(R.color.lightwhite));
} else if (currIndex == 3) {
animation = new TranslateAnimation(position_three,
position_one, 0, 0);
tvTabChat.setTextColor(resources
.getColor(R.color.lightwhite));
}
tvTabGroups.setTextColor(resources.getColor(R.color.white));
break;
case 2:
if (currIndex == 0) {
animation = new TranslateAnimation(0, position_two, 0, 0);
tvTabActivity.setTextColor(resources
.getColor(R.color.lightwhite));
} else if (currIndex == 1) {
animation = new TranslateAnimation(position_one,
position_two, 0, 0);
tvTabGroups.setTextColor(resources
.getColor(R.color.lightwhite));
} else if (currIndex == 3) {
animation = new TranslateAnimation(position_three,
position_two, 0, 0);
tvTabChat.setTextColor(resources
.getColor(R.color.lightwhite));
}
tvTabFriends.setTextColor(resources.getColor(R.color.white));
break;
case 3:
if (currIndex == 0) {
animation = new TranslateAnimation(0, position_three, 0, 0);
tvTabActivity.setTextColor(resources
.getColor(R.color.lightwhite));
} else if (currIndex == 1) {
animation = new TranslateAnimation(position_one,
position_three, 0, 0);
tvTabGroups.setTextColor(resources
.getColor(R.color.lightwhite));
} else if (currIndex == 2) {
animation = new TranslateAnimation(position_two,
position_three, 0, 0);
tvTabFriends.setTextColor(resources
.getColor(R.color.lightwhite));
}
tvTabChat.setTextColor(resources.getColor(R.color.white));
break;
}
currIndex = arg0;
animation.setFillAfter(true);
animation.setDuration(300);
ivBottomLine.startAnimation(animation);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
}
}
这里我要多说说
InitWidth()这个方法
可以知道bmpW是下划线的width、offset=
offset = (int) ((screenW / 4.0 - bottomLineWidth) / 2);//偏移量
当3个tab项则如图。除以3,4个tab项则除以4。一个bmpW左右各有个offset。
int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
//等同于position_one = (int) (screenW / 4.0);
所以如果有5个选项卡,将4.0改成5.0其余不变
(3)如果希望下划线在第二项:
android:scaleType="matrix"
然后
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);//若在第二项则是one
ivBottomLine.setImageMatrix(matrix);