Android Studio精彩案例(一)《ActionBar和 ViewPager版仿網易新聞客戶端》
轉載本專欄文章,請註明出處,尊重原創 。文章部落格地址:道龍的部落格
為了能更好的分享高質量的文章,所以開設了此專欄。文章程式碼都以Android Studio親測執行,讀者朋友可在後面直接下載原始碼。該專欄是基於Android Studio的精彩案例和一些中高階知識的心得,以及在公司實際開發中遇到的問題等。同時為了保證文章的條理性、高質量性,本專欄的文章更新頻率可能比較慢,想看基礎性文章可參見博主其它專欄的文章。喜歡我的朋友可以關注我,期待朋友們的關注和指正,大家一起交流學習技術,共同進步。
本篇文章是根據以前一位博主一篇《Android 開源框架ActionBarSherlock 和 ViewPager 仿網易新聞客戶端》地址:http://blog.csdn.net/xiaanming/article/details/9971721 的修改版。那篇文章的程式碼邏輯是有問題的,也是在eclipse中開發的,但實際放到eclipse中並不能執行。所以本人對此做了優化,同時防到AS中執行,又做了一些改進,比如AS使用ActionBarSherlock
咱先來看看網易新聞客戶端長得啥樣子:
PS:這個頁面是可以通過很多技術手段來完成它的。今天這篇是使用ActionBar+ViewPage+Fragment罷了。
那麼就讓咱們慢慢來把這個框架搭建起來吧~
首先,我們需要新建一個AS工程,並新增入對應的V7包依賴。AS預設就新增好的
我們看看主要程式碼的編寫:
1.先看佈局檔案,裡面一個ViewPager,非常簡單
<RelativeLayout 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="@android:color/white"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </RelativeLayout>
2.MainActivity程式碼,點選ActionBar的Tab,ViewPager切換不同的Fragment,滑動ViewPager,選中相對應的ActiionBar Tab
public class MainActivity extends AppCompatActivity implements ActionBar.TabListener, ViewPager.OnPageChangeListener { /** * 頂部Tab的title */ private String[] mTabTitles; /** * ViewPager物件的引用 */ private ViewPager mViewPager; /** * 裝載Fragment的容器,我們的每一個介面都是一個Fragment */ private List<Fragment> mFragmentList = new ArrayList<Fragment>(); /** * ActionBar物件的引用 */ private ActionBar mActionBar; private ActionBar.Tab tab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mViewPager = (ViewPager) findViewById(R.id.viewPager); initActionBar(); // 設定監聽 mViewPager.setOnPageChangeListener((ViewPager.OnPageChangeListener) this); } private void initActionBar() { /************ 初始化actionBar元件 ******************/ // 獲取Action例項我們使用getSupportActionBar()方法 mActionBar = getSupportActionBar(); // 隱藏Title mActionBar.setDisplayShowTitleEnabled(false); // 隱藏Home logo mActionBar.setDisplayShowHomeEnabled(false); // 設定ActionBar的導航模式為Tab mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // 從資原始檔在獲取Tab的title mTabTitles = getResources().getStringArray(R.array.tab_title); // 為ActionBar新增Tab並設定TabListener for (int i = 0; i < mTabTitles.length; i++) { tab = mActionBar.newTab(); tab.setText(mTabTitles[i]);// 設定tab名稱 tab.setTabListener(this);// 設定tab的監聽器 mActionBar.addTab(tab, i);// 新增tab,根據位置 } // 將Fragment加入到List中,並將Tab的title傳遞給Fragment for (int i = 0; i < mTabTitles.length; i++) { Fragment fragment = new ItemFragment(); //向fragment傳遞資料的方法 Bundle args = new Bundle(); args.putString("arg", mTabTitles[i]); fragment.setArguments(args);// 向fragment傳遞引數,使用fragment.setArguments(args);資料不會丟失 mFragmentList.add(fragment);//fragment集合 } // 設定Adapter,設定Adapter一定保證有資料來源,Adapter繫結資料完畢 mViewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager(), mFragmentList)); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { // 滑動ViewPager的時候設定相對應的ActionBar Tab被選中 mActionBar.setSelectedNavigationItem(position); } @Override public void onPageScrollStateChanged(int state) { } @Override public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) { // 點選ActionBar Tab的時候切換不同的Fragment介面 mViewPager.setCurrentItem(tab.getPosition());//引數:當前tab的位置 } @Override public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) { } @Override public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) { } }
我們使用ActionBar的時候不再是繼承Activity,而是繼承ActionBarActivity,或者他的父類AppCompatActivity類,我們不能隨便設定Activity的theme,以後我們要全屏顯示的時候直接設定android:theme="@android:style/Theme.Black.NoTitleBar",我們使用ActionBar就不能這樣設定了,並且不能隨便設定他的Theme,必須是Theme.Sherlock.Light,或者是他們的子樣式,不然就會出java.lang.IllegalStateException異常,所以為了自定義ActionBar的Tab,我們必須修改其style。在清單檔案,你需要修改掉。
3.ViewPager的介面卡TabPagerAdapter,因為我們用到Fragment,所以我們繼承FragmentStatePagerAdapter而不是PagerAdapter
public class TabPagerAdapter extends FragmentStatePagerAdapter {
private List<Fragment> list;
public TabPagerAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.list = list;
}
@Override
public Fragment getItem(int arg0) {
return list.get(arg0);
}
@Override
public int getCount() {
return list.size();
}
}
4.ItemFragment 可以直接繼承Fragment,裡面的的佈局比較簡單,一個TextView用來顯示從Activity傳遞過來的ActionBar Tab的title
public class ItemFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View contextView = inflater.inflate(R.layout.fragment_item, container, false);
TextView mTextView = (TextView) contextView.findViewById(R.id.textview);
Bundle mBundle = getArguments();
String title = mBundle.getString("arg");
mTextView.setText(title);
return contextView;
}
}
然後我們將上面的Activity的theme設定成android:theme="@style/Theme.Sherlock.Light" 執行專案看看效果:
我們可以看到,核心的效果其實已經做出來了。感興趣的朋友可以下載原始碼自己修改一下樣式~在這個Fragment流行的時代,使用這樣方式也是不錯的選擇嘛~趕快下載跑起來吧~~
喜歡我的朋友可以關注我。
也可以開啟微信搜尋公眾號 Android程式設計師開發指南 或者手機掃描下方二維碼 在公眾號閱讀更多Android文章。
微信公眾號圖片: