ViewPage+Fragment+indicator+Tabhost效果

来源：互联网发布：js 转换为数字编辑：程序博客网时间：2024/04/29 18:03

下载地址：

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

0 0