自定義圖片輪播，簡單就是好用

来源:http://www.cnblogs.com/dashou/archive/2016/03/25/5319161.html
-Advertisement-
Play Games

圖片輪播是一種常見的自定義控制項，也有多種實現的方法，這裡提供一種簡單的ViewPager實現的案例。 實現功能：圖片迴圈輪播，進度顯示，圖片點擊事件 實現只需三步： 1 添加類文件到項目中。 2 在xml佈局中引入標簽。 3 實例化並設置簡單參數。 具體使用方法，詳見代碼註釋。 ==========... ...


圖片輪播是一種常見的自定義控制項，也有多種實現的方法，這裡提供一種簡單的ViewPager實現的案例。

實現功能：圖片迴圈輪播，進度顯示，圖片點擊事件

實現只需三步：

1 添加類文件到項目中。

2 在xml佈局中引入標簽。

3 實例化並設置簡單參數。

具體使用方法，詳見代碼註釋。

==================================================================

自定義java文件

package com.dashou.viewpagerimage;

import android.content.Context;
import android.graphics.Color;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import org.xutils.image.ImageOptions;
import org.xutils.x;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
* 自定義圖片輪播控制項
* 使用方法：
* 1 在xml佈局中引入本包名，並設置ID,代碼類中實例化此類對象。
* 2 通過setViewPager()方法設置參數(int size, List<Map<String, Object>> list)
*   size是輪播圖片的數量，list需要存入圖片的url地址
* 3 設置此控制項的監聽事件
* 註意：Demo使用xutils請求網路
* Created by dashou on 2016/3/23.
*/
public class MyViewPager extends RelativeLayout implements View.OnTouchListener, ViewPager.OnPageChangeListener {

    private ViewPager viewPager;
    //放置圓點圖片的佈局
    private LinearLayout image;
    //設置圖片填充方式
    public ImageView.ScaleType setScaleType = ImageView.ScaleType.FIT_XY;
    //存儲圖片url以及點擊事件需要的id等數據
    private List<Map<String, Object>> list;
    private OnViewPagerClickListener onViewPagerClickListener;
    private int num;
    private int index_img = 0;
    public long time = 3000;//設置迴圈間隔時間
    private boolean isContinue = true;
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            index_img++;
            viewPager.setCurrentItem(index_img);
        }
    };

    public MyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    /**
     * 初始化控制項
     */
    private void init() {
        viewPager = new ViewPager(getContext());
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        addView(viewPager, lp);
        image = new LinearLayout(getContext());
        image.setOrientation(LinearLayout.HORIZONTAL);
        image.setGravity(Gravity.CENTER_VERTICAL);
        RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(200, 50);
        rlp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        rlp.addRule(RelativeLayout.CENTER_HORIZONTAL);
        addView(image, rlp);
    }

    /**
     * 設置ViewPager
     */
    public void setViewPager(int size, List<Map<String, Object>> list) {
        this.list = list;
        num = size;
        addDots(size);
        List<View> views = new ArrayList<View>();
        for (int i = 0; i < size; i++) {
            ImageView img = new ImageView(getContext());
            img.setScaleType(setScaleType);
            views.add(img);
        }
        MyViewPagerAdapter adapter = new MyViewPagerAdapter(getContext(), views);
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(this);
        viewPager.setOnTouchListener(this);
        startContinue();
    }

    /**
     * 添加進度顯示
     *
     * @param size
     */
    private void addDots(int size) {
        for (int i = 0; i < size; i++) {
            LinearLayout.LayoutParams dot_lp=new LinearLayout.LayoutParams(5,30);
            dot_lp.width=0;
            dot_lp.weight = 1.0f;
            TextView tv = new TextView(getContext());
            if (i==0){
                tv.setText(i+1+"");
                tv.setTextColor(Color.RED);
            }else {
                tv.setText(i+1+"");
                tv.setTextColor(Color.BLUE);
            }
            image.addView(tv,dot_lp);
        }
    }

    //重置圖片狀態按鈕
    private void resetDots(int id){
        for (int i = 0; i < list.size(); i++) {
            ((TextView)(image.getChildAt(i))).setTextColor(Color.BLUE);
        }
        ((TextView)(image.getChildAt(id))).setTextColor(Color.RED);
    }
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                isContinue = false;
                break;
            case MotionEvent.ACTION_UP:
                isContinue = true;
                break;
            default:
                isContinue = true;
                break;
        }
        return false;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        index_img = position;
        resetDots(position%list.size());
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    //圖片點擊事件對外介面
    interface OnViewPagerClickListener {
        /**
         * 圖片點擊事件監聽
         * @param position 對應被點擊的圖片
         */
        void OnViewPager(int position);
    }
    //初始化介面方法
    public void setOnViewPagerClickListener(OnViewPagerClickListener onViewPagerClickListener) {
        this.onViewPagerClickListener = onViewPagerClickListener;
    }

    //啟動線程迴圈播放圖片
    private void startContinue() {
        new Thread() {
            @Override
            public void run() {
                super.run();
                while (viewPager!=null) {
                    try {
                        sleep(time);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    if (isContinue){
                        Message msg = Message.obtain();
                        msg.what = 0;
                        handler.sendMessage(msg);
                    }
                }
            }
        }.start();
    }

    /**
     * ViewPager適配器
     */
    class MyViewPagerAdapter extends PagerAdapter {
        private final List<View> views;
        private ImageOptions imageOptions = new ImageOptions.Builder()
                .build();

        public MyViewPagerAdapter(Context context, List<View> views) {
            this.views = views;
        }

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

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            final int mposition = position%views.size();
            View view = views.get(mposition);
            ViewPager viewPager = (ViewPager) container;
            if (view instanceof ImageView) {
                view.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        //調用MyViewPager里的介面
                        if (onViewPagerClickListener!=null){
                            onViewPagerClickListener.OnViewPager(mposition);
                        }
                    }
                });
            }
            //使用載入圖片
            x.image().bind((ImageView) view, list.get(mposition).get("url").toString(), imageOptions);
            viewPager.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            ((ViewPager) container).removeView((View) object);
        }
    }
}

===============================================================

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="match_parent">

    <com.dashou.viewpagerimage.MyViewPager
        android:id="@+id/myViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </com.dashou.viewpagerimage.MyViewPager>
</RelativeLayout>

====================================================================

Activity代碼

package com.dashou.viewpagerimage;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

import org.xutils.view.annotation.ContentView;
import org.xutils.view.annotation.ViewInject;
import org.xutils.x;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@ContentView(R.layout.activity_main)
public class MainActivity extends Activity implements MyViewPager.OnViewPagerClickListener {

    //實例化控制項********註意此Demo使用xutils請求
    @ViewInject(R.id.myViewPager)
    private MyViewPager myViewPager;
    private String[] img_url = {"http://3p.pic.ttdtweb.com/3p.ttpod.com/singer/110/6697838.jpg",
            "http://3p.pic.ttdtweb.com/3p.ttpod.com/singer/110/1439024.jpg",
            "http://3p.pic.ttdtweb.com/3p.ttpod.com/singer/110/1439025.jpg",
            "http://3p.pic.ttdtweb.com/3p.ttpod.com/singer/110/1439021.jpg",
            "http://3p.pic.ttdtweb.com/3p.ttpod.com/singer/110/1439020.jpg",
            "http://3p.pic.ttdtweb.com/3p.ttpod.com/singer/110/1439022.jpg",
            "http://3p.pic.ttdtweb.com/3p.ttpod.com/singer/110/1439023.jpg"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        x.view().inject(this);
    }

    @Override
    protected void onResume() {
        super.onResume();
        setMyViewPager();
    }

    private void setMyViewPager() {
        //準備list資源
        List<Map<String, Object>> views_list = new ArrayList<Map<String, Object>>();
        for (int i = 0; i < img_url.length; i++) {
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("url", img_url[i]);
            views_list.add(map);
        }
        //需要兩個參數 1. 數量 2.url地址list
        myViewPager.setViewPager(img_url.length, views_list);
        myViewPager.setOnViewPagerClickListener(this);
    }

    @Override
    public void OnViewPager(int position) {
        //這裡實現圖片點擊後的操作
        int id = position+1;
        Toast.makeText(this,"第"+id+"張圖片被點擊了",Toast.LENGTH_SHORT).show();
    }
}

======================================================

結束


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android MVP 設計模式
    1、基本概念 Model ： 模型 負責處理數據的載入或者存儲，比如從網路或本地資料庫獲取數據等； View ： 視圖 負責界面數據的展示，與用戶進行交互； Presenter ：主持人 任命者 負責協調關係，是模型與視圖之間的橋梁，將模型與視圖分離開來。 2、MVP模式在Android項目中的使用 ...
  • java 介面的作用和好處
    1、java 介面的作用 http://blog.csdn.net/hack_bug/article/details/7634737 2、一位Java大牛的回答 很多JAVA初級程式員對於介面存在的意義很疑惑。不知道介面到底是有什麼作用，為什麼要定義介面。 好像定義介面是提前做了個多餘的工作。下麵我 ...
  • 單例模式
    在一個iOS應用的生命周期中，有時候我們只需要某個類的一個實例。例如當程式啟動時，應用的狀態由UIApplication類的一個實例維護，這個實例代表了整個應用程式對象，它只能是一個實例，作用是實現應用程式中一些共用資源的訪問和狀態的保持。 下麵就是一個單例類的例子 因為基本上所有的類單例模式都差不 ...
  • 最快讓你上手ReactiveCocoa之基礎篇
    文／崢吖（簡書作者）原文鏈接：http://www.jianshu.com/p/87ef6720a096著作權歸作者所有，轉載請聯繫作者獲得授權，並標註“簡書作者”。 前言 很多blog都說ReactiveCocoa好用，然後各種秀自己如何靈活運用ReactiveCocoa，但是感覺真正缺少的是一篇 ...
  • iOS中的一些細節
    1.在使用單例模式時一般使用allocWithZone 因為alloc最終還是會調用allocWithZone進行分配空間 ...
  • ios動態創建類Class
    【Objective-C Runtime動態載入】 動態創建類Class 動態創建類Class,動態添加Class成員變數與成員函數,動態變數賦值與取值，動態函數調用等方法 a.使用objc_allocateClassPair創建一個類Class const char * className = " ...
  • iOS中多線程的實現方案
    什麼是主線程？ 一個iOS程式運行後，預設會開啟一條線程，稱為“主線程”或“UI線程” 主線程的主要作用 1.顯示/刷新UI界面 2.處理UI事件（比如點擊事件，滾動事件，拖拽事件） 主線程的使用註意 1.別將比較耗時的操作放在主線程中 2.耗時操作會卡在主線程中，嚴重影響UI的流暢程度 如圖，將耗 ...
  • 淺談DrawerLayout抽屜效果
    DrawerLayout是V4包下提供的一種左滑右滑抽屜佈局效果。 實現效果如下： 因為是官方提供的，所以使用起來也相對的比較簡單。 DrawerLayout 提供 1、當界面彈出的時候，主要內容區會自動背景變黑，當點擊內容區的時候，抽屜佈局會消失 2、在屏幕邊緣手勢滑動 會拉出抽屜佈局 註意：當按 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類