Android實現ViewPage輪播圖效果

2019-10-22 18:13:47

字體：大中小

來源：轉載

供稿：網友

在android移動端的開發中，首頁輪播圖是一個特別常見的功能，所以今天就來將最近寫的一個小demo記錄一下。

首先當然是新建一個項目代碼如下：

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;  //判斷是否自動滾動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);      // 添加指示小點      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) {        //默認聚焦在第一張        point.setBackgroundResource(R.mipmap.blue_point);        point.setEnabled(true);      } else {        point.setEnabled(false);      }      point_detail.addView(point);    }    //首頁輪播    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) {      // 執行滑動到下一個頁面      ViewPage_Detail.setCurrentItem(ViewPage_Detail.getCurrentItem() + 1);      if (isRunning) {        // 在發一個handler延時        handler.sendEmptyMessageDelayed(0, 3000);      }    }  };  @Override  public void onDestroy() {    // 停止滾動    isRunning = false;    super.onDestroy();  }}

CarouselShow類(輪播功能實現)：

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;  }  /**   * 當需要多個輪播功能的時候 建立一個類來調用 并實現此方法   */  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));    // 設置當前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) {        // 頁面切換后調用， position是新的頁面位置        // 實現無限制循環播放        position %= viewpage_imageList.size();        // 把當前點設置為true,將上一個點設為false；并設置point_group圖標        point_detail.getChildAt(position).setEnabled(true);        point_detail.getChildAt(position).setBackgroundResource(R.mipmap.blue_point);//設置聚焦時的圖標樣式        point_detail.getChildAt(lastPosition).setEnabled(false);        point_detail.getChildAt(lastPosition).setBackgroundResource(R.mipmap.light_blue_point);//上一張恢復原有圖標        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;  }  // 需要實現以下四個方法  @Override  public int getCount() {    return Integer.MAX_VALUE;  }  @Override  public boolean isViewFromObject(View view, Object object) {    // 判斷view和Object對應是否有關聯關系    if (view == object) {      return true;    } else {      return false;    }  }  @Override  public Object instantiateItem(ViewGroup container, int position) {    // 獲得相應位置上的view； container view的容器，其實就是viewpage自身,    // position: viewpager上的位置    // 給container添加內容    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) {    // 銷毀對應位置上的Object    // super.destroyItem(container, position, object);    container.removeView((View) object);    object = null;  }}

簡單的幾個類，首頁輪播的功能就實現了，不過主類的圖片資源就沒有貼出來了，到時候可以自己下載幾張圖片，貼到mipmap文件夾下就OK了。

效果圖展示：

Android,輪播圖,ViewPage