viewpager超简单带指示器的左右滑动

废话前言
以前真的是百度程序员,搬过来直接就用了,但是从没理解过。实在遗憾,也请看到这篇文章的小哥哥小姐姐沉淀下来。viewpager真的不难,主要是viewpager的初始化与事件监听。

准备工作 、一

都知道viewpager可以左右滑动,现在要做的就是把每个要滑动的页面的用xml建起来了

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/one"/>
</LinearLayout>

有几个就新建xml就可以了

准备工作、二
Activity对应布局。

<?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">
    <!-- 切换卡 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.v4.view.ViewPager>
    <!-- 点点 -->
    <LinearLayout
        android:id="@+id/viewGroup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal">
    </LinearLayout>
</RelativeLayout>

需要导入v4包,viewpager主要控件,LinearLayout用来装载指示器。

开干拿下

public class ViewPagerActivity extends Activity{

    private ViewPager viewPager;
    private PagerAdapter adapter;
    private List<View> viewPages = new ArrayList<>();
    //包裹点点的LinearLayout
    private ViewGroup group;
    private ImageView imageView;
    //定义一个ImageVIew数组,来存放生成的小园点
    private ImageView[] imageViews;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_viewpager);
        initView();
        initPageAdapter();
        initPointer();
    }

    private void initPageAdapter() {
        /**
         * 对于这几个想要动态载入的page页面,使用LayoutInflater.inflate()来找到其布局文件,并实例化为View对象
         */
        LayoutInflater inflater = LayoutInflater.from(this);
        View page1 = inflater.inflate(R.layout.viewpager_one, null);
        View page2 = inflater.inflate(R.layout.viewpager_two, null);
        View page3 = inflater.inflate(R.layout.viewpager_three, null);
        //添加到集合中
        viewPages.add(page1);
        viewPages.add(page2);
        viewPages.add(page3);

        adapter = new PagerAdapter() {
            //获取当前界面个数
            @Override
            public int getCount() {
                return viewPages.size();
            }
            //判断是否由对象生成页面
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
            //移除一个view
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(viewPages.get(position));
            }
            //返回一个对象,这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view = viewPages.get(position);
                container.addView(view);
                return view;
            }
        };
        viewPager.setAdapter(adapter);
    }

    //绑定控件
    private void initView() {
        viewPager = findViewById(R.id.viewPager);
        group =  findViewById(R.id.viewGroup);

        //设置监听
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            //页面滑动是执行
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            //页面滑动完成后执行
            @Override
            public void onPageSelected(int position) {
                //判断当前是在那个page,就把对应下标的ImageView原点设置为选中状态的图片
                for (int i = 0; i < imageViews.length; i++) {
                    imageViews[position].setBackgroundResource(R.mipmap.selected);
                    if (position != i) {
                        imageViews[i].setBackgroundResource(R.mipmap.unselect);
                    }
                }
            }
            //监听页面的状态,0--静止 1--滑动  2--滑动完成
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

    //根据页面的个数动态添加圆点指示器
    private void initPointer() {
        //有多少个界面就new多长的数组
        imageViews = new ImageView[viewPages.size()];
        for (int i = 0; i < imageViews.length; i++) {
            //new新的ImageView控件
            imageView = new ImageView(this);
            //设置控件的宽高
            imageView.setLayoutParams(new ViewGroup.LayoutParams(25, 25));
            //设置控件的padding属性
            imageView.setPadding(20, 0, 20, 0);
            imageViews[i] = imageView;
            //初始化第一个page页面的图片的原点为选中状态
            if (i == 0) {
                //表示当前图片
                imageViews[i].setBackgroundResource(R.mipmap.selected);
                /**
                 * 在java代码中动态生成ImageView的时候
                 * 要设置其BackgroundResource属性才有效
                 * 设置ImageResource属性无效
                 */
            } else {
                imageViews[i].setBackgroundResource(R.mipmap.unselect);
            }
            //把new出来的ImageView控件添加到线性布局中
            group.addView(imageViews[i]);
        }
    }

解释都在代码里了,对于程序员还是代码比较直观,可直接复制使用。

参考:http://www.cnblogs.com/RabbitLx/archive/2016/08/07/5745857.html

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ViewPager指示器是用来显示ViewPager当前页面位置的小组件,一般位于ViewPager的底部或顶部。下面给出一个简单ViewPager指示器的实现方法。 首先,我们需要在布局文件中添加一个ViewPager和一个指示器组件,可以使用LinearLayout或RelativeLayout等布局容器。 ``` <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"/> <LinearLayout android:id="@+id/indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:orientation="horizontal"/> </RelativeLayout> ``` 其中,ViewPager的id为view_pager,指示器的id为indicator,指示器使用LinearLayout实现,其中包含若干个ImageView组件。 接下来,我们需要在代码中实现ViewPager指示器的逻辑。具体步骤如下: 1. 在Activity或Fragment中获取ViewPager和指示器组件的引用。 2. 创建一个ImageView数组,长度为ViewPager的页面数量。 3. 遍历ImageView数组,为每个ImageView设置未选中状态的图片,并将其添加到指示器组件中。 4. 监听ViewPager的页面滑动事件,根据页面位置更新指示器的状态。 示例代码如下: ``` private ViewPager mViewPager; private LinearLayout mIndicator; private ImageView[] mImageViews; private void initIndicator() { int count = mViewPager.getAdapter().getCount(); mImageViews = new ImageView[count]; for (int i = 0; i < count; i++) { mImageViews[i] = new ImageView(this); mImageViews[i].setImageResource(R.drawable.indicator_unselected); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); lp.setMargins(10, 0, 10, 0); mIndicator.addView(mImageViews[i], lp); } mImageViews[0].setImageResource(R.drawable.indicator_selected); mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { for (int i = 0; i < mImageViews.length; i++) { mImageViews[i].setImageResource(R.drawable.indicator_unselected); } mImageViews[position].setImageResource(R.drawable.indicator_selected); } @Override public void onPageScrollStateChanged(int state) { } }); } ``` 在initIndicator()方法中,我们首先获取ViewPager和指示器组件的引用,然后创建一个ImageView数组,长度为ViewPager的页面数量。接着,我们遍历ImageView数组,为每个ImageView设置未选中状态的图片,并将其添加到指示器组件中。最后,我们监听ViewPager的页面滑动事件,根据页面位置更新指示器的状态。 注意,这里使用了两种不同的图片作为指示器的状态图,一种是未选中状态的图片,另一种是选中状态的图片。这两种图片可以根据自己的需求进行替换。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值