[Create a project & amp; Use viewPager] to implement an Android e-book reading APP and create a Project Definition

[Create a project & use viewPager] to implement an Android e-book reading APP and create a Project Definition

 

The application DEMO has been released at the end of this chapter. All the functions described in this article and subsequent articles have been implemented. You can download and play them first. Please comment at the bottom of this article, xiao Fang needs encouragement and support !!!

For the final effect of the novel reader, see the previous blog

Create a project

Call ~ We are about to embark on the android development journey. First, we need to create a new project.

After you select to start a new project, a window will be opened for you to set the name of the application (starting with an uppercase letter), and a URL-like things to distinguish different developers, if you have your own domain name, you can directly set it like me (to promote a wave of Small-party websites ~ Http://xfangfang.cn), or set a favorite address.

Then select the default Interface. Here we will select a blank activity.

After clicking NEXT, we have created an Android program that can run. We can see the following interface.

 

Brief Introduction to Android programming

On the left is the project directory for reading the application. Different files are stored in different folders, which have been roughly described. If there is anything unclear, please also move to the search engine.

 

Next, read the content of the MainActivity file carefully.

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 is one of the four major components of Android. It can be simply understood that every interface of the program we run corresponds to an Activity. Therefore, Activity is the main battlefield for code writing, when an activity starts to run, it will call the function we override.OnCreat,In this functionSetContentView (R. layout. activity_main );The layout file is set to provide a display interface for our activities.

The layout file is saved in the layout folder and suffixed with. xml. Let's take a closer look.

Android uses xml files as layout files. A closed bracket represents a component. Some components can be used as containers to hold other components, such as RelativeLayout, to hold TextView, the purpose of using this "Container" is to better compile the android interface, which is applicable to Android devices with different resolutions and screen proportions.

In addition to the code writing interface, android studio also provides another way to set the layout.

In this interface, we only need to drag the mouse to complete the interface design, but unfortunately, the drag method is not omnipotent, programs do not fully understand what humans think. They can do better by dragging components and Directly Writing xml files. Similarly, I will not describe more about the introduction of Android development here. I am not expected to take too much space in the basic part of this tutorial blog. I just want to introduce related concepts, beginners can search online based on different keywords.

 

Start running

Now, we can try to run the current code. You can use a real machine to connect the data cable to your computer for debugging, or use an android virtual machine.

The minor uses the Genymotion virtual machine running program. Click the green arrow in the toolbar above and select a device to run the program on the device.

 

Now, as a beginner, you can try to run your new Android program and change the text of TextView.

 

Use ViewPager

Let's take a look at the final implementation of ViewPager in the finished APP.

 

 

 

Step 1 modify the Layout

The ViewPager object is put together by a small party and can be easily slide and slide. In this way, we need multiple layout files, corresponding to the content of each page in ViewPager, right-click the layout folder, and click New. Select the first Layout resource file to create a layout file. The default Layout file contains LinearLayout, we can place a TextView in it as a different marker for the two interfaces.

, Two new files are created.

 

Next, modify the layout of the main interface and insert ViewPager into the layout.

 

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>

 

So far, the settings of the layout file have been completed, and the MainActivity is modified below.

 

 

 

Step 2 create Fragment

As mentioned before, there are many interfaces on ViewPager. Here, each interface is a Fragment. Fragment can be understood as something similar to Activity, we need to create a Fragment class for each interface to inherit from 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     }

 

Note that the two lines in the above code block are bold. We need to write the names of the two layout files we just created to the specified locations respectively. When the Fragment is created, the onCreatView function is automatically called. No other functions are provided here.

 

Two Fragment instances have been created. We also need to set an adapter for ViewPager.

 

 

Step 3: Create a ViewPager Adapter

 

 

 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     }

 

Here, the adapter serves to pass Fragment to ViewPager. By Rewriting the getItem function, we will pass the datas in SectionsPagerAdapter to ViewPager.

 

 

 

Final Integration

 

Next we will look at the onCreat function of MainActivity.

 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     }

 

Declare ViewPager and its adapter in MainActivity.

Line 9-13 initializes the adapter and adds two Fragment entries to the datas array of the adapter.

I believe everyone can understand the 15 lines, and those who do not understand can search and learn.

Finally, set the adapter for ViewPager.

 

In just a few steps, we have completed the whole process of creating a ViewPager, so that our program can run ~

 

Check whether the prototype of the application is ready. The following describes all the MainActivity code.

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

 

After completing the basic usage of ViewPager, you can practice it by yourself and add different components on the two pages to enjoy Android development.

 

 

 

Finally, I thought about the final implementation of our application, that is, the app in the previous article.

Baidu online storage has no password

 

To be continued... use in the next articleRecyclerViewWriting the classification ranking interface is coming soon !!!