我们在平时使用ViewPager肯定都看到过他的下方使用一连串的小圆点一样的指示器
就像这图一样,今天我们就是用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:
当然就是这样的一个圆了!
最后附上我项目中使用改方法实现的源码了
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);
}
}