Android之仿網易V3.5新特性

來源:互聯網
上載者:User

最近,網易新聞更新到V3.5了,給我印象最深的是第一次進應用時顯示新特性的ViewPager變成垂直滑動了。於是,小小的模仿了一下,我們來看看效果:

本文源碼:http://download.csdn.net/detail/weidi1989/5771921


   

   


其實這是一個很簡單的代碼,一個自訂的ViewPager就可以搞定,引用自JakeWharton的一個開源項目:點擊開啟連結。

這個項目實際上是在ViewPager的基礎上,做了一個擴充,加入了對上下方向滑動的支援,正如項目的名字,使用該項目,可以靈活的改變viewpager的方向,而且僅用一個簡單的屬性設定就可以做到,我只對該項目提供的例子做了一些簡單的改動,就做到了網易新聞這個引導頁的效果。

項目中最主要的部分:

DirectionalViewPager:直接繼承自ViewPager,主要在onInterceptTouchEvent()和onTouchEvent()裡面加入了對於垂直方向滑動的支援.並提供了setOrientation()這個方法,

我們可以同過此方法,直接設定ViewPager的滑動效果,垂直或者是水平

VerticalViewPagerCompat:提供了設定DataSetObserver的方法:setDataSetObserver()

接下來看具體使用的部分:MainActivity

package com.way.newversion;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import com.way.directionalviewpager.DirectionalViewPager;public class MainActivity extends FragmentActivity {private DirectionalViewPager mDirectionalViewPager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// Set up the pagermDirectionalViewPager = (DirectionalViewPager) findViewById(R.id.pager);mDirectionalViewPager.setAdapter(new TestFragmentAdapter(getSupportFragmentManager()));mDirectionalViewPager.setOrientation(DirectionalViewPager.VERTICAL);//設定方向垂直即可。}}

實際應用中,我們直接用DirectionalViewPager代替ViewPager,再設定其滑動方向即可,既可以水平,也可以垂直,一個setOritation直接搞定.

看到了吧,實現上下滑動的效果就這麼簡單.在此不得不致敬JakeWharton這位大牛在開源項目上的貢獻,讓我們這些開發人員受益頗深..



例子中其他部分,我只替換了資源圖片:

我們每個介面都是使用的Fragment,由於通用以及簡潔性,我這裡就只使用一個TestFragment:

package com.way.newversion;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.Button;import android.widget.ImageView;public class TestFragment extends Fragment {private static final String KEY_CONTENT = "TestFragment:Content";private static final String KEY_ISLASTPIC = "TestFragment:IsLastPic";private int mContent;private boolean mIsLastPic;public static TestFragment newInstance(int content, boolean isLastPic) {TestFragment fragment = new TestFragment();fragment.mContent = content;fragment.mIsLastPic = isLastPic;return fragment;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {if ((savedInstanceState != null)&& savedInstanceState.containsKey(KEY_CONTENT)) {mContent = savedInstanceState.getInt(KEY_CONTENT);mIsLastPic = savedInstanceState.getBoolean(KEY_ISLASTPIC);}View root = inflater.inflate(R.layout.fragment_layout, container, false);ImageView iv = (ImageView) root.findViewById(R.id.iv);iv.setImageResource(mContent);Button btn = (Button) root.findViewById(R.id.btn);if (mIsLastPic)btn.setVisibility(View.VISIBLE);elsebtn.setVisibility(View.GONE);return root;}@Overridepublic void onSaveInstanceState(Bundle outState) {super.onSaveInstanceState(outState);outState.putInt(KEY_CONTENT, mContent);outState.putBoolean(KEY_ISLASTPIC, mIsLastPic);}}

接下來是所有fragment的Adapter:

package com.way.newversion;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;class TestFragmentAdapter extends FragmentPagerAdapter {protected static final int[] CONTENT = new int[] {R.drawable.biz_ad_new_version1_img0,R.drawable.biz_ad_new_version1_img1,R.drawable.biz_ad_new_version1_img2,R.drawable.biz_ad_new_version1_img3 };public TestFragmentAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int position) {boolean isLastPic = false;if (position == CONTENT.length - 1)isLastPic = true;return TestFragment.newInstance(CONTENT[position], isLastPic);}@Overridepublic int getCount() {return CONTENT.length;}}

好了,大概就是這樣,有需要的朋友可以下載代碼看看,很簡單的,最後注意一下,我這裡並未實現背景跟隨滑動,加上之後會更加栩栩如生,這個就留給大家了。


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.