viewpager

1  主页面布局   viewpager 控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.test.httputilstest.Main4Activity">
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pt_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </android.support.v4.view.ViewPager>

    <TextView
        android:id="@+id/image_desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:background="#30f0"
        android:gravity="center"
        android:text="我是描述信息"
        android:textColor="#f00"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btn_start"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="100dp"
        android:background="@null"
        android:text="  开 始 体 验  "
        android:textSize="13sp"
        android:visibility="gone"/>


    <RelativeLayout
        android:id="@+id/point"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp" >

        <LinearLayout
            android:id="@+id/ll_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" />

        <View
            android:id="@+id/view_red_point"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/shape_point_red" />
    </RelativeLayout>


</RelativeLayout>

2 drawable    布局内控件的大小在页面上设置  这里无需写size。自定义的红点控件需要定义size

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

</ shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />
    <size
        android:width="20dp"
        android:height="20dp" />

</shape>

3activity

package com.test.httputilstest;

import android.annotation.TargetApi;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import org.xutils.view.annotation.Event;
import org.xutils.view.annotation.ViewInject;
import org.xutils.x;

import java.util.ArrayList;
import java.util.List;

public class Main4Activity extends AppCompatActivity implements ViewPager.OnPageChangeListener,ViewTreeObserver.OnGlobalLayoutListener {

    @ViewInject(R.id.vp)
    private ViewPager vp;
    @ViewInject(R.id.point)
    private RelativeLayout point;
    @ViewInject(R.id.ll_point_group)
    private LinearLayout ll_point_group;
    @ViewInject(R.id.image_desc)
    private TextView image_desc;
    @ViewInject(R.id.pt_title)
    private PagerTitleStrip pt_title;
    @ViewInject(R.id.btn_start)
    private Button btn_start;
    @ViewInject(R.id.view_red_point)
    private View view_red_point;

    private MyPagerAdapter mAdapter;
    private List<ItemBean> itemList = new ArrayList<ItemBean>();
    public static final int MARGIN_BETWEEN_POINTS = 30;
    /*小红点移动的距离*/
    private int mPointWidth;

    private Handler mHandler = new Handler() {
        public void handleMessage(Message msg) {
            if (vp.getCurrentItem() == itemList.size()-1){
                vp.setCurrentItem(0);
            }else{
                vp.setCurrentItem(vp.getCurrentItem() + 1);//让viewPager 滑动到下一页
            }

            mHandler.sendEmptyMessageDelayed(0, 3000);//接收到消息后再发一条消息，于是一个死循环诞生了
        };
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main4);
        x.view().inject(this);
        itemList.add(new ItemBean(R.drawable.a,"a"));
        itemList.add(new ItemBean(R.drawable.b,"b"));
        itemList.add(new ItemBean(R.drawable.c,"c"));
        for (int i = 0;i<itemList.size();i++){
            /*给每一个point添加布局，包括左右边距*/
            View point = new View(this);
            point.setBackgroundResource(R.drawable.shape_point_gray);
            /*params(20,20)定义圆点的大小*/
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);
            /*圆点的左右边距*/
            params.leftMargin = MARGIN_BETWEEN_POINTS;
            params.rightMargin = MARGIN_BETWEEN_POINTS;
            point.setLayoutParams(params);
            /*把每一个point添加进线性布局*/
            ll_point_group.addView(point);
        }
        mAdapter = new MyPagerAdapter(this,itemList);
        vp.setAdapter(mAdapter);
        /*viewpager左右滑动*/
        vp.addOnPageChangeListener(this);
        /*设置viewpager定位到某个页面*/
        vp.setCurrentItem(0);
        mHandler.sendEmptyMessageDelayed(0, 3000);//3秒后发送空消息
        /*view的组件布局要在onResume回调后完成，所以在onCreat中无法getWidth，getHeigt，该方法用来获得宽度和高度*/
        point.getViewTreeObserver().addOnGlobalLayoutListener(this);

    }


    @Event(type = View.OnClickListener.class,value = R.id.button)
    private void onClick(View  view){
        switch (view.getId()){
            case R.id.btn_start:
                break;

        }
    }

    @Event(type = View.OnTouchListener.class,value = R.id.vp)
    private boolean onTouch(View v, MotionEvent event){
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                mHandler.removeCallbacksAndMessages(null);// 删除Handler中的所有消息
                break;
            case MotionEvent.ACTION_UP:
                mHandler.sendEmptyMessageDelayed(0, 3000);
                break;
            case MotionEvent.ACTION_CANCEL:
                mHandler.sendEmptyMessageDelayed(0, 3000);
                break;
            default:
                break;
        }
        return false;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

       /*滑动过程中一直调用此方法 positionOffset 偏移的百分比*/
    position = position%itemList.size();

        int leftMargin;
        if (position == itemList.size()-1){
            leftMargin = position*mPointWidth+MARGIN_BETWEEN_POINTS;
        }else{
            leftMargin = (int)(mPointWidth*positionOffset+position*mPointWidth+MARGIN_BETWEEN_POINTS);
        }
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)view_red_point.getLayoutParams();
        params.leftMargin = leftMargin;
        view_red_point.setLayoutParams(params);
    }

    @Override
    public void onPageSelected(int position) {
    position = position%itemList.size();
        image_desc.setText(itemList.get(position).getTitle());
        if (position == itemList.size()-1){
            btn_start.setVisibility(View.VISIBLE);
        }else{
            btn_start.setVisibility(View.GONE);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @Override
    public void onGlobalLayout() {

        /*将添加的OnGlobalLayoutListener   remove掉*/
        point.getViewTreeObserver().removeOnGlobalLayoutListener(this);//removeGlobalOnLayoutListener(this);废弃了
        //获取小圆点间的距离，即小红点每次移动的距离
        mPointWidth = ll_point_group.getChildAt(1).getLeft() - ll_point_group.getChildAt(0).getLeft();

    }
}

4 adapter

package com.test.httputilstest;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.List;

/**
 * Created by 27733 on 2016/9/19.
 */
public class MyPagerAdapter extends PagerAdapter{

    Context context;
    List<ItemBean> itemList;
    MyPagerAdapter(Context context, List<ItemBean> itemList){
        this.context = context;
        this.itemList = itemList;
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return itemList.get(position).getTitle();
    }

    @Override
    public int getCount() {
        return itemList.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        position = position%itemList.size();
        ImageView imageView = new ImageView(context);
        imageView.setBackgroundResource(itemList.get(position).getImageId());
       /* 动态创建imageview 添加到container*/
        container.addView(imageView);
        return imageView;
    }



    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        position = position%itemList.size();
        container.removeView((View)object);
    }
}