Android(安卓)ViewPager的简单使用

很久以前写过一篇Android 仿美团网，探索使用ViewPager+GridView实现左右滑动查看更多分类的功能，本篇文章简单一点，也是说ViewPager。有这么一个场景，在同一个Activity中，我们需要通过滑动来展示不同的布局界面，而ViewPager就是由于若干个不同的布局界面组成的。

按照惯例，我们先来看看效果图

接下来我们来看看具体的代码实现：
1、在布局中加入ViewPager。这里有一点需要注意，ViewPager的调用需要使用全名调用，也就是需要写清楚包名路径。

<?xml version="1.0" encoding="utf-8"?><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

<?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">    <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

<?xml version="1.0" encoding="utf-8"?><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

<?xml version="1.0" encoding="utf-8"?><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

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval">    <solid android:color="@color/gray" />    <corners android:radius="8dp" />shape>

好了，本篇文章就这样子了，存在不足的地方还望指导，感谢^_^

源码下载

更多相关文章

随机推荐