2. 程式人生 > >Android從零擼美團(三) - Android多標籤tab滑動切換 - 自定義View快速實現高度定製封裝

Android從零擼美團(三) - Android多標籤tab滑動切換 - 自定義View快速實現高度定製封裝

阿新 • • 發佈：2018-11-05

這是【從零擼美團】系列文章第三篇
【從零擼美團】是一個高仿美團的開源專案，旨在鞏固 Android 相關知識的同時，幫助到有需要的小夥伴。
GitHub 原始碼地址：github.com/cachecats/L…

Android從零擼美團(一) - 統一管理 Gradle 依賴 提取到單獨檔案中

Android從零擼美團(二) - 仿美團下拉重新整理自定義動畫

Android從零擼美團(四) - 美團首頁佈局解析及實現 - Banner+自定義View+SmartRefreshLayout下拉重新整理上拉載入更多

每個專案基本都會有多個 Tab ，以期在有限的螢幕空間展現更多的功能。 有需求就會有市場，如今也出現了很多優秀的 tab 切換框架，使用者眾多。

但是深入思考之後還是決定自己造輪子~

因為框架雖好，可不要貪杯哦~ 使用第三方框架最大的問題在於並不能完全滿足實際需求，有的是 icon 圖片 跟文字間距無法調整，有的後期會出現各種各樣問題，不利於維護。 最重要的是自己寫一個也不是很複雜，有研究框架填坑的時間也就寫出來了。

先看怎麼用：一句程式碼搞定

tabWidget.init(getSupportFragmentManager(), fragmentList);
複製程式碼

再上效果圖：

在這裡插入圖片描述

你沒看錯，長得跟美團一模一樣，畢竟這個專案就叫【從零擼美團】 ㄟ( ▔, ▔ )ㄏ

一、思路

底部 tab 佈局有很多實現方式，比如 RadioButton、FragmentTabHost、自定義組合View等。這裡採用的是自定義組合View方式，因為可定製度更高。 滑動切換基本都是採用 ViewPager + Fragment ，整合簡單，方案較成熟。這裡同樣採用這種方式。

二、準備

開始之前需要準備兩樣東西：

  1. 五個 tab 的選中和未選中狀態的 icon 圖片共計10張
  2. 五個 Fragment

這是最基本的素材，有了素材之後就開始幹活吧~ 由於要實現點選選中圖片和文字都變色成選中狀態，沒有選中就變成灰色，所以要對每組 icon 建立一個 selector xml檔案實現狀態切換。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_vector_home_pressed"
 
 android:state_activated="true" />
    <item android:drawable="@drawable/ic_vector_home_normal" android:state_activated="false" />
</selector>
複製程式碼

這裡用了 android:state_activated 作為狀態標記，因為最常用的 pressed 和 focused 都達不到長久保持狀態的要求，都是鬆開手指之後就恢復了。在程式碼中手動設定 activated 值就好。 注意：此處設定的是 icon 圖片，所以用 android:drawable，與下面文字使用的 android:color 有區別。

設定完圖片資源後，該設定文字顏色的 selector 了，因為文字的顏色也要跟著變。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/meituanGreen" android:state_activated="true" />
    <item android:color="@color/gray666" android:state_activated="false" />
</selector>
複製程式碼

注意圖片用 android:drawable，文字用 android:color 。

三、實現

準備工作做完之後，就開始正式的自定義View啦。

1. 寫佈局

首先是佈局檔案：

widget_custom_bottom_tab.xml

<?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="match_parent"
    android:orientation="vertical"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_tab_widget"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <!--下面的tab標籤佈局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="3dp"
        android:paddingTop="3dp"
        >

        <LinearLayout
            android:id="@+id/ll_menu_home_page"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_menu_home"
                style="@style/menuIconStyle"
                android:src="@drawable/selector_icon_menu_home" />

            <TextView
                android:id="@+id/tv_menu_home"
                style="@style/menuTextStyle"
                android:text="首頁" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_menu_nearby"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_menu_nearby"
                style="@style/menuIconStyle"
                android:src="@drawable/selector_icon_menu_nearby" />

            <TextView
                android:id="@+id/tv_menu_nearby"
                style="@style/menuTextStyle"
                android:text="附近" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_menu_discover"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_menu_discover"
                style="@style/menuIconStyle"
                android:src="@drawable/selector_icon_menu_discover" />

            <TextView
                android:id="@+id/tv_menu_discover"
                style="@style/menuTextStyle"
                android:text="發現" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_menu_order"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_menu_order"
                style="@style/menuIconStyle"
                android:src="@drawable/selector_icon_menu_order" />

            <TextView
                android:id="@+id/tv_menu_order"
                style="@style/menuTextStyle"
                android:text="訂單" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_menu_mine"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_menu_mine"
                style="@style/menuIconStyle"
                android:src="@drawable/selector_icon_menu_mine" />

            <TextView
                android:id="@+id/tv_menu_mine"
                style="@style/menuTextStyle"
                android:text="我的" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
複製程式碼

最外層用豎向排列的 LinearLayout 包裹，它有兩個子節點，上面是用於滑動和裝載 Fragment 的 ViewPager，下面是五個 Tab 的佈局。 為了方便管理把幾個 ImageView 和 TextView 的共有屬性抽取到 styles.xml 裡了：

    <!--選單欄的圖示樣式-->
    <style name="menuIconStyle" >
        <item name="android:layout_width">25dp</item>
        <item name="android:layout_height">25dp</item>
    </style>

    <!--選單欄的文字樣式-->
    <style name="menuTextStyle">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@drawable/selector_menu_text_color</item>
        <item name="android:textSize">12sp</item>
        <item name="android:layout_marginTop">3dp</item>
    </style>
複製程式碼

有了佈局檔案之後，就開始真正的自定義 View 吧。

2. 寫 Java 程式碼自定義View

新建 java 檔案 CustomBottomTabWidget 繼承自 LinearLayout。為什麼繼承 LinearLayout 呢？因為我們的佈局檔案根節點就是 LinearLayout 呀，根節點是什麼就繼承什麼。

先上程式碼吧：

package com.cachecats.meituan.widget.bottomtab;

import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;

import com.cachecats.meituan.R;
import com.cachecats.meituan.base.BaseFragment;

import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;


public class CustomBottomTabWidget extends LinearLayout {

    @BindView(R.id.ll_menu_home_page)
    LinearLayout llMenuHome;
    @BindView(R.id.ll_menu_nearby)
    LinearLayout llMenuNearby;
    @BindView(R.id.ll_menu_discover)
    LinearLayout llMenuDiscover;
    @BindView(R.id.ll_menu_order)
    LinearLayout llMenuOrder;
    @BindView(R.id.ll_menu_mine)
    LinearLayout llMenuMine;
    @BindView(R.id.vp_tab_widget)
    ViewPager viewPager;

    private FragmentManager mFragmentManager;
    private List<BaseFragment> mFragmentList;
    private TabPagerAdapter mAdapter;

    public CustomBottomTabWidget(Context context) {
        this(context, null, 0);
    }

    public CustomBottomTabWidget(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomBottomTabWidget(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        View view = View.inflate(context, R.layout.widget_custom_bottom_tab, this);
        ButterKnife.bind(view);

        //設定預設的選中項
        selectTab(MenuTab.HOME);

    }

    /**
     * 外部呼叫初始化，傳入必要的引數
     *
     * @param fm
     */
    public void init(FragmentManager fm, List<BaseFragment> fragmentList) {
        mFragmentManager = fm;
        mFragmentList = fragmentList;
        initViewPager();
    }

    /**
     * 初始化 ViewPager
     */
    private void initViewPager() {
        mAdapter = new TabPagerAdapter(mFragmentManager, mFragmentList);
        viewPager.setAdapter(mAdapter);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //將ViewPager與下面的tab關聯起來
                switch (position) {
                    case 0:
                        selectTab(MenuTab.HOME);
                        break;
                    case 1:
                        selectTab(MenuTab.NEARBY);
                        break;
                    case 2:
                        selectTab(MenuTab.DISCOVER);
                        break;
                    case 3:
                        selectTab(MenuTab.ORDER);
                        break;
                    case 4:
                        selectTab(MenuTab.MINE);
                        break;
                    default:
                        selectTab(MenuTab.HOME);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    /**
     * 點選事件集合
     */
    @OnClick({R.id.ll_menu_home_page, R.id.ll_menu_nearby, R.id.ll_menu_discover, R.id.ll_menu_order, R.id.ll_menu_mine})
    public void onViewClicked(View view) {

        switch (view.getId()) {
            case R.id.ll_menu_home_page:
                selectTab(MenuTab.HOME);
                //使ViewPager跟隨tab點選事件滑動
                viewPager.setCurrentItem(0);
                break;
            case R.id.ll_menu_nearby:
                selectTab(MenuTab.NEARBY);
                viewPager.setCurrentItem(1);
                break;
            case R.id.ll_menu_discover:
                selectTab(MenuTab.DISCOVER);
                viewPager.setCurrentItem(2);
                break;
            case R.id.ll_menu_order:
                selectTab(MenuTab.ORDER);
                viewPager.setCurrentItem(3);
                break;
            case R.id.ll_menu_mine:
                selectTab(MenuTab.MINE);
                viewPager.setCurrentItem(4);
                break;
        }
    }

    /**
     * 設定 Tab 的選中狀態
     *
     * @param tab 要選中的標籤
     */
    public void selectTab(MenuTab tab) {
        //先將所有tab取消選中，再單獨設定要選中的tab
        unCheckedAll();

        switch (tab) {
            case HOME:
                llMenuHome.setActivated(true);
                break;
            case NEARBY:
                llMenuNearby.setActivated(true);
                break;
            case DISCOVER:
                llMenuDiscover.setActivated(true);
                break;
            case ORDER:
                llMenuOrder.setActivated(true);
                break;
            case MINE:
                llMenuMine.setActivated(true);
        }

    }


    //讓所有tab都取消選中
    private void unCheckedAll() {
        llMenuHome.setActivated(false);
        llMenuNearby.setActivated(false);
        llMenuDiscover.setActivated(false);
        llMenuOrder.setActivated(false);
        llMenuMine.setActivated(false);
    }

    /**
     * tab的列舉型別
     */
    public enum MenuTab {
        HOME,
        NEARBY,
        DISCOVER,
        ORDER,
        MINE
    }
}
複製程式碼

註釋應該寫的很清楚了，這裡再強調幾個點：

  1. 實現了三個構造方法，這三個構造方法分別對應於不同的建立方式。如果不確定怎麼建立它就都實現吧，不會出錯。 既然不確定到底走哪個方法，那把初始化方法寫到哪個裡面呢？這兒有個小技巧，就是把一個引數的 super(context)，和兩個引數的 super(context, attrs) 分別改成：this(context, null, 0) 和 this(context, attrs, 0)。這樣無論走的哪個建構函式，最終都會走到三個引數的建構函式裡，我們只要把初始化操作放在這個函式裡就行了。
  2. 建構函式裡的這行程式碼：
    View view = View.inflate(context, R.layout.widget_custom_bottom_tab, this);
複製程式碼
    將 widget_custom_bottom_tab.xml 檔案與 java 程式碼綁定了起來，注意最後 一個引數是 this 而不是 null。
  3. 本專案用到了 ButterKnife 從 findViewById() 解脫出來。
  4. 切換選中未選中狀態的原理是每次點選的時候，先呼叫 unCheckedAll () 將所有 tab 都置為未選中狀態，再單獨設定要選中的 tab 為選中狀態 llMenuHome.setActivated(true);
  5. 實現 tab 的點選事件與 ViewPager 的滑動繫結需要在兩個地方寫邏輯： 1）tab 的點選回撥裡執行下面兩行程式碼，分別使 tab 變為選中狀態和讓 ViewPager 滑動到相應位置。
    selectTab(MenuTab.HOME);
//使ViewPager跟隨tab點選事件滑動
viewPager.setCurrentItem(0);
複製程式碼
    2）在 ViewPager 的監聽方法 onPageSelected() 中，每滑動到一個頁面，就呼叫 selectTab(MenuTab.HOME) 方法將對應的 tab 設定為選中狀態。
  6. 記得在構造方法裡設定預設的選中項：
     //設定預設的選中項
 selectTab(MenuTab.HOME);
複製程式碼

好啦，到這自定義 View 已經完成了。下面看看怎麼使用。

四、使用

在主頁的佈局檔案裡直接引用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.cachecats.meituan.app.MainActivity">

    <com.cachecats.meituan.widget.bottomtab.CustomBottomTabWidget
        android:id="@+id/tabWidget"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
複製程式碼

然後在 Activity 裡一句話呼叫：

tabWidget.init(getSupportFragmentManager(), fragmentList);
複製程式碼

就是這麼簡單！ 是不是很爽很清新？

貼出 MainActivity 完整程式碼：

package com.cachecats.meituan.app;

import android.os.Bundle;

import com.cachecats.meituan.MyApplication;
import com.cachecats.meituan.R;
import com.cachecats.meituan.app.discover.DiscoverFragment;
import com.cachecats.meituan.app.home.HomeFragment;
import com.cachecats.meituan.app.mine.MineFragment;
import com.cachecats.meituan.app.nearby.NearbyFragment;
import com.cachecats.meituan.app.order.OrderFragment;
import com.cachecats.meituan.base.BaseActivity;
import com.cachecats.meituan.base.BaseFragment;
import com.cachecats.meituan.di.DIHelper;
import com.cachecats.meituan.di.components.DaggerActivityComponent;
import com.cachecats.meituan.di.modules.ActivityModule;
import com.cachecats.meituan.widget.bottomtab.CustomBottomTabWidget;

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

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends BaseActivity {

    @BindView(R.id.tabWidget)
    CustomBottomTabWidget tabWidget;
    private List<BaseFragment> fragmentList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        DaggerActivityComponent.builder()
                .applicationComponent(MyApplication.getApplicationComponent())
                .activityModule(new ActivityModule(this))
                .build().inject(this);

        //初始化
        init();
    }

    private void init() {
        //構造Fragment的集合
        fragmentList = new ArrayList<>();
        fragmentList.add(new HomeFragment());
        fragmentList.add(new NearbyFragment());
        fragmentList.add(new DiscoverFragment());
        fragmentList.add(new OrderFragment());
        fragmentList.add(new MineFragment());

        //初始化CustomBottomTabWidget
        tabWidget.init(getSupportFragmentManager(), fragmentList);
    }
}

複製程式碼

整個程式碼很簡單，只需要構造出 Fragment 的列表傳給 CustomBottomTabWidget 就好啦。

總結：自己造輪子可能前期封裝花些時間，但自己寫的程式碼自己最清楚，幾個月後再改需求改程式碼能快速的定位到要改的地方，便於維護。 並且最後封裝完用起來也很簡單啊，不用在 Activity 裡寫那麼多配置程式碼，整體邏輯更清晰，耦合度更低。

以上就是用自定義 View 的方式實現高度定製化的多 tab 標籤滑動切換例項。
原始碼地址：github.com/cachecats/L…
歡迎下載，歡迎 star，歡迎點贊~

相關推薦

Android從零擼美團(三) - Android多標籤tab滑動切換 - 自定義View快速實現高度定製封裝

這是【從零擼美團】系列文章第三篇 【從零擼美團】是一個高仿美團的開源專案，旨在鞏固 Android 相關知識的同時，幫助到有需要的小夥伴。 GitHub 原始碼地址：github.com/cachecats/L… Android從零擼美團(一) - 統一管理 Gradle 依賴 提取到單獨檔案中 Andr

Android從零擼美團(二) - 仿美團下拉重新整理自定義動畫

這是【從零擼美團】系列文章第二篇。 專案地址：github.com/cachecats/L… 今天寫了下拉重新整理，框架用的是 SmartRefreshLayout ，不為啥，因為 Github 上它有 9.5k 個 star，中文支援好節省時間。 先上圖： 一、分析 美團的下拉載入動

從零擼美團Android(一) - 統一管理 Gradle 依賴 提取到單獨檔案中

前言 從今天開始帶大家一起從零開始擼一個美團Android版App。 【從零擼美團】這個專題將持續更新，用以詳細記錄分享開發過程，歡迎關注。 原始碼地址：github.com/cachecats/L… 專題的第一篇文章本來想按慣例講專案介紹、整體架構、程式碼規範之類的。但今天有點躁動，不想講那麼正經

Android多標籤tab滑動切換

這是【從零擼美團】系列文章第三篇 【從零擼美團】是一個高仿美團的開源專案，旨在鞏固 Android 相關知識的同時，幫助到有需要的小夥伴。 GitHub 原始碼地址：https://github.com/cachecats/LikeMeiTuan 每個專案基

Android繪圖機制（三）——自定義View的實現方式以及半弧圓新控制元件

Android繪圖機制（三）——自定義View的三種實現方式以及實戰專案操作 1.對現有的控制元件進行擴充套件 2.通過元件來實現新的控制元件

Android自定義View的實現方法，帶你一步步深入瞭解View(四)

不知不覺中，帶你一步步深入瞭解View系列的文章已經寫到第四篇了，回顧一下，我們一共學習了LayoutInflater的原理分析、檢視的繪製流程、檢視的狀態及重繪等知識，算是把View中很多重要的知識點都涉及到了。如果你還沒有看過我前面的幾篇文章，建議先去閱讀一下，多瞭解一些

Android自定義View的實現方法 帶你一步步深入瞭解View 四

                不知不覺中，帶你一步步深入瞭解View系列的文章已經寫到第四篇了，回顧一下，我們一共學習了LayoutInflater的原理分析、檢視的繪製流程、檢視的狀態及重繪等知識，算是把View中很多重要的知識點都涉及到了。如果你還沒有看過我前面的幾篇文章，建議先去閱讀一下，多瞭解一些原

Android自定義View繪圖實現拖影動畫

前幾天在“Android繪圖之漸隱動畫”一文中通過畫線實現了漸隱動畫，但裡面有個問題，畫筆較粗（大於1）時線段之間會有裂隙，我又改進了一下。這次效果好多了。 先看效果吧： 然後我們來說說基本的做法： 根據畫筆寬度，計算每一條線段兩個頂點對應的四個點，

我的Android進階之旅------>Android自定義View來實現解析lrc歌詞並同步滾動、上下拖動、縮放歌詞的功能

前言 最近有個專案有關於播放音樂時候，關於歌詞有以下幾個功能： 1、實現歌詞同步滾動的功能，即歌曲播放到哪句歌詞，就高亮地顯示出正在播放的這個歌詞； 2、實現上下拖動歌詞時候，可以拖動播放器的進度。即可以不停地上下拖動歌詞，

Android自定義view之實現帶checkbox的Snackbar

前言 最近專案要求實現一個類似於snackbar功能，但是又不完全是snackbar的外掛，本來想在Google提供的snackbar裡面進行更改，但是這樣太麻煩了，於是自己動手實現了一個snackbar。先看下效果圖： 1.要解決的問題 1.彈框裡面除了文字提示之外還有一個按鈕，這個按

Android自定義View之實現簡單炫酷的球體進度球

前言 最近一直在研究自定義view，正好專案中有一個根據下載進度來實現球體進度的需求，所以自己寫了個進度球，程式碼非常簡單。先看下效果： 效果還是非常不錯的。 準備知識 要實現上面的效果我們只要掌握兩個知識點就好了，一個是Handler機制，用於發訊息重新整理我們的進度球，一個是clip

Android自定義view之實現仿抖音雙擊點贊單擊暫停特效

       2018年抖音、快手、火山等短視訊App比較火，最近自己做短視訊專案時有個需求，就是類似抖音的點贊特效，單擊螢幕時視訊暫停，再次點選時視訊恢復播放，雙擊或者連續多次點選時出現點贊特效(飄小心心特效)，而且是全屏可以隨意點選，都

Android自定義View完美實現指示器位置隨進度變化的IndicateProgressView

該文章同步釋出在公眾號”LinminTech”上，請在本文最後掃碼關注，獲取更多精彩Android開發文章。 效果圖 需求 在平時開發過程中，UI經常要求實現如上圖所示的ProgressBar，但是Android系統自帶的ProgressBar

android高仿抖音、點餐介面、天氣專案、自定義view指示、爬取美女圖片等原始碼

Android精選原始碼 Android優質部落格 簡介最近東西寫的挺多的，這不又要弄一個類似於京東的地址選擇器，然後剛開

Android自定義View（CustomCalendar－定製日曆控制元件）

目錄：   應專案需求，需要做一個日曆控制元件，效果圖如下：        接到需求後，沒有立即查詢是否有相關開源日曆控制元件可用、系統日曆控制元件是否能滿足 ，第一反應就是這個控制元件該怎麼畫？誰叫咱自定義控制元件技術牛逼呢O

Android自定義View來實現解析lrc歌詞同步滾動、上下拖動、縮放歌詞等功能

http://blog.csdn.net/ouyang_peng/article/details/50813419 前言 最近有個專案有關於播放音樂時候，關於歌詞有以下幾個功能：  1、實現歌詞同步滾動的功能，即歌曲播放到哪句

Android 自定義View，實現折線圖

最近要完成一個折線圖控制元件，用來顯示一系列的狀態，並可以進行滑動。雖然現在有很多大牛寫好的控制元件可以直接使用，但我感覺那些控制元件是給高手的使用的，對於我這樣的菜鳥，還是腳踏實地，自己慢慢碼程式碼，才可以提高。下面就是結果圖（每種狀態用一個表情圖片表示）： 1 主頁

Android-通過自定義View元件實現跟隨手指移動的ImageView元件

在Android應用程式中繪製一個跟隨手指的小兔子，當手指在螢幕上拖動時，小兔子將跟隨手指拖動的軌跡移動。 實現本例項時，首先需要先繼承Android.view.View類，然後通過重寫其onDraw()方法設定小兔子的預設顯示位置，最後重寫其觸控事件，該事件

Android自定義View——簡單實現邊緣凹凸電子票效果

效果展示原理分析View繼承LinearLayout，在View的上下邊緣畫出白色的圓形即可，這裡只要計算出圓的個數和圓的迴圈規律即可，下面請看分析我們取卡片的前2個凹凸來看，將其分為四部分，並且兩部分為迴圈可得到另兩部分，其中我們只要計算出圓的半徑位置，我們就可以重複的畫出

Android自定義View，實現全屏滑動的DrawerLayout

    對與DrawerLayout大家應該用過，是Google官方推出的一種抽屜式導航控制元件。開啟左右兩邊選單的方式是從手機屏 幕的邊緣處滑動來觸發，不過總有些**的需求要讓它可以全屏滑動觸發選單，網上也有一些解決辦法，無非就是用 setDrawerLeftE