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