Android自定義控件案例匯總1（菜單、popupwindow、viewpager）

更新時(shí)間：2016年12月06日 09:24:05 作者：huang502

這篇文章主要介紹了Android自定義控件案例匯總，優(yōu)酷菜單、popupwindow實(shí)現(xiàn)下拉列表、viewpager實(shí)現(xiàn)輪播圖,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

自定義控件是根據(jù)自己的需要自己來(lái)編寫(xiě)控件。安卓自帶的控件有時(shí)候無(wú)法滿足你的需求，這種時(shí)候，我們只能去自己去實(shí)現(xiàn)適合項(xiàng)目的控件。同時(shí)，安卓也允許你去繼承已經(jīng)存在的控件或者實(shí)現(xiàn)你自己的控件以便優(yōu)化界面和創(chuàng)造更加豐富的用戶體驗(yàn)。在平常的項(xiàng)目中，我們人為的把自定義控件分為兩種：一種是組合方式實(shí)現(xiàn)。一種是通過(guò)繼承view或viewgroup及其子類實(shí)現(xiàn)。兩者都可以實(shí)現(xiàn)我們想要的效果，因此，我們可以根據(jù)自己的需求，選擇合適的方案。本文以案例的形式來(lái)顯示幾種較為常見(jiàn)的自定義控件。

案例一優(yōu)酷菜單：

功能介紹: 手機(jī)界面的底部中央有一個(gè)半圓，初始狀態(tài)顯示三級(jí)菜單，由外到內(nèi)分別是第三級(jí)菜單，第二級(jí)菜單，第三級(jí)菜單。每個(gè)菜單中有一些按鈕，可以用3個(gè)容器（RelativeLayout）來(lái)表示3個(gè)菜單，往里面添加按鈕即可。當(dāng)再次點(diǎn)擊中心位置的圖片式，隱藏外面兩層的的條目。再次點(diǎn)擊重心位置的圖片時(shí)，旋轉(zhuǎn)出二級(jí)菜單。點(diǎn)擊二級(jí)菜單中心位置時(shí)，旋轉(zhuǎn)出三級(jí)菜單，再次點(diǎn)擊則隱藏三級(jí)菜單。以上就是優(yōu)酷菜單要實(shí)現(xiàn)的功能。

實(shí)現(xiàn)步驟：

1. 完成布局文件。由于控件較多所以優(yōu)酷菜單的布局較為復(fù)雜，但是可以在一個(gè)根布局設(shè)置三個(gè)子線性布局來(lái)包裹每一個(gè)小的控件。通過(guò)調(diào)整margin值來(lái)是使得界面更加的美觀。注意3個(gè)菜單布局的順序，先放men3,然后menu2，然后menu1，順序不能反，因?yàn)樵酵蠓诺牟藛卧皆诮缑娴纳戏剑@樣面積最小的菜單1會(huì)在最上方，菜單1不會(huì)遮擋到下面的菜單2和菜單3。

2. 完成布局文件后，創(chuàng)建一個(gè)類，在該類中實(shí)現(xiàn)業(yè)務(wù)邏輯。首先要?jiǎng)?chuàng)建兩個(gè)布爾類型的常量存儲(chǔ)菜單的狀態(tài)。通過(guò)swich語(yǔ)句判斷被點(diǎn)擊的控件是二級(jí)菜單還是一級(jí)菜單。如果是一級(jí)菜單的中心被點(diǎn)擊，則判斷三級(jí)菜單是否打開(kāi)。如果三級(jí)菜單打開(kāi)著，則隱藏一級(jí)菜單和二級(jí)菜單，并修改狀態(tài)。如果三級(jí)菜單隱藏著則判斷二級(jí)菜單是否隱藏。如果二級(jí)菜單打開(kāi)著，則隱藏二級(jí)菜單。如果二級(jí)菜單隱藏則打開(kāi)二級(jí)菜單。如果是二級(jí)菜單的中心被點(diǎn)擊，則只需要判斷三級(jí)菜單是否隱藏。如果三級(jí)菜單打開(kāi)著，則隱藏三級(jí)菜單。如果三級(jí)菜單隱藏則打開(kāi)三級(jí)菜單。同時(shí)還要修改菜單的狀態(tài)。

3. 接下來(lái)可以在一個(gè)工具類中實(shí)現(xiàn)動(dòng)畫(huà)的效果。步驟2中的隱藏和顯示均都是通過(guò)動(dòng)畫(huà)效果實(shí)現(xiàn)的。這里的動(dòng)畫(huà)效果用到的是補(bǔ)間動(dòng)畫(huà)，為RotateAnimation對(duì)象傳入起始角度，結(jié)束的角度，參考對(duì)象和參考點(diǎn)坐標(biāo)。一個(gè)小細(xì)節(jié)是將setFillAfter屬性設(shè)為true，表示從結(jié)束位置開(kāi)始動(dòng)畫(huà)，避免動(dòng)畫(huà)結(jié)束后又回到起始位置。隱藏和顯示區(qū)別是旋轉(zhuǎn)的起始角度和結(jié)束角度，這里顯示設(shè)定的起始角度是-180，結(jié)束角度為0。隱藏設(shè)定的起始角度為0，結(jié)束角度為-180。當(dāng)然也可以設(shè)定為其他值，取決于自己想要的效果。

4. 代碼優(yōu)化?？焖冱c(diǎn)擊按鈕時(shí)會(huì)發(fā)現(xiàn)菜單還沒(méi)隱藏完就開(kāi)始顯示了，或者還沒(méi)顯示完又隱藏了。解決方案：監(jiān)聽(tīng)動(dòng)畫(huà)的開(kāi)啟次數(shù)來(lái)判斷是否需要執(zhí)行畫(huà)，給動(dòng)畫(huà)類添加一個(gè)監(jiān)聽(tīng)器。設(shè)置一個(gè)成員變量。當(dāng)開(kāi)始開(kāi)始動(dòng)畫(huà)是執(zhí)行加一操作，結(jié)束動(dòng)畫(huà)是執(zhí)行減一操作。這樣只有當(dāng)常量為零時(shí)，才沒(méi)有動(dòng)畫(huà)。因此swich語(yǔ)句中加入判斷如果當(dāng)前存在動(dòng)畫(huà)，等待動(dòng)畫(huà)執(zhí)行完之后在進(jìn)入下面的邏輯。

菜單選擇界面的布局：

<?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">

  <RelativeLayout
    android:id="@+id/rl_menu3"
    android:layout_width="280dp"
    android:layout_height="140dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/level3">

    <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_marginBottom="6dp"
      android:layout_marginLeft="12dp"
      android:background="@drawable/channel1" />

    <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_marginBottom="46dp"
      android:layout_marginLeft="32dp"
      android:background="@drawable/channel2" />

    <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_marginBottom="80dp"
      android:layout_marginLeft="60dp"
      android:background="@drawable/channel3" />

    <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="6dp"
      android:background="@drawable/channel4" />

    <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_marginBottom="80dp"
      android:layout_marginRight="60dp"
      android:background="@drawable/channel5" />

    <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_marginBottom="46dp"
      android:layout_marginRight="32dp"
      android:background="@drawable/channel6" />

    <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_marginBottom="6dp"
      android:layout_marginRight="12dp"
      android:background="@drawable/channel7" />

  </RelativeLayout>

  <RelativeLayout
    android:id="@+id/rl_menu2"
    android:layout_width="180dp"
    android:layout_height="90dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/level2">

    <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_marginBottom="6dp"
      android:layout_marginLeft="12dp"
      android:background="@drawable/icon_search" />

    <ImageButton
      android:id="@+id/btn_menu2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="4dp"
      android:background="@drawable/icon_menu" />

    <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_marginBottom="6dp"
      android:layout_marginRight="12dp"
      android:background="@drawable/icon_myyouku" />

  </RelativeLayout>

  <RelativeLayout
    android:id="@+id/rl_menu1"
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/level1">

    <ImageButton
      android:id="@+id/btn_menu1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:background="@drawable/icon_home" />

  </RelativeLayout>
</RelativeLayout>

主界面的布局，在代碼中用打氣筒把菜單布局打到主界面上。

<?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"
  android:gravity="center"
  tools:context="com.example.selectbar.Selectbar">

  <com.example.selectbar.Rotate
    android:layout_centerInParent="true"
    android:id="@+id/rotate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</RelativeLayout>

主程序是空實(shí)現(xiàn)。

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class Selectbar extends AppCompatActivity {

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

主要邏輯的實(shí)現(xiàn)。

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.RelativeLayout;

import com.example.selectbar.com.example.selectbar.utils.utils;

/**
 * Created by huang on 2016/11/22.
 */
public class Rotate extends RelativeLayout implements View.OnClickListener {
  private static final String TAG = "Rotate";
  private RelativeLayout rl_menu1, rl_menu2, rl_menu3;
  private boolean menu2showing = true;
  private boolean menu3showing = true;

  public Rotate(Context context) {
    super(context,null);
  }

  public Rotate(Context context, AttributeSet attrs) {
    super(context, attrs);
    initdata(context);
  }


  private void initdata(Context context) {
    Log.i(TAG, "initdata: text");
    View view = View.inflate(context,R.layout.activity_rolate,null);
    view.findViewById(R.id.btn_menu1).setOnClickListener(this);
    view.findViewById(R.id.btn_menu2).setOnClickListener(this);
    rl_menu1 = (RelativeLayout) view.findViewById(R.id.rl_menu1);
    rl_menu2 = (RelativeLayout) view.findViewById(R.id.rl_menu2);
    rl_menu3 = (RelativeLayout) view.findViewById(R.id.rl_menu3);
    addView(view);
  }
  @Override
  public void onClick(View v) {
    switch (v.getId()) {
      case R.id.btn_menu2:
        if (utils.hasAnimationexcuting()) {
          return;
        }
        if (menu3showing) {
          utils.hiden(rl_menu3);
        } else {
          utils.show(rl_menu3);
        }
        menu3showing = !menu3showing;
        break;

      case R.id.btn_menu1:
        if (utils.hasAnimationexcuting()) {
          return;
        }
        if (menu3showing) {
          utils.hiden(rl_menu3);
          menu3showing = false;
          utils.hiden(rl_menu2, 300);

        } else if (menu2showing) {
          utils.hiden(rl_menu2);
        } else {
          utils.show(rl_menu2);
        }
        menu2showing = !menu2showing;
        break;
    }
  }
}

還需要一個(gè)工具類實(shí)現(xiàn)動(dòng)畫(huà)的效果。

import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;

/**
 * Created by huang on 2016/11/22.
 */
public class utils {
  private static final String TAG = "utils";
  private static void setviewclickable(View view, boolean clickable) {
    view.setClickable(clickable);
    if (view instanceof ViewGroup) {
      ViewGroup viewgroup = (ViewGroup) view;
      for (int i = 0; i < viewgroup.getChildCount(); i++) {
        View child = ((ViewGroup) view).getChildAt(i);
        child.setClickable(clickable);
      }
    }
  }

  public static void hiden(View view) {
    float fromDegreeas = 0;
    float toDegrees = -180f;
    rotateview(view, fromDegreeas, toDegrees, 0l);
    setviewclickable(view, false);
  }

  public static void hiden(View view, long startoffset) {
    float fromDegreeas = 0;
    float toDegrees = -180f;
    rotateview(view, fromDegreeas, toDegrees, startoffset);
    setviewclickable(view, false);
  }

  public static void show(View view) {
    float fromDegrees = -180f;
    float toDegrees = 0;
    rotateview(view, fromDegrees, toDegrees, 0l);
    setviewclickable(view, true);
  }

  public static boolean hasAnimationexcuting() {
    return startcount > 0;
  }

  public static void rotateview(View view, float fromDegrees, float toDegrees, long startoffset) {
    int pivotXType = RotateAnimation.RELATIVE_TO_SELF;
    int pivotYType = RotateAnimation.RELATIVE_TO_SELF;
    float pivotXValue = 0.5f;
    float pivatYValue = 1.0f;
    RotateAnimation ra = new RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivatYValue);
    ra.setDuration(500);
    ra.setFillAfter(true);
    ra.setStartOffset(startoffset);
    ra.setAnimationListener(listener);
    view.startAnimation(ra);
  }

  public static int startcount;
  static Animation.AnimationListener listener = new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
      startcount++;
//      Log.i(TAG, "onAnimationStart: " +startcount);
    }

    @Override
    public void onAnimationEnd(Animation animation) {
      startcount--;
//      Log.i(TAG, "onAnimationEnd: " + startcount);
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }
  };
}

案例二 popupwindow實(shí)現(xiàn)下拉列表：

功能介紹：創(chuàng)建一個(gè)textview，當(dāng)我們點(diǎn)擊textview時(shí)會(huì)彈出一個(gè)列表，列表中存放的是數(shù)字信息和一張刪除圖片。列表是用listview實(shí)現(xiàn)。點(diǎn)擊刪除圖片可以將本條記錄從列表中刪除。本案例的有兩種，一種是通過(guò)動(dòng)畫(huà)的縮放實(shí)現(xiàn)彈出效果，另一種是采取popupwindow。本文采用的是第二種方案。

實(shí)現(xiàn)步驟：

添加布局文件。首先要在界面上放置一個(gè)textview，在textview的右邊放置一個(gè)下拉圖片。為了更方便地?cái)[放控件，可以采用相對(duì)布局，這樣只要保證imageview和textview上對(duì)齊、下對(duì)齊、右對(duì)齊就可以實(shí)現(xiàn)要現(xiàn)實(shí)的效果。為了是界面更美觀，可以把圖片設(shè)為透明的，即背景為null。這里將popupwindow彈出來(lái)的界面用listview表示。因此還要寫(xiě)一個(gè)單獨(dú)的listview以及每一個(gè)條目的布局，然后用打氣筒打到textview的下方、
Pupupwindow的編寫(xiě)。Popupwindow的編寫(xiě)有兩個(gè)關(guān)鍵的步驟，一個(gè)是new一個(gè)pupupwimdow對(duì)象，將要顯示的布局、布局的高和寬、是否可聚等相關(guān)的參數(shù)傳入。這里pupupwindow的顯示界面是用的打氣筒把listview加載進(jìn)來(lái)。同時(shí)listview條目的布局也用到inflate。因此用到兩次打氣筒。同時(shí)為每一個(gè)listview的條目設(shè)置條目點(diǎn)擊的監(jiān)聽(tīng)事件，這樣在條目被點(diǎn)擊時(shí)候可以將條目的內(nèi)容顯示在textview中。。Popupwindow的編寫(xiě)另一個(gè)關(guān)鍵性的步驟是showAsDropDown，即將要顯示在哪個(gè)控件下方，偏移量多少出傳進(jìn)來(lái)。需要注意的是控件的實(shí)際寬高和看到的寬高有一定的誤差，只是因?yàn)榭丶谋尘坝靡欢ǖ膶挾?。還有一點(diǎn)就是，按返回鍵時(shí)PopupWindow沒(méi)法隱藏，給PopupWindow設(shè)置一個(gè)背景即可解決這個(gè)問(wèn)題，如下：popupWindow.setBackgroundDrawable(new ColorDrawable())。每次顯示PopupWindow時(shí)都創(chuàng)建一個(gè)新的PopupWindow對(duì)象，其實(shí)可以復(fù)用一個(gè)PopupWindow對(duì)象的。即每次創(chuàng)建前先判斷popupwindow是否為空。
Listiview條目的編寫(xiě)較為定。這里做了兩處的優(yōu)化。一個(gè)是服用conterview，開(kāi)始操作之前判斷conterview是否為空。若為空創(chuàng)建一個(gè)新的view，否則復(fù)用被回收的conterview。另一處的優(yōu)化是，每一次finviewbyid會(huì)消耗大量的內(nèi)存。因此可以單獨(dú)定義一個(gè)類，存放控件，在cnterview為空時(shí)創(chuàng)建一次。每次調(diào)用時(shí)只需要調(diào)用定義類中的控件。還有一點(diǎn)是，要是條目上的刪除圖標(biāo)有用還要對(duì)刪除圖片設(shè)定一個(gè)點(diǎn)擊事件。一個(gè)小細(xì)節(jié)是，當(dāng)listvie條目中存在button及其子類時(shí)，會(huì)搶占焦點(diǎn)。因此這里刪除圖片的標(biāo)簽用的是imageview。當(dāng)然你也可以采取其他方式，比如，在條目的根布局加上這個(gè)屬性：android:descendantFocusability="blocksDescendants"。

主界面的布局：

<?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"
  android:layout_margin="17dp"
  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.popuwindow.MainActivity">

  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
      android:id="@+id/et_number"
      android:layout_width="200dp"
      android:layout_height="wrap_content"
      android:hint="輸入賬號(hào)" />

    <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignBottom="@id/et_number"
      android:layout_alignRight="@id/et_number"
      android:layout_alignTop="@id/et_number"
      android:background="@null"
      android:onClick="showNumberListToggle"
      android:src="@mipmap/down_arrow" />
  </RelativeLayout>
</RelativeLayout>

listview條目的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center_vertical"
  android:orientation="horizontal"
  android:padding="6dp">

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/user" />

  <TextView
    android:id="@+id/tv_numer"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="6dp"
    android:layout_weight="1"
    android:text="10000"
    android:textSize="18sp" />

  <ImageView
    android:id="@+id/ib_del"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:src="@mipmap/delete" />
</LinearLayout>

單獨(dú)寫(xiě)一個(gè)listview。

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:cacheColorHint="@null"
  android:background="@mipmap/listview_background"
  android:descendantFocusability="blocksDescendants">
</ListView>

主程序中的邏輯。

import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.PopupWindow;

public class MainActivity extends AppCompatActivity {
  private EditText et_number;
  private PopupWindow popupwindow;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    et_number = (EditText) findViewById(R.id.et_number);
  }

  public void showNumberListToggle(View view) {
    if (popupwindow == null) {          //復(fù)用popupwindow
      View contentView = createContent();
      int width = et_number.getWidth() - 4;
      int height = 400;
      boolean focusable = true;
      popupwindow = new PopupWindow(contentView, width, height, focusable);
      popupwindow.setBackgroundDrawable(new ColorDrawable());
    }
    View anchor = et_number;
    int xoff = 2;
    int yoff = -5;
    popupwindow.showAsDropDown(anchor, xoff, yoff);
  }

  private View createContent() {
      ListView lv = (ListView) View.inflate(this, R.layout.activity_list, null);
      lv.setAdapter(new NumberListAdapter());
      lv.setVerticalScrollBarEnabled(false);
      lv.setOnItemClickListener(monitemclickListener);
    return lv;
  }

  AdapterView.OnItemClickListener monitemclickListener = new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
      String number = (String) parent.getItemAtPosition(position);
      et_number.setText(number);
      popupwindow.dismiss();
    }
  };
}

適配器的編寫(xiě)

import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by huang on 2016/11/22.
 */
public class NumberListAdapter extends BaseAdapter {
  private ArrayList<String> numbers = new ArrayList();
  
  {
    for (int i = 0; i < 30; i++) {
      numbers.add(10000 + i + "" );
    }
  }

  @Override
  public int getCount() {
    return numbers.size();
  }

  @Override
  public Object getItem(int position) {
    return numbers.get(position);
  }

  @Override
  public long getItemId(int position) {
    return position;
  }

  @Override
  public View getView(final int position, View convertView, ViewGroup parent) {
    View view;
    viewHolder holder;
    if(convertView == null){
      view = View.inflate(parent.getContext(),R.layout.item_number_list,null);
      holder = new viewHolder();
      holder.ib_del = (ImageView) view.findViewById(R.id.ib_del);
      holder.tv_number = (TextView) view.findViewById(R.id.tv_numer);
      view.setTag(holder);
    }else{
      view = convertView;
      holder = (viewHolder)view.getTag();
    }
    holder.ib_del.setImageResource(R.mipmap.delete);
    holder.tv_number.setText(numbers.get(position));
    holder.ib_del.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        numbers.remove(position);
        notifyDataSetChanged();
      }
    });
    return view;
  }

  static class viewHolder{
     TextView tv_number;
     ImageView ib_del;
  }
}

案例三 viewpager實(shí)現(xiàn)輪播圖：

功能介紹: 廣告條的實(shí)現(xiàn)，又被稱為輪播圖。在手機(jī)界面的最上方放置一個(gè)ViewPager功能，實(shí)現(xiàn)界面的左右滑動(dòng)?；瑒?dòng)又分為兩種，一種是間隔一定的時(shí)間自動(dòng)滑動(dòng)，同時(shí)還支持手勢(shì)的左右滑動(dòng)。一個(gè)小細(xì)節(jié)是在輪播圖底部放置和圖片數(shù)量相等的小點(diǎn)，用于表示當(dāng)前哪個(gè)圖片被選中。
實(shí)現(xiàn)步驟：

1. 布局文件有兩部分組成，一個(gè)是viewpager,一個(gè)是底部的條和小圓點(diǎn)。Viewpager存在于v4包下，因此可兼容到Android1.6。底部的條和小圓點(diǎn)放在一個(gè)線性布局中，讓放在viewpager的底部，同時(shí)文字和圓點(diǎn)為中心位置。這里特別說(shuō)一下小圓點(diǎn)的實(shí)現(xiàn)。小圓點(diǎn)使用shape圖做出來(lái)的。由于無(wú)法再布局文件中獲取圓點(diǎn)的個(gè)數(shù)，因此可以在布局文件中放置一個(gè)LinearLayout，然后在java代碼中將view對(duì)象向該LinearLayout中添加。同時(shí)將白點(diǎn)和黑點(diǎn)的狀態(tài)選擇器設(shè)置為view的背景。
2. 接下來(lái)是viewpager的編寫(xiě)。編寫(xiě)viewpager的關(guān)鍵是寫(xiě)適配器。寫(xiě)一個(gè)類繼承PagerAdapter，重寫(xiě)其中的方法。Viewpager默認(rèn)是加載三張圖片，屏幕中間一張，屏幕左邊和屏幕右邊各一張。我們希望輪播圖能夠循環(huán)的播放，因此可以給getcount返回一個(gè)足夠大的值，初始化輪播圖時(shí)，將輪播圖的初始位置設(shè)置在中間，這樣就可以實(shí)現(xiàn)循環(huán)播放。當(dāng)我們把getcount返回值設(shè)為一個(gè)很大的值時(shí)，在instantiateItem中也要對(duì)position進(jìn)行判斷。傳入的的position是一個(gè)極大的值，但是圖片的數(shù)量確實(shí)有限的，因此可以對(duì)position取余，這樣就可以把position的位置和圖片的數(shù)量對(duì)應(yīng)起來(lái)。
3. 實(shí)現(xiàn)自動(dòng)播放需要用到消息機(jī)制，間隔三秒調(diào)用顯示下一張圖片的方法。顯示下一張圖片是調(diào)用viewpager的setCurrentItem，傳入下一個(gè)圖片的item數(shù)。手指滑動(dòng)時(shí)viewpager自身就有的功能，因此不需要再定義。
4. 最后要實(shí)現(xiàn)的功能是，viewpager底部的文字和小圓點(diǎn)跟隨圖片變化。這時(shí)候可以設(shè)定一個(gè)viewpager的監(jiān)聽(tīng)事件，當(dāng)圖片發(fā)生改變時(shí)改變textview的值。然后遍歷linearlayout的子view（子view中存發(fā)的是小圓點(diǎn)），當(dāng)圓點(diǎn)的序列號(hào)和圖片的序列號(hào)一直是，則選中圓點(diǎn)。當(dāng)然，這里同樣要對(duì)position取余，將position轉(zhuǎn)化到于圖片大小一致的范圍。

主界面的實(shí)現(xiàn)：

<?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"
  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.advertisement.MainActivity">

  <android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="150dp" />

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/view_pager"
    android:background="@color/trans_balck"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="5dp">

    <TextView
      android:id="@+id/tv_desc"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="圖片描述"
      android:textColor="@android:color/white" />

    <LinearLayout
      android:id="@+id/ll_dots"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal"></LinearLayout>
  </LinearLayout>
</RelativeLayout>

狀態(tài)選擇器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="true" android:drawable="@drawable/shape_dot_select"/>
  <item android:drawable="@drawable/shape_dot_normal"/>
</selector>

shape圖的繪制

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
   <solid android:color="@color/trans_balck"/>
</shape>

<節(jié)省空間， 兩個(gè)寫(xiě)下一起>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
   <solid android:color="@android:color/white"/>
</shape>

主程序中的業(yè)務(wù)邏輯

import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
  private static final String TAG = "MainActivity";
  private int[] imageResids = {R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e};
  private String[] desc = {
      "鞏俐不低俗，我就不能低俗",
      "撲樹(shù)又回來(lái)啦！再唱經(jīng)典老歌引萬(wàn)人大合唱",
      "揭秘北京電影如何升級(jí)",
      "樂(lè)視網(wǎng)TV版大派送",
      "熱血屌絲的反殺"
  };

  private LinearLayout ll_dots;
  private TextView tv_desc;
  private ViewPager viewpager;
  private static final int SHOW_NEXT_PAGE = 0;

  private Handler handler = new Handler() ;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ll_dots = (LinearLayout) findViewById(R.id.ll_dots);
    tv_desc = (TextView) findViewById(R.id.tv_desc);
    viewpager = (ViewPager) findViewById(R.id.view_pager);
    viewpager.setAdapter(new BannerAapter(imageResids));
    viewpager.setOnPageChangeListener(listener);
    initDot();
    changeDotandDesc(0);
    viewpager.setCurrentItem(viewpager.getAdapter().getCount() / 2);
    handler.postDelayed(mRunnable,3000);
  }

  Runnable mRunnable = new Runnable() {
    @Override
    public void run() {
      shownextpage();
    }
  };
  /**初始化小圓點(diǎn)*/
  private void initDot() {
    for (int i = 0; i < imageResids.length; i++) {
      int _5dp = dp2px(5);
      LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(_5dp, _5dp);
      params.leftMargin = _5dp;
      View dot = new View(this);
      dot.setLayoutParams(params);
      dot.setBackgroundResource(R.drawable.select_dot);
      ll_dots.addView(dot);
    }
  }
  /**將pd數(shù)據(jù)轉(zhuǎn)化為px數(shù)據(jù)*/
  private int dp2px(int pd) {
    float desity = getResources().getDisplayMetrics().density;
    return (int) (pd * desity + 0.5f);
  }

  ViewPager.OnPageChangeListener listener = new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
      changeDotandDesc(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
  };

  public void changeDotandDesc(int position) {
    position = position % ll_dots.getChildCount();
    tv_desc.setText(desc[position]);
    for (int i = 0; i < ll_dots.getChildCount(); i++) {
      Log.i(TAG, "changeDotandDesc: " + i+ "  " + position);
      ll_dots.getChildAt(i).setSelected(i == position);
    }
  }

  private void shownextpage() {
    int currenItem = viewpager.getCurrentItem();
    viewpager.setCurrentItem(currenItem + 1);
    handler.postDelayed(mRunnable,3000);
  }
}

適配器的編寫(xiě)：

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

/**
 * Created by huang on 2016/11/22.
 */
public class BannerAapter extends PagerAdapter {
  private int[] imageResIds;

  public BannerAapter(int[] imageResIds) {
    this.imageResIds = imageResIds;
  }

  @Override
  public int getCount() {
    return imageResIds.length * 10000 * 100;
  }

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

  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    ImageView imageview = new ImageView(container.getContext());
    position = position % imageResIds.length;
    imageview.setBackgroundResource(imageResIds[position]);
    container.addView(imageview);
    return imageview;
  }

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: