【转载】Android Metro风格的Launcher开发系列第二篇

前言:

各位小伙伴们请原谅我隔了这么久才开始写这一系列的第二篇博客,没办法忙新产品发布,好了废话不说了,先回顾一下:在我的上一篇博客Android Metro风格的Launcher开发系列第一篇写了如何配置Android开发环境,只是用文字和图片展示了开发Metro风格Launcher的初步设计和产品要求,这一篇文章将会从代码上讲解如何实现对应的UI效果,好了,评书开讲!

Launcher主体框架实现:

Launcher主体框架我选用的是大家所熟悉的ViewPager控件,因为ViewPager可以很容易做pager之间的切换动画,动画是可以自定义的,这样就轻松搞定滑出屏幕的各种效果,也可以控制切换速度,这样就很容易实现如下的效果:

  1. 滑动速度控制:

    这个是通过获取ViewPager的Scroller,对Scroller重新设置一些参数就可以了,具体实现的代码如下:

    [java] view plaincopy

    1. Field Scroller = ViewPager.class.getDeclaredField("mScroller");
    2. Scroller.setAccessible(true);
    3. Interpolator interpolator = new LinearInterpolator();//设置加速器
    4. ViewPagerScroller scroller = new ViewPagerScroller(context,interpolator);//重新设置ViewPager的Scroller
    5. Scroller.set(this, scroller);

    在上面的代码中用到了ViewPagerScroller.java,在ViewPagerScroller中的设置如下,其中的mDuration变量是自定义的动画时间,这个你可以根据自己的动画效果来设置时间长度,我这定义的是500毫秒。

    [java] view plaincopy

    1. @Override
    2. public void startScroll(int startX, int startY, int dx, int dy) {
    3. // Ignore received duration, use fixed one instead
    4. super.startScroll(startX, startY, dx, dy, mDuration);
    5. }
    6. @Override
    7. public void startScroll(int startX, int startY, int dx, int dy, int duration) {
    8. // Ignore received duration, use fixed one instead
    9. super.startScroll(startX, startY, dx, dy, mDuration);
    10. }
  2. Page之间切换效果实现:         每一屏page之间的切换是通过实现ViewPager.PageTransformer接口来实现的,具体这个接口的讲解我这里就不介绍了,大家可以参考google官方文档:Using ViewPager for Screen Slides。我的实现如下所示:

    [java] view plaincopy

    1. class LauncherPageTransformer implements ViewPager.PageTransformer {
    2. private static float DEFAULT_SCALE = 1.0f;
    3. private static float SCALE_FACTOR = 0.30f;// 缩放因子 0.50f
    4. private static float ROTATION_FACTOR = 20f;// 旋转因子
    5. private static float ALPHA_FACTOR = 0.8f;
    6. @Override
    7. public void transformPage(View view, float position) {
    8. if (position <= 1) { // [-1,1]
    9. // Modify the default slide transition to shrink the page as well
    10. if (position < 0) {
    11. // view.setRotationY(position * ROTATION_FACTOR);
    12. view.setScaleX(SCALE_FACTOR * position + DEFAULT_SCALE);
    13. view.setScaleY(SCALE_FACTOR * position + DEFAULT_SCALE);
    14. // view.setAlpha(ALPHA_FACTOR * position + 1.0f);
    15. } else {
    16. // view.setRotationY(position * ROTATION_FACTOR);
    17. view.setScaleX(SCALE_FACTOR * -position + DEFAULT_SCALE);
    18. view.setScaleY(SCALE_FACTOR * -position + DEFAULT_SCALE);
    19. // view.setAlpha(ALPHA_FACTOR * -position + 1.0f);
    20. }
    21. }
    22. }
    23. }

    具体效果可以通过修改旋转和缩放实现。

  3. 左右两侧page悬浮实现:

    主屏幕page两侧page部分显示可以通过设置ViewPager的setPageMargin(int margin)方法实现,具体代码如下:

    [java] view plaincopy

    1. public class LauncherViewPager extends ViewPager {
    2. public static final int PAGE_LIMIT = 3;
    3. public LauncherViewPager(Context context) {
    4. this(context, null);
    5. }
    6. public LauncherViewPager(Context context, AttributeSet attrs) {
    7. super(context, attrs);
    8. init(context);
    9. }
    10. private void init(Context context) {
    11. this.setPageMargin(-getResources().getInteger(R.integer.portal_viewpager_margin));
    12. this.setOffscreenPageLimit(PAGE_LIMIT);
    13. this.setPageTransformer(true, new LauncherPageTransformer());
    14. try {
    15. Field Scroller = ViewPager.class.getDeclaredField("mScroller");
    16. Scroller.setAccessible(true);
    17. Interpolator interpolator = new LinearInterpolator();
    18. ViewPagerScroller scroller = new ViewPagerScroller(context,
    19. interpolator);
    20. Scroller.set(this, scroller);
    21. } catch (NoSuchFieldException e) {
    22. } catch (IllegalArgumentException e) {
    23. } catch (IllegalAccessException e) {
    24. }
    25. }
    26. }
  4. 总结:

    以上就是Launcher主体框架使用ViewPager实现左右滑动和缩放效果讲解,写的不好的地方还请大家指出并批评指正,“三人行必有我师”,任何给我的批评和建议我一定会有回复和交流,可以加我的微信号,更快的交流。         下一篇博客我将会讲解屏幕中每一格CellView实现,有焦点放大效果,实现每一个Focus的CellView悬浮效果和在xml文件中灵活配置关联链接等。

第一时间获得博客更新提醒,以及更多技术信息分享,欢迎关注个人微信公众平台:程序员互动联盟(coder_online),扫一扫下方二维码或搜索微信号coder_online即可关注,我们可以在线交流。

时间: 2024-12-16 11:06:55

【转载】Android Metro风格的Launcher开发系列第二篇的相关文章

Android Metro风格的Launcher开发系列第二篇

前言: 各位小伙伴们请原谅我隔了这么久才开始写这一系列的第二篇博客,没办法忙新产品发布,好了废话不说了,先回顾一下:在我的上一篇博客Android Metro风格的Launcher开发系列第一篇写了如何配置Android开发环境,只是用文字和图片展示了开发Metro风格Launcher的初步设计和产品要求,这一篇文章将会从代码上讲解如何实现对应的UI效果,好了,评书开讲! Launcher主体框架实现: Launcher主体框架我选用的是大家所熟悉的ViewPager控件,因为ViewPager

Android Metro风格的Launcher开发系列第三篇

前言: 各位小伙伴,又到了每周更新文章了时候了,本来是周日能发出来呢,这不是赶上清明节吗,女王大人发话了,清明节前两天半陪她玩,只留给我周一下午半天时间写博客,哪里有女王哪里就有压迫呀有木有!好了闲话少说,上一篇博客(Android Metro风格的Launcher开发系列第二篇)说到Launcher主体框架用ViewPager来实现,这一篇博客咱们来说说每一个page的具体实现. PagerAdapter: Launcher主体ViewPager实现就引出了PagerAdapter,Pager

chromium浏览器开发系列第二篇:如何编译最新chromium源码

说一下为什么这么晚才发第二篇,上周和这周department的工作太多了,晚上都是十点半从公司出发,回家以后实在没有多余的精力去摸键盘了.所以请大家包涵! 上期回顾: chromium源码下载: 1.找个靠谱的vpn(我试过了,网上说的不用vpn拿代码的都不靠谱): 2.获取depot_tools,解压,设置环境变量; 3.gclient获取python和git,svn,设置环境变量: 4.fetch–nohooks chromium –nosvn=true 获取源码: 5.gclientsyn

chromium浏览器开发系列第二篇:如何编译最新chromium

说一下为什么这么晚才发第二篇,上周和这周department的工作太多了,晚上都是十点半从公司出发,回家以后实在没有多余的精力去摸键盘了.所以请大家包涵! 上期回顾: chromium源码下载: 1.找个靠谱的vpn(我试过了,网上说的不用vpn拿代码的都不靠谱): 2.获取depot_tools,解压,设置环境变量; 3.gclient获取python和git,svn,设置环境变量: 4.fetch–nohooks chromium –nosvn=true 获取源码: 5.gclientsyn

chromium浏览器高级开发系列第二篇:如何编译最新chromium源码

说一下为什么这么晚才发第二篇,上周和这周department的工作太多了,晚上都是十点半从公司出发,回家以后实在没有多余的精力去摸键盘了.所以请大家包涵! 上期回顾: chromium源码下载: 找个靠谱的vpn(我试过了,网上说的不用vpn拿代码的都不靠谱): 获取depot_tools,解压,设置环境变量; gclient获取python和git,svn,设置环境变量: fetch–nohooks chromium –nosvn=true 获取源码: gclientsync --force

Android设计和开发系列第二篇:Action Bar(Develop—API Guides)

Action Bar IN THIS DOCUMENT Adding the Action Bar Removing the action bar Using a logo instead of an icon Adding Action Items Handling clicks on action items Using split action bar Navigating Up with the App Icon Adding an Action View Handling collap

Android设计和开发系列第二篇:Action Bar(Develop—Training)

Adding the Action Bar GET STARTED DEPENDENCIES AND PREREQUISITES Android 2.1 or higher YOU SHOULD ALSO READ Action Bar Implementing Effective Navigation DESIGN GUIDE Action Bar The action bar is one of the most important design elements you can imple

Android设计和开发系列第二篇:Action Bar(Design)

Action Bar The action bar is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app. It provides several key functions: Makes important actions prominent and accessible in a predictable way (such as

Android设计和开发系列第二篇:Navigation Drawer(Design)

Navigation Drawer Creating a Navigation Drawer The navigation drawer is a panel that transitions in from the left edge of the screen and displays the app’s main navigation options. Displaying the navigation drawer The user can bring the navigation dr