程序员一代码搬运工
【Java学习心得和Java学习技术个人总结】

android页面切换viewpager

一、首先,我们来看一下效果图,这是新浪微博的Tab滑动效果。我们可以手势滑动,也可以点击上面的头标进行切换。与此同方式,

白色横条会移动到相应的页卡头标下。这是一个动画效果,白条是缓慢滑动过去的。好了,接下来我们就来实现它。

二、在开始前,我们先要认识一个控件,ViewPager。它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换。

这个附加包是android-support-v4.jar,在最后的源码中会提供给大家,在libs文件夹中。当然你也可以自己从网上搜索最新的版本。

找到它后,我们需要在项目中添加

三、我们先做界面,

界面设计很简单,第一行三个头标,第二行动画图片,第三行页卡内容展示。

复制代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:umadsdk
="http://schemas.android.com/apk/res/com.LoveBus"
   android:layout_width
="fill_parent"
   android:layout_height
="fill_parent"
   android:orientation
="vertical">

<LinearLayout
android:id="@+id/linearLayout1"
       android:layout_width
="fill_parent"
       android:layout_height
="100.0dip"
       android:background
="#FFFFFF">

<TextView
android:id="@+id/text1"
           android:layout_width
="fill_parent"
           android:layout_height
="fill_parent"
           android:layout_weight
="1.0"
           android:gravity
="center"
           android:text
="页卡1"
           android:textColor
="#000000"
           android:textSize
="22.0dip"/>

<TextView
android:id="@+id/text2"
           android:layout_width
="fill_parent"
           android:layout_height
="fill_parent"
           android:layout_weight
="1.0"
           android:gravity
="center"
           android:text
="页卡2"
           android:textColor
="#000000"
           android:textSize
="22.0dip"/>

<TextView
android:id="@+id/text3"
           android:layout_width
="fill_parent"
           android:layout_height
="fill_parent"
           android:layout_weight
="1.0"
           android:gravity
="center"
           android:text
="页卡3"
           android:textColor
="#000000"
           android:textSize
="22.0dip"/>
</LinearLayout>

<ImageView
android:id="@+id/cursor"
       android:layout_width
="fill_parent"
       android:layout_height
="wrap_content"
       android:scaleType
="matrix"
       android:src
="@drawable/a"/>

<android.support.v4.view.ViewPager
android:id="@+id/vPager"
       android:layout_width
="wrap_content"
       android:layout_height
="wrap_content"
       android:layout_gravity
="center"
       android:layout_weight
="1.0"
       android:background
="#000000"
       android:flipInterval
="30"
       android:persistentDrawingCache
="animation"/>

</LinearLayout>
复制代码


我们要展示三个页卡,所以还需要三个页卡内容的界面设计,这里我们只设置了背景颜色,能起到区别作用即可。

复制代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width
="fill_parent"
赞(0)
未经允许不得转载:程序员一代码搬运工 » android页面切换viewpager
分享到: 更多 (0)