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

時間 2019-11-13

標籤新建項目使用 viewpager 實現一個 android 電子書閱讀 app 欄目 Android 简体版

原文原文鏈接

本章結尾處已放出應用DEMO，已經實現全部本文及後續文章所述所有功能，你們能夠先下載下來玩玩看，歡迎在本文下方評論，小方很須要鼓勵支持！！！html

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

新建一個項目編程

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

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

而後是對默認界面進行選擇，這裏咱們選擇空白的activity 就好。ide

一路點擊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。

 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         @Override
23         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         @Override
13         public Fragment getItem(int position) {
14             return datas == null ? null : datas.get(position);
15         }
16 
17         @Override
18         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();
        }

    }

}