ViewPager滑动和点击切换内容

界面设计非常easy，第一行三个头标，第二行动绘图片，第三行页卡内容展示。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<?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>

我们要展示三个页卡。所以还须要三个页卡内容的界面设计，这里我们仅仅设置了背景颜色，能起到差别作用就可以。


1

2

3

4

5

6

7

<?

xml version="1.0" encoding="utf-8"?

>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical"

    android:background="#158684" >

</LinearLayout>

代码

(1) 变量的定义


1

2

3

4

5

6

7

    private ViewPager mPager;//页卡内容

    private List<View> listViews; // Tab页面列表

    private ImageView cursor;// 动绘图片

    private TextView t1, t2, t3;// 页卡头标

    private int offset = 0;// 动绘图片偏移量

    private int currIndex = 0;// 当前页卡编号

    private int bmpW;// 动绘图片宽度

(2) 初始化头标


1

2

3

4

5

6

7

8

9

10

11

12

/**

     * 初始化头标

*/

    private void InitTextView() {

        t1 = (TextView) findViewById(R.id.text1);

        t2 = (TextView) findViewById(R.id.text2);

        t3 = (TextView) findViewById(R.id.text3);

        t1.setOnClickListener(new MyOnClickListener(0));

        t2.setOnClickListener(new MyOnClickListener(1));

        t3.setOnClickListener(new MyOnClickListener(2));

    }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/**

     * 头标点击监听

*/

    public class MyOnClickListener implements View.OnClickListener {

        private int index = 0;

        public MyOnClickListener(int i) {

            index = i;

        }

        @Override

        public void onClick(View v) {

            mPager.setCurrentItem(index);

        }

    };

(3) 初始化页卡内容区


1

2

3

4

5

6

7

8

9

10

11

12

13

14

/**

     * 初始化ViewPager

*/

    private void InitViewPager() {

        mPager = (ViewPager) findViewById(R.id.vPager);

        listViews = new ArrayList<View>();

        LayoutInflater mInflater = getLayoutInflater();

        listViews.add(mInflater.inflate(R.layout.lay1, null));

        listViews.add(mInflater.inflate(R.layout.lay2, null));

        listViews.add(mInflater.inflate(R.layout.lay3, null));

        mPager.setAdapter(new MyPagerAdapter(listViews));

        mPager.setCurrentItem(0);

        mPager.setOnPageChangeListener(new MyOnPageChangeListener());

    }

我们将三个页卡界面装入当中，默认显示第一个页卡。这里我们还须要实现一个适配器。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

/**

     * ViewPager适配器

*/

    public class MyPagerAdapter extends PagerAdapter {

        public List<View> mListViews;

        public MyPagerAdapter(List<View> mListViews) {

            this.mListViews = mListViews;

        }

        @Override

        public void destroyItem(View arg0, int arg1, Object arg2) {

            ((ViewPager) arg0).removeView(mListViews.get(arg1));

        }

        @Override

        public void finishUpdate(View arg0) {

        }

        @Override

        public int getCount() {

            return mListViews.size();

        }

        @Override

        public Object instantiateItem(View arg0, int arg1) {

            ((ViewPager) arg0).addView(mListViews.get(arg1), 0);

            return mListViews.get(arg1);

        }

        @Override

        public boolean isViewFromObject(View arg0, Object arg1) {

            return arg0 == (arg1);

        }

        @Override

        public void restoreState(Parcelable arg0, ClassLoader arg1) {

        }

        @Override

        public Parcelable saveState() {

            return null;

        }

        @Override

        public void startUpdate(View arg0) {

        }

    }

(4) 初始化动画


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/**

     * 初始化动画

*/

    private void InitImageView() {

        cursor = (ImageView) findViewById(R.id.cursor);

        bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a)

                .getWidth();// 获取图片宽度

        DisplayMetrics dm = new DisplayMetrics();

        getWindowManager().getDefaultDisplay().getMetrics(dm);

        int screenW = dm.widthPixels;// 获取分辨率宽度

        offset = (screenW / 3 - bmpW) / 2;// 计算偏移量

        Matrix matrix = new Matrix();

        matrix.postTranslate(offset, 0);

        cursor.setImageMatrix(matrix);// 设置动画初始位置

    }

(5) 实现页卡切换监听


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

/**

     * 页卡切换监听

*/

    public class MyOnPageChangeListener implements OnPageChangeListener {

        int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量

        int two = one * 2;// 页卡1 -> 页卡3 偏移量

        @Override

        public void onPageSelected(int arg0) {

            Animation animation = null;

            switch (arg0) {

            case 0:

                if (currIndex == 1) {

                    animation = new TranslateAnimation(one, 0, 0, 0);

                } else if (currIndex == 2) {

                    animation = new TranslateAnimation(two, 0, 0, 0);

                }

                break;

            case 1:

                if (currIndex == 0) {

                    animation = new TranslateAnimation(offset, one, 0, 0);

                } else if (currIndex == 2) {

                    animation = new TranslateAnimation(two, one, 0, 0);

                }

                break;

            case 2:

                if (currIndex == 0) {

                    animation = new TranslateAnimation(offset, two, 0, 0);

                } else if (currIndex == 1) {

                    animation = new TranslateAnimation(one, two, 0, 0);

                }

                break;

            }

            currIndex = arg0;

            animation.setFillAfter(true);// True:图片停在动画结束位置

            animation.setDuration(300);

            cursor.startAnimation(animation);

        }

        @Override

        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override

        public void onPageScrollStateChanged(int arg0) {

        }

    }

演示

时间： 2024-11-09 02:15:57

ViewPager滑动和点击切换内容的相关文章

仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边

先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示出来,再如果这个条目的类型和上一个条目的类型不一样,就让这个条目的标题显示出来,否则,就隐藏标题,  这样我们就做到了每种类型只有第一个数据标题显示出来 接着,在Listview的外层(也就是MainActivity的布局文件中),默认放一个标题(下面都称作是主标题) 最后,设置右边Listview

Android 快速实现 ViewPager 滑动页卡切换（可用作整个 app上导航）

我记得在前面,我写了一篇Android 微信6.1 tab栏图标和字体颜色渐变的实现,如果大家仅仅认为这篇文章的功能只是模仿微信颜色渐变效果,那就大错特错了!认真阅读了这篇文章的朋友,应该知道,这里面代码可用作 app 通用的底部栏导航,通过它能快速的实现类似微信6.0版本以底部导航的 app 整体架构,并且在 MainActivity 中需要编写的代码非常简洁.如果有兴趣的朋友可以去看看. 效果: 今天这篇 blog的内容同样可以拿来做 app 的整体架构,但与前面那篇 blog 不同,不同之

移动端手指左右滑动切换内容demo

说在开头 最近移动端做了一个手指左右滑动切换内容的效果demo; 为了表示我的无私,决定分享给诸位:(详细代码见附件) 正文   先上html代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta name="viewport" 

Android之fragment点击切换和滑动切换结合

学了一小段时间的Android,主要接触的是UI设计,打交道最多莫过于fragment了吧.在Android3.0引入了fragment的概念后,几乎在所以的Android的应用中都可以看见其身影,已经有很多前辈高人都已经详细介绍过fragmrnt,我这里就不多说什么了. 这里本来是想模仿一下微信的切换效果,怎奈水平不足,这里就献丑贴出半成品的代码,希望有大神能指点一下.废话不多说,上代码.先从简单的开始吧,这里是我一共用了3个fragment,这里就只贴出第一个的fragment的布局,别的两

Android——Fragment实例精讲——底部导航栏+ViewPager滑动切换页面

说明: 实现效果: 1- 用ViewPager实现Fragmen之间的切换 2- 底部用RadioGroup实现,更方便的实现图片和字体颜色的改变,更方便的通过RadioButton的点击事件来控制页面切换 原文地址:http://www.runoob.com/w3cnote/android-tutorial-fragment-demo4.html

（转）ViewPager，ScrollView 嵌套ViewPager滑动冲突解决

ViewPager,ScrollView 嵌套ViewPager滑动冲突解决 本篇主要讲解一下几个问题 粗略地介绍一下View的事件分发机制 解决事件滑动冲突的思路及方法 ScrollView 里面嵌套ViewPager导致的滑动冲突 ViewPager里面嵌套ViewPager 导致的滑动冲突 轮播图的几种实现方式 先看一下效果图 ScrollView里面嵌套ViewPager ViewPager里面嵌套ViewPager View的 事件分发机制 这篇博客大打算详细讲解View的事件分发机制

Android 自定义 ViewPager 打造千变万化的图片切换效果

Android 自定义 ViewPager 打造千变万化的图片切换效果 标签: Android自定义ViewPagerJazzyViewPager 目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPa

android 禁止ViewPager滑动

最近项目中,有个需求就是要禁止ViewPager滑动事件,我们看下360手机助手的界面,风格就类似这样的 大家如果使用过360手机助手就会发现中间内容是不可以滑动的,现在写一个demo,讲下怎么禁止ViewPager事件的滑动 布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/too

如何禁止viewPager滑动

众所周知,viewPager是能够滑动的,但有时候我们需要禁止它的滑动(微笑地面对*—……—*). 情况是这样的: activity中有一个viewPager,viewPager中加入3个Fragment,第三个Fragment中又使用了一个viewPager,这个viewPager中又加入了几个Fragment(本人不是受虐狂,仅仅是功能需要).如图: 想实现的功能: 点击activity的图标或者滑动的时候能够切换第一个viewPager中的Fragment,点击Fragment3中的图标能