1.activity中的代码
public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener
, View.OnClickListener {
private ViewPager viewPager;
private List<View> views; //用来存放放进ViewPager里面的布局
//实例化存储imageView(导航原点)的集合
ImageView[] imageViews;
private ImagePagerAdapter adapter;//适配器
private LinearLayout linearLayout;//下标所在在LinearLayout布局里
private int currentPoint = 0;//当前被选中中页面的下标
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guide);
viewPager = findViewById(R.id.viewPager);
initData();
initView();//调用初始化视图方法
initPoint();//调用初始化导航原点的方法
viewPager.addOnPageChangeListener(this);//滑动事件
// viewPager.setAdapter(new MyAdapter());
}
//初始化view,即显示的图片
void initView() {
adapter = new ImagePagerAdapter(views);
viewPager = findViewById(R.id.viewPager);
viewPager.setAdapter(adapter);
linearLayout = findViewById(R.id.linearLayout);
initPoint();//初始化页面下方的点
viewPager.setOnPageChangeListener(this);
}
//初始化所要显示的布局
void initData() {
LayoutInflater inflater = LayoutInflater.from(this);
View view1 = inflater.inflate(R.layout.guide_1, null);
View view2 = inflater.inflate(R.layout.guide_2, null);
View view3 = inflater.inflate(R.layout.guide_3, null);
View view4 = inflater.inflate(R.layout.guide_4, null);
View view5 = inflater.inflate(R.layout.guide_5, null);
views = new ArrayList<>();
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
views.add(view5);
}
//setTag注释
/*
//View中的setTag(Onbect)表示给View添加一个格外的数据,以后可以用getTag()将这个数据取出来。来
代表这个数据,即实例化
Tag是标签的bai意识,这里的tag是object类型。所以通常会使用setTag()设置不同的Object子类对象,
然后使用强制转换getTag()获得对象。
//可以用在多个Button添加一个监听器,每个Button都设置不同的setTag。
这个监听器就通过getTag来分辨是哪个Button 被按下。
public class Main extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button button1 = (Button) findViewById(R.id.Button01);
Button button2 = (Button) findViewById(R.id.Button02);
Button button3 = (Button) findViewById(R.id.Button03);
Button button4 = (Button) findViewById(R.id.Button04);
MyListener listener = new MyListener();
button1.setTag(1);
button1.setOnClickListener(listener);
button2.setTag(2);
button2.setOnClickListener(listener);
button3.setTag(3);
button3.setOnClickListener(listener);
button4.setTag(4);
button4.setOnClickListener(listener);
}
public class MyListener implements View.OnClickListener {
@Override
public void onClick(View v) {
int tag = (Integer) v.getTag();
switch (tag) {
case 1:
System.out.println(“button1 click”);
break;
case 2:
System.out.println(“button2 click”);
break;
case 3:
System.out.println(“button3 click”);
break;
case 4:
System.out.println(“button4 click”);
break;
}
*/
private void initPoint() {
imageViews = new ImageView[5];//实例化5个图片
for (int i = 0; i < linearLayout.getChildCount(); i++) {
imageViews[i] = (ImageView) linearLayout.getChildAt(i);
imageViews[i].setImageResource(R.drawable.shape_unselected);
imageViews[i].setOnClickListener(this);//点击导航点,即可跳转
imageViews[i].setTag(i);//重复利用实例化的对象
}
currentPoint = 0;//默认第一个坐标
imageViews[currentPoint].setImageResource(R.drawable.shape_selected);
}
//OnPageChangeListener接口要实现的三个方法
/* onPageScrollStateChanged(int state)
此方法是在状态改变的时候调用,其中state这个参数有三种状态:
SCROLL_STATE_DRAGGING(1)表示用户手指“按在屏幕上并且开始拖动”的状态
(手指按下但是还没有拖动的时候还不是这个状态,只有按下并且手指开始拖动后log才打出。)
SCROLL_STATE_IDLE(0)滑动动画做完的状态。
SCROLL_STATE_SETTLING(2)在“手指离开屏幕”的状态。*/
@Override
public void onPageScrollStateChanged(int state) {
}
/* onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
当页面在滑动的时候会调用此方法,在滑动被停止之前,此方法回一直得到调用。其中三个参数的含义分别为:
position :当前页面,即你点击滑动的页面(从A滑B,则是A页面的position。
positionOffset:当前页面偏移的百分比
positionOffsetPixels:当前页面偏移的像素位置*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/* onPageSelected(int position)
此方法是页面滑动完后得到调用,position是你当前选中的页面的Position(位置编号)
(从A滑动到B,就是B的position)*/
public void onPageSelected(int position) {
ImageView preView = imageViews[currentPoint];
preView.setImageResource(R.drawable.shape_unselected);
ImageView currView = imageViews[position];
currView.setImageResource(R.drawable.shape_selected);
currentPoint = position;
}
//小圆点点击事件
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
//通过getTag(),可以判断是哪个控件
int i = (Integer) v.getTag();
viewPager.setCurrentItem(i);//直接跳转到某一个页面的情况
}
}
2.ImagePagerAdapter 的构建
public class ImagePagerAdapter extends PagerAdapter {
/*
* 四个必须重写的方法,否则会报错
*
*/
private List<View> views;
//构造方法,拿到views
public ImagePagerAdapter(List<View> views) {
this.views=views;
}
//以下四个是重写的方法
// 获取要滑动的控件的数量,在这里我们以滑动的广告栏为例,那么这里就应该是展示的广告图片的ImageView数量
@Override
public int getCount() {
// TODO Auto-generated method stub
return this.views.size();
}
// 来判断显示的是否是同一张图片,这里我们将两个参数相比较返回即可
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
/**
* position是在viewPager中显示图片的下标
* 把对应的图片放到对应的位置就好了
* instantiateItem和destroyItem是对应的
* 一个是创建item,一个是销毁item
* 当要显示的图片可以进行缓存的时候,会调用instantiateItem()进行显示图片的初始化,
* 我们将要显示的ImageView加入到ViewGroup中,然后作为返回值返回即可
*
* ViewPager 是扩展于 ViewGroup,container参数是当前的ViewPager对象,
* 所有的item都会被加入到ViewPager中,
* position就是 每个item对应的下标
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(views.get(position));
return views.get(position);
}
//如果出现IllegalStateException: The specified child already has a parent. 这样的错误:则可替换为以下的try catch 代码
try{
if(views.get(position).getParent()==null){
container.addView(views.get(position));
}else{
((ViewGroup)views.get(position).getParent()).removeView(views.get(position));
container.addView(views.get(position));
}
}catch(Exception e){
e.printStackTrace();
}
// PagerAdapter只缓存5张要显示的图片,如果滑动的图片超出了缓存的范围,就会调用destroyItem(),将图片销毁
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
}
3.xml文件,导航点用shape自己制作
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</androidx.viewpager.widget.ViewPager>
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="bottom|center"
android:layout_marginBottom="5dp"
android:gravity="center"
>
<ImageView
android:id="@+id/point1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/shape_selected"
android:layout_margin="5dp"
/>
<ImageView
android:id="@+id/point2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/shape_unselected"
android:layout_margin="5dp"
/>
<ImageView
android:id="@+id/point3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/shape_unselected"
android:layout_margin="5dp"
/>
<ImageView
android:id="@+id/point4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/shape_unselected"
android:layout_margin="5dp"
/>
<ImageView
android:id="@+id/point5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/shape_unselected"
android:layout_margin="5dp"
android:layout_marginRight="10dp"
/>
</LinearLayout>
</FrameLayout>
-------附加要清楚ViewPager的用法,它有两种适配器,一个是PagerAdapter和FragmentAdapter,两者的达到的
的效果相同,但PagerAdapter填充的是View,FragmentAdapter填充的是Fragment,重写,FragmentAdapte的实例:
这个就比较简单了
public class FragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> fragmentList;
public FragmentAdapter(@NonNull FragmentManager fm, List<Fragment> fragmentList) {
super(fm);
this.fragmentList = fragmentList;
}
@NonNull
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
}