用viewpager+fragment的实现轮播图

//布局文件

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="250dp" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/viewpager"
    android:background="#D3D3D3"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="8dp">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是自定义的viewpager轮播图"
        android:textColor="#0ff" />


    //这里的点是根据图片的多少动态创建的

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

//java代码
public class MainActivity extends AppCompatActivity {

private ViewPager pager;
private TextView textView;
private LinearLayout ll_dot;

//图片的数组资源
private int[] imageResIds = {
        R.drawable.a,
        R.drawable.b,
        R.drawable.c,
        R.drawable.d,
        R.drawable.e,
};

//图片字符串数组资源
private String[] descs = {
        "巩俐不低俗,我就不能低俗",
        "扑树又回来啦!再唱经典老歌引万人大合唱",
        "揭秘北京电影如何升级",
        "乐视网TV版大派送",
        "热血屌丝的反杀",
};

Handler handler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
        super.handleMessage(msg);
        switch (msg.what) {
            case 0:
                pager.setCurrentItem(pager.getCurrentItem() + 1);
                handler.sendEmptyMessageDelayed(0, 1000);

                break;
        }
    }
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //初始化控件
    init();
}

private void init() {
    pager = (ViewPager) findViewById(R.id.viewpager);
    textView = (TextView) findViewById(R.id.text);
    //找到可以设置点的容器LinearLayout的对象,进行点的添加
    ll_dot = (LinearLayout) findViewById(R.id.ll_dot);


    //一.创建一个imageview集合
    final ArrayList<ImageView> imageViews = new ArrayList<>();

    //一.创建一个集合
    for (int i = 0; i < imageResIds.length; i++) {
        //初始化imageview
        ImageView imageView = new ImageView(this);
        //把图片资源添加到imageview对象中去
        imageView.setBackgroundResource(imageResIds[i]);
        //把已经设置好的对象添加到集合中去
        imageViews.add(imageView);

        //二.添加点,根据图片的多少添加多少点
        initDot();

    }
    //一.配置适配器
    pager.setAdapter(new Myadapter(imageViews));

    //三.给viewpager设置监听,让小原点跟图片同步,set的方法因为名字的原因被淘汰了
    pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i1) {
            //通过getcurrentitem方法得到当前用户所交互的viewpager的item
            int newposition = pager.getCurrentItem() % imageViews.size();
            //通过的到这个item给text和点设置选中的状态
            changeTextandDot(newposition);
        }

        @Override
        public void onPageSelected(int i) {

        }

        //和用户交互时,state就是当前viewpager的状态
        @Override
        public void onPageScrollStateChanged(int i) {

// if (i == ViewPager.SCROLL_STATE_IDLE) {
//// handler.sendEmptyMessageDelayed(0, 1000);
//// }else{//不是空闲状态,不让viewpager自行滑动
//// handler.removeMessages(0);
//// }
}
});

    handler.sendEmptyMessage(0);

    //通过viewpager的touchEvent
    pager.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    handler.removeMessages(0);
                    break;
                case MotionEvent.ACTION_MOVE:
                    handler.removeMessages(0);
                    break;
                case MotionEvent.ACTION_UP:
                    handler.sendEmptyMessageDelayed(0, 1000);
                    break;
            }
            return false;
        }
    });
}

//二.创建点
private void initDot() {
    //创建一个view
    View view = new View(this);
    //为这个view设置背景setBackgroundResource
    view.setBackgroundResource(R.drawable.dot_normal);
    //为view对象设置宽高,使用参数对象LayoutParams
    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(15, 15);
    //使用参数对象LayoutParams.leftMargin,想到与padding
    layoutParams.leftMargin = 8;
    //把设置好的layoutParams参数,设置给view
    view.setLayoutParams(layoutParams);
    //添加到控件
    ll_dot.addView(view);
}

//根据viewpager的item的变化,随着图片的切换,文本和点也进行变化
private void changeTextandDot(int position) {
    //根据viewpager的item,设置相对应的text文本
    textView.setText(descs[position]);
    //对点进行判断,拿到点的位置判断与position是否一样
    for (int i = 0; i < imageResIds.length; i++) {
        View childAt = ll_dot.getChildAt(i);
        childAt.setBackgroundResource(i == position ? R.drawable.dot_focus : R.drawable.dot_normal);
    }
}

}

//适配器
public class Myadapter extends PagerAdapter {
private ArrayList imageViews;

public Myadapter(ArrayList<ImageView> imageViews) {
    this.imageViews = imageViews;
}

@Override
public int getCount() {
    return Integer.MAX_VALUE;
}

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

@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
    int i = position % imageViews.size();
    //根据条目所在位子,从imageviews集合中获取相对应的图片
    ImageView imageView = imageViews.get(i);
    //把得到的imageview对象,添加到viewpager,也就是container
    container.addView(imageView);
    return imageView;
}

//要销毁,防止内存泄漏
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
    container.removeView((View) object);
}

}

猜你喜欢

转载自blog.csdn.net/wzj_8899174/article/details/83267823