标签：
https://github.com/asijack/ViewPage-Fragment-indicator-TabhostDemo
先看下效果：
我之前一篇文章http://www.cnblogs.com/asijack/p/4239445.html 也是这种滑动的效果，但是那个不是我想要的效果，我要的是这种滑动的时候游标跟着滑动的效果，而不是滑动结束后才动的。
demo需要引入一个libraries ：ListSamples-library
需要注意的是libraries和demo 的android-support-v4.jar 需要是一致的（为了省去不必要的麻烦，建议是同一个jar包）
代码也不是很多
先看看布局吧
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:orientation="vertical" android:layout_height="fill_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/tv_guid1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1.0" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:gravity="center" android:text="fragment1" android:textSize="18sp" /> <TextView android:id="@+id/tv_guid2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1.0" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:gravity="center" android:text="fragment2" android:textSize="18sp" /> <TextView android:id="@+id/tv_guid3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1.0" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:gravity="center" android:text="fragment3" android:textSize="18sp" /> <TextView android:id="@+id/tv_guid4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1.0" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:gravity="center" android:text="fragment4" android:textSize="18sp" /> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" /> <com.viewpagerindicator.UnderlinePageIndicator android:id="@+id/indicator" android:layout_height="5dp" android:layout_width="fill_parent" android:layout_alignParentTop="true" /> </RelativeLayout> </LinearLayout>
v4自带有指示器
<android.support.v4.view.PagerTabStrip android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" />
这种。
这里面是自定义的一个指示器
com.viewpagerindicator.UnderlinePageIndicator
在libraries里面实现的。
MainActivity 里面的代码也是比较简便的
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化textview initTextView(); mAdapter = new MyFragmentAdapter(getSupportFragmentManager()); mPager = (ViewPager)findViewById(R.id.pager); mPager.setAdapter(mAdapter); //指示器 UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator); indicator.setViewPager(mPager); //设置静止时不消失 indicator.setFades(false); } private void initTextView() { //每个fragment(view) 对应的 textview view1=(TextView) findViewById(R.id.tv_guid1); view2=(TextView) findViewById(R.id.tv_guid2); view3=(TextView) findViewById(R.id.tv_guid3); view4=(TextView) findViewById(R.id.tv_guid4); //设置监听 view1.setOnClickListener(new TxListener(0)); view2.setOnClickListener(new TxListener(1)); view3.setOnClickListener(new TxListener(2)); view4.setOnClickListener(new TxListener(3)); } public class TxListener implements View.OnClickListener{ private int index=0; public TxListener (int i){ index=i; } @Override public void onClick(View view) { mPager.setCurrentItem(index); } }
//指示器 UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator); indicator.setViewPager(mPager); //设置静止时不消失 indicator.setFades(false);
可以在这里设置指示器的动画效果，背景什么的。也可以在xml布局里面设置。
那个同步的游标的颜色设置在这里 UnderlinePageIndicator类里面的
final int defaultSelectedColor = res.getColor(R.color.default_underline_indicator_selected_color);
这个libraries 还支持 游标样式的改变，比如 圆型，线型，自定义的等等
有兴趣的可以看下这个源码。
https://github.com/asijack/ViewPage-Fragment-indicator-TabhostDemo
ViewPage+Fragment+indicator+Tabhost效果
标签：
原文地址：http://www.cnblogs.com/asijack/p/4241165.html
