ViewPager的下方小圆点指示器（使用LinearLayout实现）
程序员文章站
2022-06-09 20:28:49
...
我们在平时使用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:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/enable" android:state_enabled="true" />
<item android:drawable="@drawable/disable" android:state_enabled="false" />
</selector>
//清楚地知道这就是个简单的选择器
//在选择器我们选择两种小圆点的样式：
enable.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!--红色-->
<solid android:color="#FF3030" />
<!--半径-->
<corners android:radius="10dp" />
</shape>
disable.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!--灰色-->
<solid android:color="@android:color/darker_gray" />
<!--半径-->
<corners android:radius="10dp" />
</shape>当然就是这样的一个圆了！
最后附上我项目中使用改方法实现的源码了
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<Fragment> 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);
}
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.lancer.matchreview.EnvLineChartActivity">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/ll_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40dp"
android:gravity="center"
android:orientation="horizontal"/>
</RelativeLayout>