Overview
For ViewPager, I believe everyone is familiar with it. We use it very frequently in Android development. The guide page when the application starts, the slide of the home page indication label "The last article used ViewPager" and the bottom slide, these Both are masterpieces of ViewPager.
Let ’s talk about the most grounded example. When we newly installed an Android application on the phone and started the interface, there will be some pages that can slide. "If you ca n’t slide, how can you guide you into the application?" ”, These slideable pages can be said to be ViewPager. For a very simple app, you enter the application through Viewpager. For a company, the guide page is simple and rough and perfect, and it has a small effect to display the company ’s logo or related. Information introduction to increase visibility. Of course, some companies use it to advertise. You understand the purpose. Okay, it ’s going to be commercial when it ’s pulled. In fact, these all explain the importance of the guide page. Value determines everything. Okay, let's study how it achieves the sliding effect of the guide page from a technical perspective.
ViewPager is a class in the v4 package. It inherits from ViewGroup. It is actually a container. It is generally used together with Fragment. It more manages the life cycle of Fragment in the page. Similar to ListView, it also has its own adapter, which is used to fill data page. The layout manager allows pages with data to be flipped left and right, and the view we want to display can be displayed by implementing PagerAdapter. This class was actually designed and developed in the early days, and its API may be changed in later updates, and the source code may be changed when they are compiled in the new version.
Renderings
Without further ado, go to the final renderings:
Implementation process
1. Declare ViewPager in the layout, the code is as follows:
<android.support.v4.view.ViewPager
android:id="@+id/mviewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>2. Prepare each Item of the page we need to slide, here I show the code of one page:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/image1">
<Button
android:id="@+id/btn_jump01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="跳过"
android:background="#0e000000"
android:textSize="25sp"
android:textColor="#7033CC"
android:layout_alignParentRight="true"
android:layout_marginTop="35dp" />
</RelativeLayout>Obviously, this is a background image. In this background, we added a Button to skip the subsequent Item and go directly to the next activity. We will implement this function later.
3. Initialize related controls:
// ViewPager
mviewpager=(ViewPager) findViewById(R.id.mviewpager);
// 获取滑动的三个 Item 并加载到一个集合里
view01=View.inflate(this,R.layout.layout_guide_item01,null);
view02=View.inflate(this,R.layout.layout_guide_item02,null);
view03=View.inflate(this,R.layout.layout_guide_item03,null);
mList.add(view01);
mList.add(view02);
mList.add(view03);
// 底部可以滑动的小圆点
point01=(ImageView) findViewById(R.id.point01);
point02=(ImageView) findViewById(R.id.point02);
point03=(ImageView) findViewById(R.id.point03);
// 跳过后面的 Item 并直接进入目的 Activity
btn_jump01=(Button)view01.findViewById(R.id.btn_jump01);
btn_jump02=(Button)view02.findViewById(R.id.btn_jump02);
btn_start=(Button)view03.findViewById(R.id.btn_start);
4. The next step is to realize the core code of the guide page sliding, that is, to set the adapter to the ViewPager to achieve the binding of data and pages.
// 设置适配器
mviewpager.setAdapter(new GuideAdapter());
private class GuideAdapter extends PagerAdapter {
public GuideAdapter() {
super();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager)container).addView(mList.get(position));
return mList.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager)container).removeView(mList.get(position));
// super.destroyItem(container, position, object);
}
@Override
public int getCount() {
return mList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
}Here, a custom Adapter internal class inherits PagerAdapter, and rewrites the four methods of the parent class, which must be implemented. The instantiateItem () method is used to add the layout to the container container and force it to ViewPager;
destroyItem () means destroy an Item
getCount () means get the length of ViewPager, which is the number of pages
5. Set the small dot that slides with the page at the bottom. Well, it was realized when sliding, but from the perspective of aesthetics and psychology, we also want to add a small dot to the bottom of it, so that we can intuitively see the current position.
// 设置Viewpager监听
mviewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
L.i("position"+position);
switch (position){
case 0:
setPointImg(true,false,false);
break;
case 1:
setPointImg(false,true,false);
break;
case 2:
setPointImg(false,false,true);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});We add a page sliding listener to ViewPager. Here we need to rewrite the above three methods, which represent the method to be completed when the page scrolling state is changed when the page scrolling is selected "should be said to be triggered".
5. For the first and second pages, add a Button button that skips the subsequent Item and go directly to the target Activity, and add a button for entering the home page on the third page.
public class GuideActivity extends AppCompatActivity implements View.OnClickListener {
...
// 跳过按鈕
btn_jump01.setOnClickListener(this);
btn_jump02.setOnClickListener(this);
// 进入主页按鈕
btn_start.setOnClickListener(this);
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.btn_start:
startActivity(new Intent(GuideActivity.this, MainActivity.class ));
break;
case R.id.btn_jump01:
startActivity(new Intent(GuideActivity.this, MainActivity.class ));
break;
case R.id.btn_jump02:
startActivity(new Intent(GuideActivity.this, MainActivity.class ));
}
}The code is very simple, implements a View.OnClickListener interface, set up listeners for the activities, and rewrite the onClick () method, and finally click into the MainActivity.
In this way, the entire function is perfectly implemented. Have you got it? Through the above explanations and learning, I believe you must have gained a lot. In the future self-study process, you are welcome to exchange learning with you. If you have any questions or more unique implementation methods, please welcome to discuss and discuss together!
Text: dolphkon
Cover image: from the Internet
PS: The content of this public account is original. If you like it, please pay attention to my public account. "ID: androiddevup" will communicate and progress together in the future learning process. At the same time, welcome to forward and share to the circle of friends. Sharing is also a joy!
