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

 

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

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

新建一個項目

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

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

然后是對默認界面進行選擇，這里我們選擇空白的activity 就好。

一路點擊NEXT，我們就制作好了一個可以運行的Android程序，我們會看到如下的界面。

 

簡單介紹安卓編程

左邊就是你的閱讀應用的項目目錄，不同的文件夾里存放着不同的文件，上圖已經進行了粗略的描述，如果有什么不清楚的地方，大家還請移步搜索引擎。

 

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

1 public class MainActivity extends AppCompatActivity {
2 
3     @Override
4     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.ViewPager
14         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。

    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;
        }

    }

 

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

 

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

 

---

 

第三步 創建ViewPager的適配器

 

 

    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();
        }

    }

 

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

 

---

 

 

最后 整合

 

下面來看MainActivity的onCreat函數。

    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);
    }

 

在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 實現分類排行榜界面的編寫，敬請期待！！！