Android ViewPager的简单使用
很久以前写过一篇Android 仿美团网，探索使用ViewPager+GridView实现左右滑动查看更多分类的功能，本篇文章简单一点，也是说ViewPager。有这么一个场景，在同一个Activity中，我们需要通过滑动来展示不同的布局界面，而ViewPager就是由于若干个不同的布局界面组成的。
按照惯例，我们先来看看效果图
接下来我们来看看具体的代码实现：
1、在布局中加入ViewPager。这里有一点需要注意，ViewPager的调用需要使用全名调用，也就是需要写清楚包名路径。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#29292f"
android:orientation="vertical"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="300dp"
android:overScrollMode="never" />
<LinearLayout
android:id="@+id/ll_dot"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" />
LinearLayout>2、 ViewPager的使用显然需要使用Adapter适配器，定义一个ViewPager的适配器ViewPagerAdapter继承PagerAdapter。
package per.lijuan.viewpaper;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
/**
* Created by juan on 2018/06/29.
*/
public class ViewPagerAdapter extends android.support.v4.view.PagerAdapter {
private List mViewList;
public ViewPagerAdapter(List mViewList) {
this.mViewList = mViewList;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mViewList.get(position));
return (mViewList.get(position));
}
@Override
public int getCount() {
if (mViewList == null)
return 0;
return mViewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
} 3、我们要定义ViewPager中显示的不同的布局界面，这里我们定义两个界面：第一个页面是显示一张图片和按钮；第二个页面是显示一段文本和一个按钮。
（1）layout_one.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/tv_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@mipmap/icon_bg"
android:scaleType="fitXY"
android:layout_above="@+id/btn_one"
android:textColor="@android:color/white" />
<Button
android:id="@+id/btn_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:padding="15dp"
android:text="页面一"
android:layout_marginTop="10dp"
android:layout_alignParentBottom="true"
android:textColor="@android:color/white" />
RelativeLayout>（2）layout_two.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#29292f"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_two"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/btn_two"
android:gravity="center"
android:text="Android技术探索"
android:textColor="@color/white" />
<Button
android:layout_alignParentBottom="true"
android:id="@+id/btn_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:padding="15dp"
android:layout_marginTop="10dp"
android:text="页面二"
android:textColor="@android:color/white" />
RelativeLayout>4、在MAinActivity中，通过LayoutInflater加载这两个不同布局的界面， 保存在List中。创建ViewPagerAdapter的对象，然后通过viewPager的对象调用。
package per.lijuan.viewpaper;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private LayoutInflater mInflater;
private ViewPager viewPager;
private ViewPagerAdapter pagerAdapter;
private List views;
private View viewOne;
private View viewTwo;
private LinearLayout mLlDot;
private Button mBtnOne;
private Button mBtnTwo;
/**
* 当前显示的是第几页
*/
private int curIndex = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mInflater = LayoutInflater.from(this);
initView();
setOvalLayout();
}
private void initView() {
viewPager = findViewById(R.id.viewpager);
mLlDot = (LinearLayout) findViewById(R.id.ll_dot);
views = new ArrayList();
viewOne = mInflater.inflate(R.layout.layout_one, null);
viewTwo = mInflater.inflate(R.layout.layout_two, null);
views.add(viewOne);
views.add(viewTwo);
pagerAdapter = new ViewPagerAdapter(views);
viewPager.setAdapter(pagerAdapter);
viewPager.setCurrentItem(curIndex);
viewPager.setOffscreenPageLimit(2);
viewPager.addOnPageChangeListener(this);
mBtnOne = viewOne.findViewById(R.id.btn_one);
mBtnTwo = viewTwo.findViewById(R.id.btn_two);
mBtnOne.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "你点击第一个页面按钮", Toast.LENGTH_SHORT).show();
}
});
mBtnTwo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "你点击第二个页面按钮", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// 取消圆点选中
mLlDot.getChildAt(curIndex)
.findViewById(R.id.v_dot)
.setBackgroundResource(R.drawable.dot_normal);
// 圆点选中
mLlDot.getChildAt(position)
.findViewById(R.id.v_dot)
.setBackgroundResource(R.drawable.dot_selected);
curIndex = position;
}
@Override
public void onPageScrollStateChanged(int state) {
}
/**
* 设置圆点
*/
public void setOvalLayout() {
for (int i = 0; i < views.size(); i++) {
mLlDot.addView(mInflater.inflate(R.layout.dot, null));
}
// 默认显示第一页
mLlDot.getChildAt(0).findViewById(R.id.v_dot)
.setBackgroundResource(R.drawable.dot_selected);
}
}
5、这里边我们还在ViewPager的下方增加了一个布局，用于动态加载小圆点的，当滑动到第几个ViewPager时，就改变第几个圆边的样式：
（1）dot.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<View
android:id="@+id/v_dot"
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:background="@drawable/dot_normal"/>
RelativeLayout>（2）小圆点选中的样式为白色：
dot_selected.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/white" />
<corners android:radius="8dp" />
shape>（3）小圆点未选中的样式为灰色：
dot_normal.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/gray" />
<corners android:radius="8dp" />
shape>好了，本篇文章就这样子了，存在不足的地方还望指导，感谢^_^
源码下载