ViewPage+Fragment+indicator+Tabhost效果

下载地址：

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