viewpager+滑动条

学习引导

http://blog.csdn.net/bobo8945510/article/details/52742758 第一节 viewpager初识

http://blog.csdn.net/bobo8945510/article/details/52779629 第三节 viewpager实现滑动条及导航功能

http://blog.csdn.net/bobo8945510/article/details/52786360 第四节 viewpager实现带小园点过渡页

---

Viewpager的第二章讲解，滑动关联导航条的功能实现。

这个功能的实现，需要用的

水平滑动TranslateAnimation，用于计算页面滑动是，导航条滑动的距离，
viewpager，用法同上一篇博客一样。

先看效果图

这个是继承上一遍博客来扩展的，添加了上面一个黄色拖动条的功能。

• 第一步首先xml之main布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.enz.viewpagertext.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">
        <ImageView
            android:id="@+id/img01"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginBottom="5dp"
            android:scaleType="matrix"
            android:background="@drawable/img01"/>
    </LinearLayout>



    <android.support.v4.view.ViewPager
        android:id="@+id/viewp_01"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>

布局效果如下：

• 第二步，怎么在代码中根据viewPager来滑动上面的黄色条呢，这里用到的是水平滑动动画。看全部代码：

  1、TranslateAnimation：位移变化的动画，创建该动画时只要指定动画开始时的位置（以X、Y坐标来表示）、结束时的位置（以X、Y坐标来表示），并指定动画持续时间即可。

  /*
  * float fromXDelta 动画开始的点离当前View X坐标上的差值
  * float toXDelta 动画结束的点离当前View X坐标上的差值
  * float fromYDelta 动画开始的点离当前View Y坐标上的差值
  * float toYDelta 动画开始的点离当前View Y坐标上的差值
  * 起始点X轴坐标（数值、譬如50表示以当前View左上角坐标加50px为初始点、
  * 50%表示以当前View的左上角加上当前View宽高的50%做为初始点、
  * 50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）
  * */

(动画之Animation(详解))