学习引导
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%做为初始点)
* */