zoukankan      html  css  js  c++  java
  • Android 仿网易新闻v3.5:上下滑动的引导页

         最近看了下网易新闻月初发布的3.5版,发现两个比较明显的改动:

        1.引导页的修改,变为上下滑动. 2.增加了聚合阅读,里面的动画效果也是蛮有创意的.于是又禁不住模仿一下

    这次先看这个上下滑动的引导页效果图:

                                               

                      

    这种效果具体怎么做呢?

    首先直接上github,直接看有没有相关的开源项目,果不其然,被我找到了:

    https://github.com/JakeWharton/Android-DirectionalViewPager

    这个项目实际上是在ViewPager的基础上,做了一个扩展,加入了对上下方向滑动的支持

    正如项目的名字,使用该项目,可以灵活的改变viewpager的方向,而且仅用一个简单的属性设置就可以做到,我只对该项目提供的例子做了一些简单的改动,就做到了网易新闻这个引导页的效果.

    废话不多说,直接进入正题:

    先看下项目的截图:

    项目中最主要的部分:

    DirectionalViewPager:直接继承自ViewPager,主要在onInterceptTouchEvent()和onTouchEvent()里面加入了对于垂直方向滑动的支持.并提供了setOrientation()这个方法,

    我们可以同过此方法,直接设置ViewPager的滑动效果,垂直或者是水平

    VerticalViewPagerCompat:提供了设置DataSetObserver的方法:setDataSetObserver()

    接下来看具体使用的部分:

    1. MainActivity:  
    MainActivity:

    1. package com.way.verticalguider;  
    2.   
    3. import android.os.Bundle;  
    4. import android.support.v4.app.FragmentActivity;  
    5.   
    6. import com.way.directionalviewpager.DirectionalViewPager;  
    7. import com.way.newversion.R;  
    8.   
    9. public class MainActivity extends FragmentActivity {  
    10.     private DirectionalViewPager mDirectionalViewPager;  
    11.   
    12.     @Override  
    13.     protected void onCreate(Bundle savedInstanceState) {  
    14.         super.onCreate(savedInstanceState);  
    15.         setContentView(R.layout.activity_main);  
    16.         // Set up the pager  
    17.         mDirectionalViewPager = (DirectionalViewPager) findViewById(R.id.pager);  
    18.         mDirectionalViewPager.setAdapter(new TestFragmentAdapter(  
    19.                 getSupportFragmentManager()));  
    20.         <span style="color: rgb(255, 0, 0);">mDirectionalViewPager.setOrientation(DirectionalViewPager.VERTICAL);//设置ViewPager滑动方向</span>  
    21.   
    22.     }  
    23.   
    24. }  

    实际应用中,我们直接用DirectionalViewPager代替ViewPager,再设置其滑动方向即可,既可以水平,也可以垂直,一个setOritation直接搞定.

    看到了吧,实现上下滑动的效果就这么简单.在此不得不致敬JakeWharton这位大牛在开源项目上的贡献,让我们这些开发者受益颇深..

    例子中其他部分,我只替换了资源图片:

    TestFragment:

    1. package com.way.verticalguider;  
    2.   
    3. import com.way.newversion.R;  
    4.   
    5. import android.os.Bundle;  
    6. import android.support.v4.app.Fragment;  
    7. import android.view.LayoutInflater;  
    8. import android.view.View;  
    9. import android.view.ViewGroup;  
    10. import android.widget.Button;  
    11. import android.widget.ImageView;  
    12.   
    13. public class TestFragment extends Fragment {  
    14.     private static final String KEY_CONTENT = "TestFragment:Content";  
    15.     private static final String KEY_ISLASTPIC = "TestFragment:IsLastPic";  
    16.     private int mContent;  
    17.     private boolean mIsLastPic;  
    18.   
    19.     public static TestFragment newInstance(int content, boolean isLastPic) {  
    20.         TestFragment fragment = new TestFragment();  
    21.   
    22.         fragment.mContent = content;  
    23.         fragment.mIsLastPic = isLastPic;  
    24.         return fragment;  
    25.     }  
    26.   
    27.     @Override  
    28.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
    29.             Bundle savedInstanceState) {  
    30.         if ((savedInstanceState != null)  
    31.                 && savedInstanceState.containsKey(KEY_CONTENT)) {  
    32.             mContent = savedInstanceState.getInt(KEY_CONTENT);  
    33.             mIsLastPic = savedInstanceState.getBoolean(KEY_ISLASTPIC);  
    34.         }  
    35.         View root = inflater  
    36.                 .inflate(R.layout.fragment_layout, container, false);  
    37.         ImageView iv = (ImageView) root.findViewById(R.id.iv);  
    38.         iv.setImageResource(mContent);  
    39.         Button btn = (Button) root.findViewById(R.id.btn);  
    40.         if (mIsLastPic)  
    41.             btn.setVisibility(View.VISIBLE);  
    42.         else  
    43.             btn.setVisibility(View.GONE);  
    44.         return root;  
    45.     }  
    46.   
    47.     @Override  
    48.     public void onSaveInstanceState(Bundle outState) {  
    49.         super.onSaveInstanceState(outState);  
    50.         outState.putInt(KEY_CONTENT, mContent);  
    51.         outState.putBoolean(KEY_ISLASTPIC, mIsLastPic);  
    52.     }  
    53. }  

    TestFragmentAdapter:
    1. package com.way.verticalguider;  
    2.   
    3. import com.way.newversion.R;  
    4.   
    5. import android.support.v4.app.Fragment;  
    6. import android.support.v4.app.FragmentManager;  
    7. import android.support.v4.app.FragmentPagerAdapter;  
    8.   
    9. class TestFragmentAdapter extends FragmentPagerAdapter {  
    10.     protected static final int[] CONTENT = new int[] {  
    11.             R.drawable.biz_ad_new_version1_img0,  
    12.             R.drawable.biz_ad_new_version1_img1,  
    13.             R.drawable.biz_ad_new_version1_img2,  
    14.             R.drawable.biz_ad_new_version1_img3 };  
    15.   
    16.     public TestFragmentAdapter(FragmentManager fm) {  
    17.         super(fm);  
    18.     }  
    19.   
    20.     @Override  
    21.     public Fragment getItem(int position) {  
    22.         boolean isLastPic = false;  
    23.         if (position == CONTENT.length - 1)  
    24.             isLastPic = true;  
    25.         return TestFragment.newInstance(CONTENT[position], isLastPic);  
    26.     }  
    27.   
    28.     @Override  
    29.     public int getCount() {  
    30.         return CONTENT.length;  
    31.     }  
    32. }  

    下面是我修改后例子的下载链接:

    http://download.csdn.net/detail/t12x3456/5789713

    其实无论像这种上下滑动引导页的效果,可以有多种方式去实现,在此仅提供不敢说是最优化,但一定是 最便捷的一种方法.

    有时间的话我会再研究下聚合阅读的那个动画效果,在此先记录下, 大家如有好的意见,欢迎讨论.

    如有转载,请声明出处: http://blog.csdn.net/t12x3456

  • 相关阅读:
    oracle行转列
    中国软件开发标准各项文档模板下载(附模版)
    熙熙SQLCE类熙熙
    用反射技术实现将泛型集合类中的数据导出成EXCEL
    WinCE 5.0 中文模拟器SDK(VS2005, VS2008)的配置
    OpenFrameworks x kinect x Android
    Ubuntu11.04软件源增强版
    信号量与自旋锁
    android 编写命令行测试程序
    在 Ubuntu 上换用 OSS4 声音系统
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/5571845.html
Copyright © 2011-2022 走看看