Android 使用ViewPager 做的半吊子的圖片輪播

效果圖

雖然不咋樣，但是最起碼的功能是實(shí)現(xiàn)了,下面我們來(lái)一步步的實(shí)現(xiàn)它。

界面

下面我們來(lái)分析一下界面的構(gòu)成

整體的布局: 因?yàn)槲覀円龀鲞@種，一層疊加一層的效果，就目前開(kāi)來(lái)只有 FrameLayout 布局能夠做出來(lái)的。

下面的小點(diǎn)：明顯的我們這里用的是RadioButton控件來(lái)做的。

黑色的邊框: 為了更好的顯示圖片輪播的區(qū)域，我們用 shapexml 文件，為我們的圖片輪播添加了一個(gè)邊框。

ui的主體:因?yàn)槲覀兊膱D片是要進(jìn)行輪播的，我們這里用了ViewPager作為了該界面的主體。

<?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:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context="com.example.it.studyimagerecycle.MainActivity"><!--用于實(shí)現(xiàn) 一層一層效果的幀布局，通過(guò)background屬性設(shè)置了一圈邊框--><FrameLayoutandroid:id="@+id/img_cycle"android:layout_width="match_parent"android:layout_height="180dp"android:background="@drawable/cycleimg_border"><!--用來(lái)實(shí)現(xiàn)圖片輪播的主體--><android.support.v4.view.ViewPagerandroid:id="@+id/img_cycle_viewpager"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_margin="2dp"></android.support.v4.view.ViewPager><!--圖片輪播下方的小點(diǎn)，因?yàn)楸容^懶就在布局文件中直接寫(xiě)死了，其實(shí)可以再代碼中根據(jù)要輪播的數(shù)量進(jìn)行生成--><RadioGroupandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:layout_margin="2dp"android:gravity="center"android:orientation="horizontal"><RadioButtonandroid:id="@+id/dot1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true" /><RadioButtonandroid:id="@+id/dot2"android:layout_width="wrap_content"android:layout_height="wrap_content" /><RadioButtonandroid:id="@+id/dot3"android:layout_width="wrap_content"android:layout_height="wrap_content" /></RadioGroup></FrameLayout> </RelativeLayout>

代碼

代碼的分析

• 我們是要可以滑動(dòng)的，這一點(diǎn)需要用ViewPager來(lái)實(shí)現(xiàn)，有ViewPager就要有我們自己實(shí)現(xiàn)PagerAdapter
• 我們需要生成 在ViewPager上顯示的圖片，所以我們要通過(guò)代碼來(lái)生成一些ImageView控件。
• 而且我們需要間隔一定的時(shí)間來(lái)進(jìn)行圖片的切換。
• 而且隨著圖片的自動(dòng)切換，我們下面的RadioButton也要跟著選中
• 為了更好的用戶體驗(yàn)，我們的RadioButton不能手動(dòng)的選中

成員變量

private RadioButton rb1, rb2, rb3; private ViewPager imageViewPager; private List<RadioButton> radiobuttionList;// 圖片輪播的點(diǎn)的集合 private List<Integer> drawIdList; //圖片id的集合 private List<ImageView> imageViewList; //要在ViewPager上顯示的內(nèi)容 private int pageIndex = 0; //viewpagr頁(yè)面的索引 private int countDown = 3; //切換頁(yè)面的倒計(jì)時(shí)

一些初始化方法

/* * 獲取我們需要的view * */ private void initFindView() {rb1 = (RadioButton) this.findViewById(R.id.dot1);rb2 = (RadioButton) this.findViewById(R.id.dot2);rb3 = (RadioButton) this.findViewById(R.id.dot3);imageViewPager = (ViewPager) this.findViewById(R.id.img_cycle_viewpager); }/* * 將屏幕上的點(diǎn)整合起來(lái) * */ private void initDots() {radiobuttionList = new ArrayList<RadioButton>();radiobuttionList.add(rb1);radiobuttionList.add(rb2);radiobuttionList.add(rb3);//使RadioButton不能手動(dòng)選中for (RadioButton rb : radiobuttionList) {rb.setClickable(false);} }/* * 初始化要加載的圖片 * */ private void initImage() {this.drawIdList = new ArrayList<Integer>();drawIdList.add(R.drawable.grape);drawIdList.add(R.drawable.strawberry);drawIdList.add(R.drawable.watermelon); }/* * 初始化ViewPage所需要的ImageView * */ private void initImageView() {imageViewList = new ArrayList<ImageView>();for (int i = 0; i < 3; i++) {//初始化ImageView的屬性ImageView imageView = new ImageView(this);//設(shè)置ImageView的屬性，使ImageView的大小是填充父窗體的ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(-1, -1);//讓ImageView應(yīng)用這些屬性imageView.setLayoutParams(lp);//使ImageView的圖像填充imageView.setScaleType(ImageView.ScaleType.FIT_XY);this.imageViewList.add(imageView);} }//在onCrate方法中調(diào)用這些初始化 @Override protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initFindView();initDots();initImage();initImageView();//設(shè)置ViewPager page改變的監(jiān)聽(tīng)this.imageViewPager.addOnPageChangeListener(this);//為ViewPager設(shè)置Adapterthis.imageViewPager.setAdapter(new MyPagerAdapter(this, imageViewList, drawIdList));//開(kāi)啟線程，一定時(shí)間后切換圖片new Thread(this).start(); }

PagerAdapter

package com.example.it.studyimagerecycle;import android.content.Context; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView;import com.bumptech.glide.Glide;import java.util.List;public class MyPagerAdapter extends PagerAdapter {private final Context context; //上下文環(huán)境private final List<Integer> imgList; //在ViewPager中顯示的集合private final List<ImageView> imageViewList; //圖片資源Id的集合public MyPagerAdapter(Context context, List<ImageView> imageViewList, List<Integer> imageIdList) {this.context = context;this.imgList = imageIdList;this.imageViewList = imageViewList;}//釋放占用的資源@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(this.imageViewList.get(position));}//獲取可滑動(dòng)頁(yè)面的數(shù)量@Overridepublic int getCount() {return imageViewList.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}/** 實(shí)例化item* */@Overridepublic Object instantiateItem(ViewGroup container, int position) {ImageView imageView = this.imageViewList.get(position);int id = this.imgList.get(position);//加載出指定的圖片，這里使用Glide這個(gè)開(kāi)源項(xiàng)目，圖片壓縮Glide.with(this.context).load(id).into(imageView);container.addView(imageView);return imageView;} }

ViewPager頁(yè)面改變的事件

因?yàn)榇a是寫(xiě)在Activity中的，我們要讓Activity實(shí)現(xiàn) ViewPager.OnPageChangeListener 接口。

@Override public void onPageScrolled(int position, float positi }/* * 頁(yè)面被選中的時(shí)候觸發(fā) * 我們要在這個(gè)頁(yè)面中處理，當(dāng)我們手動(dòng)滑動(dòng)頁(yè)面的時(shí)候要處理的業(yè)務(wù)邏輯 * */ @Override public void onPageSelected(int position) {//獲取應(yīng)該是選中狀態(tài)的RadioButtonRadioButton radioButton = radiobuttionList.get(position);//設(shè)置radioButton為選中狀態(tài)radioButton.setChecked(true);//重置倒計(jì)時(shí)this.countDown = 3;//重新設(shè)置pageIndexthis.pageIndex = position; } @Override public void onPageScrollStateChanged(int state) { }

子線程更新選中的頁(yè)面

/* * 倒計(jì)時(shí)進(jìn)行圖片的切換 * */ @Override public void run() {//進(jìn)行圖片轉(zhuǎn)換的前提是我們的Activity的資源沒(méi)有被回收。while (MainActivity.this.isDestroyed() == false) {//讓線程睡眠一秒，實(shí)現(xiàn)倒計(jì)時(shí)功能SystemClock.sleep(1000l);//倒計(jì)時(shí)減去countDown--;//如果倒計(jì)時(shí)結(jié)束那么進(jìn)行頁(yè)面的轉(zhuǎn)換if (countDown == 0) {//設(shè)置該被選中的Page的索引，為原來(lái)的所以+1this.pageIndex++;//如果是我們的page已經(jīng)是最后一個(gè)了，那么我么的第一個(gè)page應(yīng)該被選中if (pageIndex == this.radiobuttionList.size())this.pageIndex = 0;//更新uirunOnUiThread(new Runnable() {@Overridepublic void run() {//設(shè)置選中項(xiàng)imageViewPager.setCurrentItem(pageIndex);}});}} }

總結(jié)

經(jīng)過(guò)以上的這些步驟，我們的圖片輪播的效果已經(jīng)實(shí)現(xiàn)了，因?yàn)楸救怂皆?#xff0c;寫(xiě)的代碼。。。，請(qǐng)大家湊活著看吧。

源碼下載: https://git.oschina.net/ShareKnowledge/StudyImageCycle

轉(zhuǎn)載于:https://www.cnblogs.com/slyfox/p/7199646.html

總結(jié)

以上是生活随笔為你收集整理的Android 使用ViewPager 做的半吊子的图片轮播的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。