android轮播图引导页

小咪咪 2022-10-22 04:13 141阅读 0赞

android轮播图引导页（因为是引导页，所以不具备自动轮播的功能）  
示例：![引导页][20210403182600249.png]  
代码后面有数字，3.1开始就是开始做小圆点

//分为三个部分  
（1）布局  
**activity\_lun\_bo\_main.xml**

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content">
        <androidx.viewpager.widget.ViewPager android:id="@+id/app_lunbotu" android:layout_width="match_parent" android:layout_height="wrap_content"/>
        <LinearLayout android:id="@+id/app_points_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="40px" android:gravity="center" android:orientation="horizontal">
    
        </LinearLayout>
    
    
    </RelativeLayout>

1.2下面是小圆点的两个布局（大小，颜色），因为颜色不一样，所以要分开定义  
**shape\_point\_normal.xml**

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    
        <size android:width="40px" android:height="40px"/>
        <solid android:color="#dfdfdf"/>
    
    </shape>

**shape\_point\_selected.xml**

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
        <size android:width="40px" android:height="40px"/>
        <solid android:color="#ff4300"/>
    
    </shape>

**LunBoMainActivity**  
（2）第二步（主要MainActivity）

package com.example.myapplication.lunbotu;
    
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.viewpager.widget.ViewPager;
    
    import android.os.Bundle;
    import android.os.Handler;
    import android.view.View;
    import android.widget.LinearLayout;
    
    import com.example.myapplication.R;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class LunBoMainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener { 
        private ViewPager mViewPager;
        private LunboAdapter mLunboAdapter;//适配器
        private static List<Integer> sImas= new ArrayList<>();//装图片的列表
        private LinearLayout mPointContainer;//加小圆点,声明线性布局
        
        static { 
        //这是四张图片
            sImas.add(R.mipmap.yingdao1);
            sImas.add(R.mipmap.yingdao2);
            sImas.add(R.mipmap.yingdao3);
            sImas.add(R.mipmap.yingdao4);
        }
        @Override
        protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_lun_bo_main);
            //调用方法完成图片的轮播
            initView();
        }
    
        private void initView() { 
            mViewPager = findViewById(R.id.app_lunbotu);
            mLunboAdapter = new LunboAdapter();
            mLunboAdapter.setData(sImas);//设置数据
            mViewPager.setAdapter(mLunboAdapter);
            //以上四步是普通的轮播图
            mViewPager.addOnPageChangeListener(this);//3.4
            mPointContainer = findViewById(R.id.app_points_container);//3.2
            insertPoint();//3.1
    
    
            //下面这一步是无限轮播图
            mViewPager.setCurrentItem(mLunboAdapter.getDataRelasize()*100,false);//false是否做动画
    
        }
    
        private void insertPoint() { 
            //把点放进去，3.3
            for(int i=0;i<sImas.size();i++){ 
                View point = new View(this);
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40,40);//这是点的大小
                layoutParams.leftMargin = 20;//这是点之间的间距
                point.setLayoutParams(layoutParams);
                point.setBackground(getResources().getDrawable(R.drawable.shape_point_normal));//设置背景
                mPointContainer.addView(point);
            }
        }
        //以下是3.5
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
    
        }
    
        @Override
        public void onPageSelected(int position) { 
            //3.5
            //这个方法的调用其实是viewPager停下来以后选中的位置
            int realPosition;
            if(mLunboAdapter.getDataRelasize() != 0){ 
                realPosition = position%mLunboAdapter.getDataRelasize();
            }else{ 
                realPosition = 0;
            }
            setSelectPoint(realPosition);//3.6
        }
    
        private void setSelectPoint(int realPosition) { 
            //这个方法是3.6
            for (int i=0;i<mPointContainer.getChildCount();i++){ 
                View point = mPointContainer.getChildAt(i);
                if(i != realPosition){ 
                    //那就是白色
                    point.setBackgroundResource(R.drawable.shape_point_normal);
                }else { 
                    //选中的颜色
                    point.setBackgroundResource(R.drawable.shape_point_selected);
    
    
                }
            }
        }
    
        @Override
        public void onPageScrollStateChanged(int state) { 
    
        }
    }

**LunboAdapter**  
（3）第三步（适配器）

package com.example.myapplication.lunbotu;
    
    import androidx.annotation.NonNull;
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.viewpager.widget.PagerAdapter;
    
    import android.os.Bundle;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    
    import java.util.List;
    
    public class LunboAdapter extends PagerAdapter { 
        private List<Integer> sImastwo ;
    
        @Override
        public int getCount() { 
            if(sImastwo != null){ 
                return Integer.MAX_VALUE;//(图片无限)(注意这里是Integer)
            }
            return 0;
        }
    
        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) { 
            int relaNum = position%sImastwo.size();
            ImageView imageView = new ImageView(container.getContext());//获取当前的组件
            imageView.setImageResource(sImastwo.get(relaNum));//使无限
            container.addView(imageView);//将视图添加到组件中（类似java中的操作）
            return imageView;
    
        }
    
        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { 
            //销毁（让可以循环使用，不会使内存溢出）
            container.removeView((View)object);
        }
    
        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { 
            //判断，View是否与instantiateItem方法返回的Object有联系，有联系则返回true，即返回的对象为所要创建的View时，显示该View
            return view == object;
        }
    
        public void setData(List<Integer> sImas) { 
            //之前sImastwo是空的，现在已经有图片在里面了
            sImastwo=sImas;
        }
    
        public int getDataRelasize() { 
            if(sImastwo != null){ 
                return sImastwo.size();
            }else{ 
                return 0;
            }
        }
    }

防止我忘记，记录一下mipmap的位置  
![位置][20210403170640753.png]

[20210403182600249.png]: /images/20221022/4eab999bb94443da9b7e73f0db964515.png
[20210403170640753.png]: /images/20221022/eb0976e7029e456d9294031056ceb272.png