如何实现微信5.0的滑动效果

作为初学者,虽然深知不可一步登天也应当脚踏实地,但是总会有一些奇思异想想要去实现。在实现第一个app的时候我们遇到的另一个头疼的问题便是如何实现像微信5.0版本过后的滑动效果,查阅官方文档以及借鉴网上大神的经验之后我们也顺利得到了一点思路。虽然我另外一个伙伴已经实现了此功能,但我总觉得有些许的冗杂,经过研究学习之后现在已经得到了优化,详见下文。

1、android.support.v4

  • google提供了Android Support Library package 系列的包来保证来高版本sdk开发的向下兼容性,其中v4包是为了照顾1.6及更高版本而设计的,这个包是使用最广泛的,eclipse新建工程时,都默认带有了。但是我一开始在开发中一直指不到该包的源代码,一番搜索之后找到了解决方法:1、首先为工程build path,找到路径:android-sdk-windows\extras\android\support\v4\android-support-v4.jar;2、导入该包并不能正确的找到源代码,需要在java bulid path -->Order and Export下找到刚刚导入的support\v4\android-support-v4.jar,并将其选择到top位置;3、点击apply之后就可以顺利的查到源代码。
  • 该包下比较常用的类有Fragment以及ViewPager,我的伙伴在实现该功能时使用的是Fragment+ViewPager,这也是官方一直推荐的,但是因为觉得有些许的冗杂,所以这里我只是用ViewPager来实现。关于该包下的这两个常用的类以及其他关键的UI效果的类大家可以查看文档了解,这里就不赘述。

2、具体实现

为了美观,这里只显示关键代码,工程的整体代码可以到我的博客中下载:http://120.198.244.55:9999/files.cnblogs.com/files/ghylzwsb/scroll.rar

  • MainActivity关键代码
    public Object instantiateItem(ViewGroup container, int position) {

                if (mViewList.get(position).getParent() != null) {
                    container.removeView(mViewList.get(position));
                }
                container.addView(mViewList.get(position));

                return mViewList.get(position);
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(mViewList.get(position));
            }

            @Override
            public int getCount() {
                return mViewList.size();
            }
        });
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels){
                int x = (int)((position + positionOffset) * mTextView.getWidth());
                ((View)mTextView.getParent()).scrollTo(-x, mTextView.getScrollY());
            }

            public void onPageSelected(int position){
                if(position == 0){
                    radioButton1.setChecked(true);
                }else if(position == 1){
                    radioButton2.setChecked(true);
                }else if(position == 2){
                    radioButton3.setChecked(true);
                }else if(position == 3){
                    radioButton4.setChecked(true);
                }
            }

            public void onPageScrollStateChanged(int state){

            }
        });

    }
    int tmpState = 0;

    public int dip2px(float dipValue) {
        final float scale = getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }

    public int px2dip(float pxValue) {
        final float scale = getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
  • activity_main.xml
<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:background="#FFFFFFFF"
    android:orientation="vertical" >

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/radioButton1"
            style="@style/radioButtonStyle"
            android:text="页面1" />

        <RadioButton
            android:id="@+id/radioButton2"
            style="@style/radioButtonStyle"
            android:text="页面2" />

        <RadioButton
            android:id="@+id/radioButton3"
            style="@style/radioButtonStyle"
            android:text="页面3" />

        <RadioButton
            android:id="@+id/radioButton4"
            style="@style/radioButtonStyle"
            android:text="页面4" />
    </RadioGroup>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="3dip"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView"
            android:layout_width="200dip"
            android:layout_height="3dip"
            android:background="#FF336699"
            android:textColor="#FFFF0000" />
    </LinearLayout>

    <View
        android:layout_width="wrap_content"
        android:layout_height="1dip"
        android:background="#FF336699" />

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

</LinearLayout>

3、具体效果

2016-04-10

BOB

时间: 2024-12-14 18:47:55

如何实现微信5.0的滑动效果的相关文章

阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)

在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效果,让我们感触最深的莫过于微信浏览器里面,下拉时自带橡皮筋的效果. 然而在开发的时候我们经常需要阻止此效果. 在此先直接给一个方案,直接加上下面的代码即可: document.body.addEventListener('touchmove', function (e) { e.preventDef

微信5.0之Fragment使用

相信大家对于微信5.0的切换效果一定很有印象,对于一些童鞋一定认为这是通过TabHost实现的,不过这里我要纠正一下你们的错误观点了,这个效果的实现是通过Fragment+ViewPage实现的,看上去简单的滑动切换,里面包含了很多腾讯工程师对于Android UI设计的独特视角和超强的业务能力,真心为他们点一个赞.说了这么多,下面我们开始探讨如何实现这样炫酷的效果,开始之前建议大家先看一下关于Fragment的介绍,这样会更好的帮助我们理解今天要介绍的知识. 我们本篇最后的设计效果: 下面我们

做微信公众号时,移动端滑动效果(swiper插件(display:none))显示滑动问题

微信公众号的制作,其中缺少不了希望实现标题.内容.图片的滑动效果, 这时候可以选择使用(swiper插件)实现相应效果,功能十分强大,链接:http://www.swiper.com.cn/: 最近做一款公众号时,在实现功能时遇到一难点,废了九牛二虎之力,终于在一高人的帮助下解决了. 1.问题描述: 原本该滑动项是隐藏的(display:none;),滑动项的代码是参考swiper插件文档内容而写, 通过按钮点击之后该滑动项显示(dispay:block),再进行左右滑动效果时,始终显示swip

SwipeListView 详解 实现微信,QQ等滑动删除效果

Linux的shell编程 1.什么是shell? 当一个用户登录Linux系统之后,系统初始化程序init就为每一个用户运行一个称为shell(外壳)的程序. shell就是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用shell来启动.挂起.停止甚至是编写一些程序.一般的Linux系统都将bash作为默认的shell. 2.几种流行的shell 目前流行的shell有ash.bash.ksh.csh.zsh等,可以用下面的命令来查看she

android用最简单的方法实现QQ5.0的侧边栏滑动效果

先看个效果 使用两个开源项目 开源侧边栏 :me.tangke.slidemenu 开源动画:nineoldandroids-2.4.0.jar 在项目里我使用的是左边activity,右边activity的样式,activityGroup的方式,如果全用Fragment也是一样的,只要获取Fragment的rootView即可; 滑动时用me.tangke.slidemenu是为获取拖动屏幕的比例,其他的菜单栏也可以使用,只是加个动画; 界面所有逻辑代码不动,使用nineoldandroids

Android ViewPager和Fragment实现顶部导航界面滑动效果

在项目中,我们常常需要实现界面滑动切换的效果.例如,微信界面的左右滑动切换效果.那这种效果是怎么实现的?今天我就带大家简单了解ViewPager,并通过实例来实现该效果. 一. ViewPager 官方API 首先我们来看一下ViewPager官方给出的解释,如图: 具体意思如下: Layout 管理器允许用户可以在页面上,左右滑动来翻动页面.你可以考虑实现PagerAdapter接口来显示该效果. ViewPager很多时候会结合Fragment一块使用,这种方法使得管理每个页面的生命周期变得

【转】Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果--不错

原文网址:http://blog.csdn.net/xiaanming/article/details/10163203 转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一张图片中扫一下竟然能直接加好友,不可思议啊,那时候还不了解二维码,呵呵,然后做项目的时候,老板说要加上二维码扫描功能,然后自己的屁颠屁颠的去百度,google啥的,发现

Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果

了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能.自己感觉挺新颖的,从一张图片中扫一下居然能直接加好友,不可思议啊,那时候还不了解二维码.呵呵,然后做项目的时候.老板说要加上二维码扫描功能.然后自己的屁颠屁颠的去百度,google啥的.发现非常多朋友都有介绍二维码扫描的功能,然后我就跟着人家的介绍自己搞起了二维码扫描功能,跟着人家的帖子,非常快我的项目就增加了扫描二维码的功能,然后自己还非常开心. 随着微信的到来,二维码越来越火爆,随处能看到二维码,比方商城里面,肯德基,餐厅等等.对于

基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果

随着微信的到来,二维码越来越火爆,随处能看到二维码,比如商城里面,肯德基,餐厅等等,对于二维码扫描我们使用的是google的开源框架Zxing,我们可以去http://code.google.com/p/zxing/下载源码和Jar包,之前我项目中的二维码扫描功能只实现了扫描功能,其UI真的是其丑无比,一个好的应用软件,其UI界面也要被大众所接纳,不然人家就不会用你的软件啦,所以说应用软件功能和界面一样都很重要,例如微信,相信微信UI被很多应用软件所模仿,我也仿照微信扫描二维码效果进行模仿,虽然