android使用ViewPager實(shí)現(xiàn)輪播效果
ViewPager:一個(gè)可以實(shí)現(xiàn)視圖左右滑動(dòng)切換的控件。
ViewPager的基本使用:
ViewPager的視圖需要通過(guò)PagerAdapter來(lái)實(shí)現(xiàn)顯示。
PagerAdapter的主要方法:
● getCount 視圖的數(shù)量
● instantiateItem 添加視圖
● destroyItem 銷毀視圖
● isViewFromObject 是否由對(duì)象創(chuàng)建視圖
ViewPager的常用方法:
setAdapter 設(shè)置適配器
addOnPageChangeListener 監(jiān)聽(tīng)頁(yè)面切換的狀態(tài)
setCurrentItem 設(shè)置當(dāng)前頁(yè)面的索引
實(shí)現(xiàn)廣告輪播
技術(shù)點(diǎn)分析:
1、網(wǎng)絡(luò)連接
2、JSON解析
3、ViewPager的初始化
4、圖片的異步加載
5、圓點(diǎn)指示器的實(shí)現(xiàn)
使用selector+shape實(shí)現(xiàn)圓點(diǎn)圖片
動(dòng)態(tài)創(chuàng)建ImageView添加到集合中,同時(shí)添加到布局中
在ViewPager切換事件中,切換圓點(diǎn)狀態(tài)
6、自動(dòng)切換效果
使用Handler的post方法,定時(shí)執(zhí)行代碼
資源文件:
mydot.xml //創(chuàng)建圓點(diǎn)資源,放在drawable文件下
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_enabled="true"> <shape android:shape="oval"> <size android:width="5dp" android:height="5dp"/> <solid android:color="#fff"/> </shape> </item> <item android:state_enabled="false"> <shape android:shape="oval"> <size android:width="5dp" android:height="5dp"/> <solid android:color="#8EE5EE"/> </shape> </item> </selector>
布局文件:
activity_main.xml
<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=".MainActivity" > <ListView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/lv_list" /> </RelativeLayout>
activity_banner.xml
<FrameLayout 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=".MainActivity" > <android.support.v4.view.ViewPager android:id="@+id/vp_image" android:layout_width="wrap_content" android:layout_height="150dp" android:layout_gravity="center" /> <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:id="@+id/layout" android:layout_gravity="bottom" android:gravity="center" android:orientation="horizontal" ></LinearLayout> </FrameLayout>
java代碼
ImageLoader.java //該代碼是通過(guò)URL獲取圖片資源
package cn.edu.huse.banner_re.util; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.AsyncTask; import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.MalformedURLException; import java.net.URL; /** * 圖片加載的工具類 * @author xray * */ public class ImageLoader { /** * 圖片加載完成的回調(diào)接口 * 添加URL參數(shù),用于做圖片錯(cuò)位判斷 */ public interface OnImageLoadListener{ //完成圖片加載 void onImageLoadComplete(String url, Bitmap bitmap); } private OnImageLoadListener mListener; /** * 啟動(dòng)圖片加載任務(wù) * @param urlStr * @param listener */ public void loadImage(String urlStr,OnImageLoadListener listener){ this.mListener = listener; new ImageLoadTask().execute(urlStr); } /** * 圖片加載任務(wù) * @author xray * */ class ImageLoadTask extends AsyncTask<String,Void,ImageLoadTask.UrlAndBitmap>{ @Override protected UrlAndBitmap doInBackground(String... params) { try { //創(chuàng)建URL,指定圖片地址 URL url = new URL(params[0]); //打開(kāi)連接獲得HttpURLConnection對(duì)象 HttpURLConnection conn = (HttpURLConnection) url.openConnection(); //獲得文件輸入流 InputStream stream = conn.getInputStream(); //把輸入流轉(zhuǎn)換為圖片 Bitmap bmp = BitmapFactory.decodeStream(stream); //關(guān)閉流 stream.close(); return new UrlAndBitmap(params[0],bmp); } catch (MalformedURLException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return null; } //包裝圖片地址和圖片 class UrlAndBitmap{ String url; Bitmap bitmap; public UrlAndBitmap(String url, Bitmap bitmap) { this.url = url; this.bitmap = bitmap; } } @Override protected void onPostExecute(UrlAndBitmap result) { //進(jìn)行接口回調(diào) if(mListener != null){ mListener.onImageLoadComplete(result.url,result.bitmap); } } } }
JSONLoader.java
//讀取服務(wù)器json
package cn.edu.huse.banner_re.util; import android.os.AsyncTask; import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.MalformedURLException; import java.net.URL; /** * 讀取服務(wù)器JSON的工具類 * @author xray * */ public class JSONLoader { public interface OnJSONLoadListener{ void onJSONLoadComplete(String json); } private OnJSONLoadListener mListener; public void loadJSON(String urlStr,OnJSONLoadListener listener){ this.mListener = listener; new JSONLoadTask().execute(urlStr); } class JSONLoadTask extends AsyncTask<String,Void,String>{ @Override protected String doInBackground(String... params) { try { URL url = new URL(params[0]); HttpURLConnection conn = (HttpURLConnection) url.openConnection(); InputStream inputStream = conn.getInputStream(); byte[] buffer = new byte[1024]; int len = 0; //StringBuffer 線程安全,性能低 VS StringBuilder 線程不安全,性能高 StringBuilder strB = new StringBuilder(); while((len = inputStream.read(buffer)) != -1){ //將字節(jié)碼轉(zhuǎn)換為String String str = new String(buffer,0,len); strB.append(str); } inputStream.close(); return strB.toString(); } catch (MalformedURLException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return null; } @Override protected void onPostExecute(String result) { if(mListener != null){ mListener.onJSONLoadComplete(result); } } } }
MyViewPagerAdapter.java
package cn.edu.huse.banner_re.adapter; import java.util.List; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; /** * 圖片輪播的適配器 * @author Lenovo * */ public class MyViewPagerAdapter extends PagerAdapter { private List<ImageView> mData; public MyViewPagerAdapter(List<ImageView> mData) { this.mData = mData; } //返回視圖的數(shù)量 @Override public int getCount() { return mData.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } //銷毀圖片 @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mData.get(position)); } //添加圖片 @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(mData.get(position)); return mData.get(position); } }
MainActivity.java
package cn.edu.huse.banner_re; import java.util.ArrayList; import java.util.List; import org.json.JSONArray; import org.json.JSONObject; import android.app.Activity; import android.graphics.Bitmap; import android.os.Bundle; import android.os.Handler; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.ListView; import android.widget.RadioButton; import cn.edu.huse.banner_re.adapter.MyViewPagerAdapter; import cn.edu.huse.banner_re.util.ImageLoader; import cn.edu.huse.banner_re.util.ImageLoader.OnImageLoadListener; import cn.edu.huse.banner_re.util.JSONLoader; import cn.edu.huse.banner_re.util.JSONLoader.OnJSONLoadListener; public class MainActivity extends Activity implements OnClickListener{ public static final String URL_GIFT = "http://www.1688wan.com/majax.action?method=getGiftList&pageno=1"; public static final String URL_BASE = "http://www.1688wan.com"; private ListView mLv; //放置圓點(diǎn)圖片的布局 private LinearLayout mLayout; private ViewPager mPager; //保存viewpager上圖片的集合 private List<ImageView> mImageViews; //保存圓點(diǎn)圖片的集合 private List<ImageView> mDotViews; //當(dāng)前圖片 private ImageView mDotView; //當(dāng)前下標(biāo) private int mIndex; private Handler mHandler = new Handler(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化viewpager initViewPager(); } private void initViewPager() { new JSONLoader().loadJSON(URL_GIFT, new OnJSONLoadListener() { @Override public void onJSONLoadComplete(String json) { //得到圖片的地址 List<String> list = josnPare(json); //初始化主控件 initView(); //將圖片顯示到viewpager中 initImageViews(list); //為ViewPager設(shè)置適配器 mPager.setAdapter(new MyViewPagerAdapter(mImageViews)); //加載圓點(diǎn)圖片 initDot(mImageViews.size()); //實(shí)現(xiàn)圖片的輪播 mPager.postDelayed(new Runnable() { @Override public void run() { //下標(biāo)自動(dòng)++ mIndex++; //當(dāng)下標(biāo)到最后時(shí),就重新來(lái)過(guò) if(mIndex >= mImageViews.size()){ mIndex = 0; } //設(shè)置圖片 mPager.setCurrentItem(mIndex); //重復(fù)調(diào)用 mHandler.postDelayed(this, 1500); } }, 1500); //添加頁(yè)碼滑動(dòng)的監(jiān)聽(tīng),實(shí)現(xiàn)圓點(diǎn)圖片的切換 mPager.setOnPageChangeListener(new OnPageChangeListener() { //頁(yè)選中后調(diào)用 @Override public void onPageSelected(int arg0) { //改變?cè)瓉?lái)的圓點(diǎn)圖片的狀態(tài) mDotView.setEnabled(true); //更新當(dāng)前的圓點(diǎn)圖片 mDotView = mDotViews.get(arg0); //將當(dāng)前選中的圓點(diǎn)設(shè)為選中狀態(tài) mDotView.setEnabled(false); //更新下標(biāo) mIndex = arg0; } //滑動(dòng)中途調(diào)用 @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } //頁(yè)面滑動(dòng)狀態(tài)修改 @Override public void onPageScrollStateChanged(int arg0) { } }); } }); } /**獲取圓點(diǎn)圖片函數(shù) * @param count viewpager上圖片的數(shù)量 */ private void initDot(int count){ mDotViews = new ArrayList<ImageView>(); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); //設(shè)置邊距 params.setMargins(5, 0, 5, 0); for(int i = 0; i < count; i++){ ImageView image = new ImageView(this); //設(shè)置圓點(diǎn)圖片 image.setImageResource(R.drawable.mydot); //設(shè)置圖片的位置,方便后面的取值 image.setTag(i); //設(shè)置監(jiān)聽(tīng) image.setOnClickListener(this); //添加到布局中 mLayout.addView(image, params); //將圓點(diǎn)圖片保存到集合中 mDotViews.add(image); } mDotView = mDotViews.get(0); mDotView.setEnabled(false); } /** *顯示圖片的函數(shù) */ private void initImageViews(List<String> list) { mImageViews = new ArrayList<ImageView>(); for(String str : list){ final ImageView imageView = new ImageView(this); //設(shè)置默認(rèn)圖片 imageView.setImageResource(R.drawable.ic_launcher); new ImageLoader().loadImage(URL_BASE+str, new OnImageLoadListener() { @Override public void onImageLoadComplete(String url, Bitmap bitmap) { if(bitmap != null){ imageView.setImageBitmap(bitmap); } } }); //將ImageView保存到集合中 mImageViews.add(imageView); } } /** * JSON解析獲取圖片的地址 * @param url * @return */ private List<String> josnPare(String url){ List<String> list = new ArrayList<String>(); try { JSONObject jobj = new JSONObject(url); JSONArray array = jobj.getJSONArray("ad"); for(int i = 0; i < array.length(); i++){ JSONObject obj = (JSONObject) array.get(i); list.add(obj.getString("iconurl")); } } catch (Exception e) { e.printStackTrace(); } return list; } /** * 初始化控件 */ private void initView() { //找到控件 mLv = (ListView) findViewById(R.id.lv_list); View view = LayoutInflater.from(this).inflate(R.layout.activity_banner, null); mPager = (ViewPager)view.findViewById(R.id.vp_image); //圓點(diǎn)圖片布局 mLayout = (LinearLayout)view.findViewById(R.id.layout); //模擬數(shù)據(jù) List<String> mList = new ArrayList<String>(); for(int i = 0; i < 20; i++){ mList.add("條目--"+i); } //創(chuàng)建適配器 ArrayAdapter<String> mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, mList); //設(shè)置頭部視圖 mLv.addHeaderView(view); //設(shè)置適配器 mLv.setAdapter(mAdapter); /*//圓點(diǎn)圖片布局 mLayout = (LinearLayout)findViewById(R.id.layout);*/ } /** * 圓點(diǎn)圖片的監(jiān)聽(tīng)事件 */ @Override public void onClick(View arg0) { //獲取該圓點(diǎn)圖片的位置 int index = Integer.parseInt(arg0.getTag().toString()); //將viewpager的圖片顯示成下標(biāo)為index的圖片 mPager.setCurrentItem(index); //將原來(lái)的設(shè)置成默認(rèn)值 mDotView.setEnabled(true); //保存新的值 mDotView = (ImageView) arg0; //將新的值改變成false mDotView.setEnabled(false); //更新下標(biāo) mIndex = index; } }
注意:因?yàn)檫@里用到了json解析,需要用到聯(lián)網(wǎng)操作,一定要寫(xiě)上上網(wǎng)的權(quán)限:
運(yùn)行效果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android自定義ListView實(shí)現(xiàn)仿QQ可拖拽列表功能
這篇文章主要介紹了Android自定義ListView實(shí)現(xiàn)仿QQ可拖拽列表功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08Android開(kāi)發(fā)獲取傳感器數(shù)據(jù)的方法示例【加速度傳感器,磁場(chǎng)傳感器,光線傳感器,方向傳感器】
這篇文章主要介紹了Android開(kāi)發(fā)獲取傳感器數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了Android獲取加速度傳感器、磁場(chǎng)傳感器、光線傳感器及方向傳感器數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11android?studio?項(xiàng)目?:UI設(shè)計(jì)高精度實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
這篇文章主要介紹了android?studio?項(xiàng)目?:UI設(shè)計(jì)高精度實(shí)現(xiàn)簡(jiǎn)單計(jì)算器,自主完成一個(gè)簡(jiǎn)單APP的設(shè)計(jì)工作,綜合應(yīng)用已經(jīng)學(xué)到的Android?UI設(shè)計(jì)技巧,下面來(lái)看看實(shí)驗(yàn)實(shí)現(xiàn)過(guò)程2021-12-12Android開(kāi)發(fā)高級(jí)組件之自動(dòng)完成文本框(AutoCompleteTextView)用法示例【附源碼下載】
這篇文章主要介紹了Android開(kāi)發(fā)高級(jí)組件之自動(dòng)完成文本框(AutoCompleteTextView)用法,簡(jiǎn)單描述了自動(dòng)完成文本框的功能并結(jié)合實(shí)例形式分析了Android實(shí)現(xiàn)自動(dòng)完成文本框功能的具體步驟與相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-01-01Flutter實(shí)現(xiàn)底部導(dǎo)航欄創(chuàng)建詳解
ConvexBottomBar是一個(gè)底部導(dǎo)航欄組件,用于展現(xiàn)凸起的TAB效果,支持多種內(nèi)置樣式與動(dòng)畫(huà)交互。本文將利用ConvexBottomBar創(chuàng)建漂亮的底部導(dǎo)航欄,感興趣的可以學(xué)習(xí)一下2022-01-01關(guān)于Android高德地圖的簡(jiǎn)單開(kāi)發(fā)實(shí)例代碼(DEMO)
高德地圖在日常生活中經(jīng)常會(huì)用到,那么基于代碼如何實(shí)現(xiàn)高德地圖呢?下面小編給大家分享一個(gè)demo幫助大家學(xué)習(xí)android高德地圖的簡(jiǎn)單開(kāi)發(fā),需要的朋友參考下2016-11-11Android自定義控件實(shí)現(xiàn)按鈕滾動(dòng)選擇效果
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實(shí)現(xiàn)按鈕滾動(dòng)選擇效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07Android TextView實(shí)現(xiàn)多文本折疊、展開(kāi)效果
這篇文章主要為大家詳細(xì)介紹了Android TextView實(shí)現(xiàn)多文本折疊、展開(kāi)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05