android實現(xiàn)輪播圖引導(dǎo)頁

更新時間：2022年09月06日 08:45:53 作者：night?猿

這篇文章主要為大家詳細(xì)介紹了android實現(xiàn)輪播圖引導(dǎo)頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

android輪播圖引導(dǎo)頁（因為是引導(dǎo)頁，所以不具備自動輪播的功能）

示例：

代碼后面有數(shù)字，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>
<!-- ? ?android:layout_alignParentBottom="true"此屬性是讓點浮在圖片上放的操作
?? ??? ?android:layout_height="wrap_content" 注意這個，要不是wrap_content會使小圓點顯示在中間-->

</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">
<!-- ? ?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);
? ? ? ? //調(diào)用方法完成圖片的輪播
? ? ? ? initView();
? ? }

? ? private void initView() {
? ? ? ? mViewPager = findViewById(R.id.app_lunbotu);
? ? ? ? mLunboAdapter = new LunboAdapter();
? ? ? ? mLunboAdapter.setData(sImas);//設(shè)置數(shù)據(jù)
? ? ? ? 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() {
? ? ? ? //把點放進(jìn)去，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));//設(shè)置背景
? ? ? ? ? ? mPointContainer.addView(point);
? ? ? ? }
? ? }
? ? //以下是3.5
? ? @Override
? ? public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

? ? }

? ? @Override
? ? public void onPageSelected(int position) {
? ? ? ? //3.5
? ? ? ? //這個方法的調(diào)用其實是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());//獲取當(dāng)前的組件
? ? ? ? imageView.setImageResource(sImastwo.get(relaNum));//使無限
? ? ? ? container.addView(imageView);//將視圖添加到組件中（類似java中的操作）
? ? ? ? return imageView;

? ? }

? ? @Override
? ? public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
? ? ? ? //銷毀（讓可以循環(huán)使用，不會使內(nèi)存溢出）
? ? ? ? container.removeView((View)object);
? ? }

? ? @Override
? ? public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
? ? ? ? //判斷，View是否與instantiateItem方法返回的Object有聯(lián)系，有聯(lián)系則返回true，即返回的對象為所要創(chuàng)建的View時，顯示該View
? ? ? ? return view == object;
? ? }

? ? public void setData(List<Integer> sImas) {
? ? ? ? //之前sImastwo是空的，現(xiàn)在已經(jīng)有圖片在里面了
? ? ? ? sImastwo=sImas;
? ? }

? ? public int getDataRelasize() {
? ? ? ? if(sImastwo != null){
? ? ? ? ? ? return sImastwo.size();
? ? ? ? }else{
? ? ? ? ? ? return 0;
? ? ? ? }
? ? }
}

防止我忘記，記錄一下mipmap的位置