ViewPager的下方小圆点指示器(使用LinearLayout实现)

我们在平时使用ViewPager肯定都看到过他的下方使用一连串的小圆点一样的指示器ViewPager的下方小圆点指示器(使用LinearLayout实现)_第1张图片

就像这图一样,今天我们就是用LinearLayout来实现这个指示器吧(直接上代码了)

//可以通过在LinearLayout中填充自己画的小圆点,然后随着ViewPager的移动切换背景颜色实现
    //1.填充小圆点
       private void getcircle(){
           View view;
            for(int i=0;i<4;i++){
                view=new View(this);
                view.setBackgroundResurce(R.drawable.background);//自己在Drawable文件夹目录下写的xml文件
                view.setEnabled(false);
                LinearLayout.Layoutparams params=new LinearLayout.Layoutparams(30,30);
                //设置间隔
                if(i!=0){
                    params.leftmargin=10;  //如果不是第一个,就设置左边距为10dp
                }
                ll.addView(view,params);//ll是在xml文件中装原点的LinearLayout的id;
            }
       }
    //2。将小圆点和Viewpager绑定
        vp.addPageChangeListenter(this);//监听Viewpager的界面切换事件
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            //todo 控制小圆点的位置,
            @Override
            public void onPageSelected(int position) {
                ll.getChildAt(mCurrentIndex).setEnabled(false);
                ll.getChildAt(position).setEnabled(true);
                mCurrentIndex = position;         //mCurrentIndex指的是当前的小圆点的位置
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
当然作为小圆点的背景图 background.xml文件也是很重要的,所以在这里就来画一下这个:
  background.xml:
                
                
                
                
                
//清楚地知道这就是个简单的选择器

//在选择器我们选择两种小圆点的样式:
                enable.xml:

            
            
            
            
            
            

            
            
             disable.xml:
           

            
            
            
            
            

            

ViewPager的下方小圆点指示器(使用LinearLayout实现)_第2张图片

当然就是这样的一个圆了!

最后附上我项目中使用改方法实现的源码了


package com.example.lancer.matchreview;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.example.lancer.matchreview.fragment.EnvLineFragment.AirFragment;
import com.example.lancer.matchreview.fragment.EnvLineFragment.Co2Fragment;
import com.example.lancer.matchreview.fragment.EnvLineFragment.HumidityFragment;
import com.example.lancer.matchreview.fragment.EnvLineFragment.LightFragment;

import java.util.ArrayList;

public class EnvLineChartActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager vp;
    private LinearLayout llContainer;
    private ArrayList fragments;
    private FragmentManager fm;
    private int mCurrentIndex = 0;//当前小圆点的位置
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_envlinechart);
        initView();
        initData();
    }

    private void initData() {
        fragments = new ArrayList<>();
        fm = getSupportFragmentManager();
        getData();
        initFragment();
        Myadapter myadapter = new Myadapter(fm);
        vp.setAdapter(myadapter);
        //todo 初始化第一个小圆点
        llContainer.getChildAt(0).setEnabled(true);
        vp.addOnPageChangeListener(this);
    }

    //初始化Fragment
    private void initFragment() {
        AirFragment airFragment = new AirFragment();
        HumidityFragment humidityFragment = new HumidityFragment();
        LightFragment lightFragment = new LightFragment();
        Co2Fragment co2Fragment = new Co2Fragment();
        fragments.add(airFragment);
        fragments.add(humidityFragment);
        fragments.add(lightFragment);
        fragments.add(co2Fragment);
    }

    //todo 添加小圆点的方法
    private void getData() {
        View view;
        for (int i = 0; i < 4; i++) {
            //创建底部指示器(小圆点)
            view = new View(EnvLineChartActivity.this);
            view.setBackgroundResource(R.drawable.background);
            view.setEnabled(false);
            //设置宽高
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(30, 30);
            //设置间隔
            if (i != 0) {
                layoutParams.leftMargin = 10;
            }
            //添加到LinearLayout
            llContainer.addView(view, layoutParams);
        }
    }

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

    }
//todo 控制小圆点的位置
    @Override
    public void onPageSelected(int position) {
        llContainer.getChildAt(mCurrentIndex).setEnabled(false);
        llContainer.getChildAt(position).setEnabled(true);
        mCurrentIndex = position;
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
//viewpager的适配器
    public class Myadapter extends FragmentPagerAdapter {
        public Myadapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

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

    private void initView() {
        vp = findViewById(R.id.vp);
        llContainer = findViewById(R.id.ll_container);
    }
}


    

    
    



你可能感兴趣的:(ViewPager的下方小圆点指示器(使用LinearLayout实现))