快捷導(dǎo)航

Android實(shí)現(xiàn)ViewPage輪播圖效果

更新時(shí)間：2021年04月21日 09:21:08 作者：Android小先森

這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)ViewPage輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在android移動(dòng)端的開(kāi)發(fā)中，首頁(yè)輪播圖是一個(gè)特別常見(jiàn)的功能，所以今天就來(lái)將最近寫(xiě)的一個(gè)小demo記錄一下。

首先當(dāng)然是新建一個(gè)項(xiàng)目代碼如下：

activity_main.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.yzp.viewpagedemo.MainActivity"
  android:background="#f6f6f6">

  <!--輪播圖-->
  <RelativeLayout
    android:id="@+id/topPanel_vpg"
    android:layout_width="match_parent"
    android:layout_height="190dp"
    >

    <android.support.v4.view.ViewPager
      android:id="@+id/ViewPage_Detail"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:flipInterval="30"
      android:persistentDrawingCache="animation" />

    <LinearLayout
      android:id="@+id/point_detail"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:orientation="horizontal"
      android:layout_centerHorizontal="true"
      android:layout_alignParentBottom="true"
      >
    </LinearLayout>

  </RelativeLayout>

</RelativeLayout>

MainActivity

package com.yzp.viewpagedemo;

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

  private ViewPager ViewPage_Detail;
  private LinearLayout point_detail;
  private Context context;
  private View view;
  //輪播圖圖片資源
  private final int[] viewpage_images = {R.mipmap.two, R.mipmap.three, R.mipmap.four, R.mipmap.fifve};
  private ArrayList<ImageView> viewpage_imageList;
  //判斷是否自動(dòng)滾動(dòng)ViewPage
  private boolean isRunning = true;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Instantiation();

  }

  public void Instantiation() {

    ViewPage_Detail = (ViewPager)findViewById(R.id.ViewPage_Detail);
    point_detail = (LinearLayout)findViewById(R.id.point_detail);

    //初始化圖片資源
    viewpage_imageList = new ArrayList<ImageView>();
    for (int i : viewpage_images) {
      // 初始化圖片資源
      ImageView imageView = new ImageView(this);
      imageView.setBackgroundResource(i);
      viewpage_imageList.add(imageView);

      // 添加指示小點(diǎn)
      ImageView point = new ImageView(this);
      LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(15,
          15);
      params.rightMargin = 10;
      params.bottomMargin = 15;
      point.setLayoutParams(params);
      point.setBackgroundResource(R.mipmap.light_blue_point);
      if (i == R.mipmap.two) {
        //默認(rèn)聚焦在第一張
        point.setBackgroundResource(R.mipmap.blue_point);
        point.setEnabled(true);
      } else {
        point.setEnabled(false);
      }

      point_detail.addView(point);

    }

    //首頁(yè)輪播
    CarouselShow carouselShow = new CarouselShow(context, viewpage_imageList);
    carouselShow.CarouselShow_Info_Detail(this);
    handler.sendEmptyMessageDelayed(0, 3000);

  }

  private Handler handler = new Handler() {
    public void handleMessage(Message msg) {
      // 執(zhí)行滑動(dòng)到下一個(gè)頁(yè)面
      ViewPage_Detail.setCurrentItem(ViewPage_Detail.getCurrentItem() + 1);
      if (isRunning) {
        // 在發(fā)一個(gè)handler延時(shí)
        handler.sendEmptyMessageDelayed(0, 3000);
      }
    }
  };


  @Override
  public void onDestroy() {
    // 停止?jié)L動(dòng)
    isRunning = false;
    super.onDestroy();
  }

}

CarouselShow類(輪播功能實(shí)現(xiàn))：

package com.yzp.viewpagedemo;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;

/**
 * 輪播展示公共類
 * 作者: yzp on 2016-09-07.
 * E-mail: 15111424807@163.com
 * QQ: 486492302
 */
public class CarouselShow {

  private final Context context;
  private LinearLayout point_group;
  private ArrayList<ImageView> viewpage_imageList;
  protected int lastPosition = 0;
  private ViewPager ViewPage_Detail;
  private LinearLayout point_detail;

  public CarouselShow(Context context, ArrayList<ImageView> viewpage_imageList) {
    this.context = context;
    this.viewpage_imageList = viewpage_imageList;
  }

  /**
   * 當(dāng)需要多個(gè)輪播功能的時(shí)候 建立一個(gè)類來(lái)調(diào)用 并實(shí)現(xiàn)此方法
   */
  public void CarouselShow_Info_Detail(MainActivity view){

    ViewPage_Detail = (ViewPager)view.findViewById(R.id.ViewPage_Detail);
    point_detail = (LinearLayout) view.findViewById(R.id.point_detail);
    ViewPage_Detail.setAdapter(new TeaNetPageAdapter(viewpage_imageList));

    // 設(shè)置當(dāng)前viewPager的位置
    ViewPage_Detail.setCurrentItem(Integer.MAX_VALUE / 2
        - (Integer.MAX_VALUE / 2 % viewpage_imageList.size()));

    ViewPage_Detail.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
      @Override
      public void onPageSelected(int position) {
        // 頁(yè)面切換后調(diào)用， position是新的頁(yè)面位置
        // 實(shí)現(xiàn)無(wú)限制循環(huán)播放
        position %= viewpage_imageList.size();

        // 把當(dāng)前點(diǎn)設(shè)置為true,將上一個(gè)點(diǎn)設(shè)為false；并設(shè)置point_group圖標(biāo)
        point_detail.getChildAt(position).setEnabled(true);
        point_detail.getChildAt(position).setBackgroundResource(R.mipmap.blue_point);//設(shè)置聚焦時(shí)的圖標(biāo)樣式
        point_detail.getChildAt(lastPosition).setEnabled(false);
        point_detail.getChildAt(lastPosition).setBackgroundResource(R.mipmap.light_blue_point);//上一張恢復(fù)原有圖標(biāo)
        lastPosition = position;
      }
      @Override
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

      }
      @Override
      public void onPageScrollStateChanged(int state) {

      }
    });

  }
}

TeaNetPageAdapter(適配器)：

package com.yzp.viewpagedemo;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;

/**
 * 作者: yzp on 2016-09-07.
 * E-mail: 15111424807@163.com
 * QQ: 486492302
 */
public class TeaNetPageAdapter extends PagerAdapter {

  private ArrayList<ImageView> viewpage_imageList;

  public TeaNetPageAdapter(ArrayList<ImageView> viewpage_imageList) {

    this.viewpage_imageList = viewpage_imageList;

  }
  // 需要實(shí)現(xiàn)以下四個(gè)方法

  @Override
  public int getCount() {
    return Integer.MAX_VALUE;
  }

  @Override
  public boolean isViewFromObject(View view, Object object) {
    // 判斷view和Object對(duì)應(yīng)是否有關(guān)聯(lián)關(guān)系
    if (view == object) {
      return true;
    } else {
      return false;
    }
  }

  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    // 獲得相應(yīng)位置上的view； container view的容器，其實(shí)就是viewpage自身,
    // position: viewpager上的位置
    // 給container添加內(nèi)容
    container.addView(viewpage_imageList.get(position % viewpage_imageList.size()));

    return viewpage_imageList.get(position % viewpage_imageList.size());
  }

  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
    // 銷毀對(duì)應(yīng)位置上的Object
    // super.destroyItem(container, position, object);
    container.removeView((View) object);
    object = null;
  }
}

簡(jiǎn)單的幾個(gè)類，首頁(yè)輪播的功能就實(shí)現(xiàn)了，不過(guò)主類的圖片資源就沒(méi)有貼出來(lái)了，到時(shí)候可以自己下載幾張圖片，貼到mipmap文件夾下就OK了。

效果圖展示：