【建立項目&使用viewPager】實現一個Android電子書閱讀APP，建立項目定義

【建立項目&使用viewPager】實現一個Android電子書閱讀APP，建立項目定義

 

本章結尾處已放出應用DEMO，已經實現所有本文及後續文章所述全部功能，大家可以先下載下來玩玩看，歡迎在本文下方評論，小方很需要鼓勵支援！！！

 小說閱讀器最終實現效果見 上一篇博文

建立一個項目

呼～我們即將步入安卓開發之旅了，首先要建立一個項目。

選擇了開始新項目之後，會開啟一個視窗讓你設定應用的名字(大寫字母開頭)，還要設定一個類似網址的東西，用來區別不同的開發人員，如果你有自己的網域名稱可以像我一樣直接設定(宣傳一波小方自己的網站～http://xfangfang.cn)，或者設定一個自己喜歡的地址。

然後是對預設介面進行選擇，這裡我們選擇空白的activity 就好。

一路點擊NEXT，我們就製作好了一個可以啟動並執行Android程式，我們會看到如下的介面。

 

簡單介紹安卓編程

左邊就是你的閱讀應用的項目目錄，不同的檔案夾裡存放著不同的檔案，已經進行了粗略的描述，如果有什麼不清楚的地方，大家還請移步搜尋引擎。

 

下面來仔細閱讀一番MainActivity這個檔案的內容。

1 public class MainActivity extends AppCompatActivity {2 3     @Override4     protected void onCreate(Bundle savedInstanceState) {5         super.onCreate(savedInstanceState);6         setContentView(R.layout.activity_main);7     }8 }

Activity 是安卓的四大組件之一，可以簡單理解為我們啟動並執行程式的每一個介面都對應了一個活動(Activity)，所以活動就是我們寫代碼的主戰場，當一個活動開始運行時，就會調用我們重寫的函數 onCreat ，在這個函數中 setContentView(R.layout.activity_main); 設定了布局檔案，目的是為我們的活動提供一個顯示介面。

布局檔案儲存在layout檔案夾下，以.xml為尾碼，下面我們仔細瞭解一下。 

安卓使用xml檔案作為布局檔案，一個閉合的括弧代表一個組件，有的組件可以作為容器盛放其他的組件，如中的 RelativeLayout，就能盛放 TextView，使用這種"容器"的目的是更好的編寫安卓的介面，適用不同解析度，不同螢幕比例的安卓裝置。

除了使用代碼編寫介面，android studio 還提供了另一種設定布局的方法。

在這個介面下，我們只需要使用滑鼠通過簡單的拖動就能完成介面設計，不過很遺憾，拖動的方法並不是萬能的，程式並不能完全明白人類的想法，使用拖動組件和直接編寫xml檔案相結合才能更好的完成工作。同樣的，在這裡不多加贅述安卓開發入門的知識，小方這次的教程部落格並不預計在基礎部分佔用太多篇幅，只是引入相關概念，初學者可以根據不同的關鍵詞自行上網檢索。

 

開始運行

介紹至此，我們可以嘗試運行一下目前的代碼，可以使用真機串連資料線至電腦進行調試，也可以使用安卓虛擬機器。

小方使用的是 Genymotion 的虛擬機器運行程式，點擊上面工具列中的綠色小箭頭，選擇好裝置就能將程式運行在裝置之中了。

 

現在，身為初學者的你可以試著運行一下你所建立的安卓程式了，還可以試著更改TextView的文字。

 

使用ViewPager

先看一下在成品APP中我們的ViewPager最終的實現效果。

 

 

 

第一步 修改布局

 ViewPager這個東西，在小方看來就是將多個活動放在一起，可以便捷的滑來滑去，這樣說來，我們就需要多個不同的布局檔案，分別對應ViewPager中每一頁的內容，右鍵layout檔案夾，點擊建立，選擇第一項Layout resource file 就能建立一個布局檔案，預設的布局檔案中包含了LinearLayout，咱們可以隨便放裡面一個TextView作為對兩個介面的不同標記。

，建立了兩個檔案。

 

下面開始修改主介面布局，將ViewPager插入到布局之中。

 

activity_main.xml

 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     xmlns:tools="http://schemas.android.com/tools" 4     android:id="@+id/activity_main" 5     android:layout_width="match_parent" 6     android:layout_height="match_parent" 7     android:paddingBottom="@dimen/activity_vertical_margin" 8     android:paddingLeft="@dimen/activity_horizontal_margin" 9     android:paddingRight="@dimen/activity_horizontal_margin"10     android:paddingTop="@dimen/activity_vertical_margin"11     tools:context="cn.xfangfang.reader.MainActivity">12 13     <android.support.v4.view.ViewPager14         android:id="@+id/container"15         android:layout_width="match_parent"16         android:layout_height="match_parent"/>17 18 </RelativeLayout>

 

到此為止，布局檔案的設定內容已經結束，下面開始對MainActivity進行修改。

 

 

 

第二步 建立Fragment

之前說到，ViewPager 上存在著很多介面，這裡每一個介面就是一個Fragment，Fragment可以理解為類似Activity的東西，我們需要為每一個介面建立一個自己的Fragment類繼承自Fragment。

 1     public static class FindBooksFragment extends Fragment { 2  3         public FindBooksFragment() { 4         } 5  6         @Override 7         public View onCreateView(final LayoutInflater inflater, ViewGroup container, 8                                  Bundle savedInstanceState) { 9 10             View rootView = inflater.inflate(R.layout.pager_book_find, container, false);11 12             return rootView;13         }14 15     }16 17     public static class ReadListFragment extends Fragment {18 19         public ReadListFragment() {20         }21 22         @Override23         public View onCreateView(final LayoutInflater inflater, ViewGroup container,24                                  Bundle savedInstanceState) {25 26             View rootView = inflater.inflate(R.layout.pager_book_list, container, false);27 28             return rootView;29         }30 31     }

 

注意上面代碼塊中加粗的兩行，我們需要把自己剛剛建立的兩個布局檔案的名字分別寫到加粗指定的位置，在Fragment被建立的時候，就會自動調用onCreatView函數，這裡暫時先不寫其他功能。

 

建立好了兩個Fragment，我們還需要為ViewPager設定一個適配器。

 

 

第三步 建立ViewPager的適配器

 

 

 1     public class SectionsPagerAdapter extends FragmentPagerAdapter { 2         private ArrayList<Fragment> datas; 3  4         public SectionsPagerAdapter(FragmentManager fm) { 5             super(fm); 6         } 7  8         public void setData(ArrayList<Fragment> datas) { 9             this.datas = datas;10         }11 12         @Override13         public Fragment getItem(int position) {14             return datas == null ? null : datas.get(position);15         }16 17         @Override18         public int getCount() {19             return datas == null ? 0 : datas.size();20         }21 22     }

 

在這裡適配器起到把Fragment傳給ViewPager的作用，通過重寫getItem函數，我們就將 SectionsPagerAdapter 中的datas傳給了ViewPager。

 

 

 

最後 整合

 

下面來看MainActivity的onCreat函數。

 1     private SectionsPagerAdapter mSectionsPagerAdapter; 2     private ViewPager mViewPager; 3  4     @Override 5     protected void onCreate(Bundle savedInstanceState) { 6         super.onCreate(savedInstanceState); 7         setContentView(R.layout.activity_main); 8  9         mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());10         ArrayList<Fragment> datas = new ArrayList<>();11         datas.add(new ReadListFragment());12         datas.add(new FindBooksFragment());13         mSectionsPagerAdapter.setData(datas);14 15         mViewPager = (ViewPager) findViewById(R.id.container);16         mViewPager.setAdapter(mSectionsPagerAdapter);17     }

 

在MainActivity中聲明ViewPager和它的適配器。

9-13行 初始化了適配器，並將兩個Fragment加入到適配器的datas數組中。

15行 相信大家都懂，不懂的同學可以搜尋學習一番。

最後為ViewPager設定適配器。

 

短短几步我們就完成了一個ViewPager的建立全過程，讓我們的程式跑起來～

 

看是不是已經有了咱們閱讀應用的雛形了，下面附上MainActivity的全部代碼。

MainActivity

public class MainActivity extends AppCompatActivity {    private SectionsPagerAdapter mSectionsPagerAdapter;    private ViewPager mViewPager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());        ArrayList<Fragment> datas = new ArrayList<>();        datas.add(new ReadListFragment());        datas.add(new FindBooksFragment());        mSectionsPagerAdapter.setData(datas);        mViewPager = (ViewPager) findViewById(R.id.container);        mViewPager.setAdapter(mSectionsPagerAdapter);    }    public static class FindBooksFragment extends Fragment {        public FindBooksFragment() {        }        @Override        public View onCreateView(final LayoutInflater inflater, ViewGroup container,                                 Bundle savedInstanceState) {            View rootView = inflater.inflate(R.layout.pager_book_find, container, false);            return rootView;        }    }    public static class ReadListFragment extends Fragment {        public ReadListFragment() {        }        @Override        public View onCreateView(final LayoutInflater inflater, ViewGroup container,                                 Bundle savedInstanceState) {            View rootView = inflater.inflate(R.layout.pager_book_list, container, false);            return rootView;        }    }    public class SectionsPagerAdapter extends FragmentPagerAdapter {        private ArrayList<Fragment> datas;        public SectionsPagerAdapter(FragmentManager fm) {            super(fm);        }        public void setData(ArrayList<Fragment> datas) {            this.datas = datas;        }        @Override        public Fragment getItem(int position) {            return datas == null ? null : datas.get(position);        }        @Override        public int getCount() {            return datas == null ? 0 : datas.size();        }    }}

 

完成了ViewPager的初級使用，現在你可以隨意自己練習一番，在兩個頁面中添加不同的組件，感受安卓開發的樂趣。

 

 

 

最後想了想還是附上咱們應用最終的實現，就是上一篇文章那些的那個app。

百度網盤無密碼

 

未完待續...下一篇文章講述使用 RecyclerView 實現分類熱門排行榜介面的編寫，敬請期待！！！