ViewPager滑动页面

先来两效果图
这里写图片描述 这里写图片描述

这是最简单的滑动切换 适用初学者

第一步:布局

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

     <!-- 这里是显示页面的 没有初始化 什么都不会有 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white" >
    </android.support.v4.view.ViewPager>

     <!-- 这里是小圆点布局 -->
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/viewGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="50.0dp"
            android:gravity="center"
            android:orientation="horizontal" >
        </LinearLayout>
    </RelativeLayout>

</FrameLayout>

下面是需要切换的页面布局

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

    <TextView
        android:layout_centerInParent="true"
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="layout1" />

</RelativeLayout>
<?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:orientation="vertical" >

    <TextView
        android:layout_centerInParent="true"
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="layout2" />
</RelativeLayout>

第二步:MyAdapter

public class MyAdapter extends PagerAdapter{

    private List<View> mListViews;  

    public MyAdapter(List<View> mListViews) {    
        this.mListViews = mListViews;//构造方法,参数是我们的页卡,这样比较方便。     
    }    

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
         container.removeView(mListViews.get(position));//删除页卡  
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {//这个方法用来实例化页卡
        container.addView(mListViews.get(position), 0);//添加页卡     
        return mListViews.get(position); 
    }

    @Override
    public int getCount() {
        return  mListViews.size();//返回页卡的数量   
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0==arg1;
    }


}

第三步:MainActivity

public class MainActivity extends Activity {


    private View view1,view2;
    private List<View> viewList;
    private ImageView[] img;
    ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    public void init(){
        mViewPager = (ViewPager) this.findViewById(R.id.viewpager);

        LayoutInflater lf=LayoutInflater.from(this);

        view1=lf.inflate(R.layout.layout1, null);
        view2=lf.inflate(R.layout.layout2, null);

        viewList=new ArrayList<View>();
        viewList.add(view1);
        viewList.add(view2);

        setImg(viewList);

        mViewPager.setAdapter(new MyAdapter(viewList));
        mViewPager.setOnPageChangeListener(new ViewPagerPageChangeListener());
    }
    //设置图片
    public void setImg(List<View> viewList){
        img = new ImageView[viewList.size()];
        LinearLayout layout = (LinearLayout) findViewById(R.id.viewGroup);
        for (int i = 0; i < viewList.size(); i++) {
            img[i] = new ImageView(MainActivity.this);
            if (0 == i) {
                img[i].setBackgroundResource(R.drawable.on);
            } else {
                img[i].setBackgroundResource(R.drawable.noon);
            }
            img[i].setPadding(0, 0, 20, 0);
            layout.addView(img[i]);
        }
    }
    //滑动事件
    class ViewPagerPageChangeListener implements OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int state) {
        }
        @Override
        public void onPageScrolled(int page, float positionOffset,
                int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int page) {
            //更新图标
            for (int i = 0; i < viewList.size(); i++) {
                if (page == i) {
                    img[i].setBackgroundResource(R.drawable.on);
                } else {
                    img[i].setBackgroundResource(R.drawable.noon);
                }
            }
        }
    }

}

搞定收工

最后附上源码:http://download.csdn.net/detail/laigezao/8923351
(拒绝伸手党,需资源分1分)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值