实现
XML主布局
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="@+id/viewPager"
app:layout_constraintEnd_toEndOf="@+id/viewPager"
app:layout_constraintStart_toStartOf="@+id/viewPager"
app:layout_constraintTop_toTopOf="@+id/viewPager"
app:layout_constraintVertical_bias="0.86">
<ImageView
android:id="@+id/dot_1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="5dp"
/>
<ImageView
android:id="@+id/dot_2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_margin="5dp"
/>
<ImageView
android:id="@+id/dot_3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="5dp"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
主要布局为Viewpager 和里面的LinearLayout中的ImageView,用RelativeLayout亦可;
准备3个View
<?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">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="100dp"
android:gravity="center_horizontal"
android:text="--1--"
android:textSize="34sp" />
</LinearLayout>
只有text里的文字不同
PagerAdapter
package com.aaa_xcdq.cthreeday;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import java.util.List;
public class MyPagerAdapter extends PagerAdapter {
private List<View> views;
private Context context;
public MyPagerAdapter(List<View> views, Context context) {
this.views = views;
this.context = context;
}
//获得viewpager中有多少个view
@Override
public int getCount() {
return views.size();
}
//判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是 代表的同一个视图
// (即它俩是否是对应的,对应的表示同一个View),通常我们直接写 return view == object!
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view==object;
}
//①将给定位置的view添加到ViewGroup(容器)中,创建并显示出来 ②返回一个代表新增页面的Object(key),
// 通常都是直接返回view本身就可以了,当然你也可以 自定义自己的key,但是key和每个view要一一对应的关系
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
container.addView(views.get(position));
return views.get(position);
}
//移除一个给定位置的页面
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView(views.get(position));
}
}
主Activity
package com.aaa_xcdq.cthreeday;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private List<View> views;
private MyPagerAdapter pagerAdapter;
private ImageView dot1,dot2,dot3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager=findViewById(R.id.viewPager);
initView();
}
private void initView() {
//每个小点
dot1=findViewById(R.id.dot_1);
dot2=findViewById(R.id.dot_2);
dot3=findViewById(R.id.dot_3);
//把第一个设置亮其他为暗
setDot(true,false,false);
//得到view数据
views=new ArrayList<>();
LayoutInflater inflater=getLayoutInflater();
views.add(inflater.inflate(R.layout.view_1,null,false));
views.add(inflater.inflate(R.layout.view_2,null,false));
views.add(inflater.inflate(R.layout.view_3,null,false));
//创建Adapter
pagerAdapter=new MyPagerAdapter(views,this);
viewPager.setAdapter(pagerAdapter);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//当页面滑动时
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//当页面选中时
@Override
public void onPageSelected(int position) {
switch (position){
case 0:
setDot(true,false,false);
break;
case 1:
setDot(false,true,false);
break;
case 2:
setDot(false,false,true);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//小点的变化方法,为true时背景设亮,为false时背景设暗
private void setDot(boolean a,boolean b,boolean c){
if (a){
dot1.setBackgroundResource(R.drawable.point_on);
}else {
dot1.setBackgroundResource(R.drawable.point_off);
}
if (b){
dot2.setBackgroundResource(R.drawable.point_on);
}else {
dot2.setBackgroundResource(R.drawable.point_off);
}
if (c){
dot3.setBackgroundResource(R.drawable.point_on);
}else {
dot3.setBackgroundResource(R.drawable.point_off);
}
}
}