viewpager实现广告滑动及文字滑动和下方 点的选中状态改变

Posted 2020-09-26

效果如图：

首先说下方的这几个点，这个点不是图片效果，而是android自带的shape画的椭圆，使椭圆的宽高一样，就变成原型，然后设置颜色即可。

这2个点的代码如下：

    红色点的代码

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

    灰色点的代码

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

整体思路：

    1、要展示viewpager,就要先把图片获取，图片是放在drawable-hdpi里的5张图片。

    2、把图片放到一个list里，这个类似listview

    3、利用viewpager的适配器，展示图片

    4、在图片的适配器里根据位置加载每个图片资源，同时把图片下方的文字和选中的点显示

    5、同时在适配器里要销毁已经隐藏的图片占用的资源

    6、截止上一步，已经可以滑动图片了，但是图片滑动时，文字和点没有跟着变化，此时需要利用viewpage人的滑动监听，来处理文字变化和点的变化

    7、viewpager有一个

viewpager.addOnPageChangeListener(new MyOnPageChangeListener());

        监听，就new一个内部类，在内部类里通过图片滑动时的回调方法来实现。具体代码如下

MainActivity.java

package com.yuanlp.viewpager;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";

    private ViewPager viewpager;
    private TextView tv_title;
    private LinearLayout ll_point_group;

    private List<ImageView> imageviews;  //存放imageview的集合，以便后期放入pageadapter中

    //图片资源ID
    private final int[] imageIDs={
            R.drawable.a,
            R.drawable.b,
            R.drawable.c,
            R.drawable.d,
            R.drawable.e
    };

    //图片标题集合
    private final String[] imageDescriptions={
            "硅谷拔河比赛",
            "凝聚你我，放飞梦想",
            "抱歉，满座了",
            "七月热浪滔天",
            "加油努力学习"
    };


    //上一次点位高亮显示的位置
    private int prePosition=0;


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

        viewpager= (ViewPager) findViewById(R.id.viewpager);
        tv_title= (TextView) findViewById(R.id.tv_title);
        ll_point_group= (LinearLayout) findViewById(R.id.ll_point_group);

        imageviews=new ArrayList<ImageView>();
        MyPagerAdapter pagerAdapter=new MyPagerAdapter();
        for (int i=0;i<imageIDs.length;i++){
            //在这里把image一个一个new出来
            ImageView imageView=new ImageView(this);

            //这里引用图片设置为背景而不是src，是因为src可能会导致填充不完全
            imageView.setBackgroundResource(imageIDs[i]);

            //添加到集合
            imageviews.add(imageView);


            //添加点
            ImageView point=new ImageView(this);
            point.setBackgroundResource(R.drawable.selectors);
            LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(8,8);  //2个参数是宽和高
            if (i==0){
                point.setEnabled(true); //默认第0个显示红色选中
            }else{
                point.setEnabled(false); //其他为灰色
                params.leftMargin=8;    //设置和左边的为8个像素的间距
            }


            point.setLayoutParams(params);
            //添加到线性布局里
            ll_point_group.addView(point);

        }
        viewpager.setAdapter(pagerAdapter);

        //设置viewpage页面滑动的监听
        viewpager.addOnPageChangeListener(new MyOnPageChangeListener());

        //设置默认文本时第0个文本内容
        tv_title.setText(imageDescriptions[prePosition]);
    }

    /**
     * 页面滑动监听类
     */
    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{

        /**
         * 页面滚动时，回调该方法
         * @param position  当前的页面位置
         * @param positionOffset  滑动了页面的百分之多少
         * @param positionOffsetPixels  //屏幕上滑动了多少个像素
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        /**
         * 当某个页面被选中了的时候回调，即焦点图片
         * @param position  焦点图片的位置
         */
        @Override
        public void onPageSelected(int position) {
            //设置文本变化
            tv_title.setText(imageDescriptions[position]);

            //把上一个高亮的为灰色，把当前的设置为红色
            ll_point_group.getChildAt(prePosition).setEnabled(false);

            ll_point_group.getChildAt(position).setEnabled(true);
            prePosition=position;

        }

        /**
         * 滑动的过程中回调,状态的变化
         * 静止到滑动，滑动到静止，静止到拖拽
         * @param state
         */
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
    class MyPagerAdapter extends PagerAdapter{

        @Override
        /**
         * 得导图片总数
         */
        public int getCount() {
            return imageviews.size();
        }

        /**
         * 相当于getview方法，
         * @param container  本质上是viewpage人自身
         * @param position   当前实例化页面的位置
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {

            ImageView imageView = imageviews.get(position);

            Log.e(TAG, "instantiateItem: 当前的位置"+position+"--------"+imageView);
            container.addView(imageView);  //添加到viewpager中
            return imageView;
        }


        /**
         * 比较view和object是否是同一个实例
         * @param view  页面
         * @param object 是上面的方法instantiateItem返回的结果
         * @return
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
         return view==object;

        }


        /**
         * 释放资源
         * @param container  是viewpager
         * @param position    要释放的位置
         * @param object       要释放的页面
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {

            container.removeView((View) object);
            Log.e(TAG, "destroyItem: 释放资源的位置"+position+"-------object");
        }
    }
}

本文出自 “YuanGuShi” 博客，请务必保留此出处http://cm0425.blog.51cto.com/10819451/1944598