一.概述

1.頁面功能分析

整體上來說，左邊是一個ListView，右邊是一個自定義View，但是左邊的ListView和我們平常使用的ListView還有一點點不同，就是在ListView中我對所有的聯絡人進行了分組，那麼這種效果的實現最常見的就是兩種思路：

1.使用ExpandableListView來實現這種分組效果

2.使用普通ListView，在構造Adapter時實現SectionIndexer介面，然後在Adapter中做相應的處理

這兩種方式都不難，都屬於普通控制元件的使用，那麼這裡我們使用第二種方式來實現，第一種方式的實現方法大家可以自行研究，如果你還不熟悉ExpandableListView的使用，可以參考我的另外兩篇部落格：

1.使用ExpandableListView實現一個時光軸

2.android開發之ExpandableListView的使用，實現類似QQ好友列表

OK，這是我們左邊ListView的實現思路，右邊這個東東就是我們今天的主角，這裡我通過自定義一個View來實現，View中的A、B......#這些字元我都通過canvas的drawText方法繪製上去。然後重寫onTouchEvent方法來實現事件監聽。

2.要實現的效果

要實現的效果如上圖所示，但是大家看圖片有些地方可能還不太清楚，所以這裡我再強調一下：

1.左邊的ListView對資料進行分組顯示

2.當左邊ListView滑動的時候，右邊滑動控制元件中的文字顏色能夠跟隨左邊ListView的滑動自動變化

3.當手指在右邊的滑動控制元件上滑動時，手指滑動到的地方的文字顏色應當發生變化，同時在整個頁面的正中央有一個TextView顯示手指目前按下的文字

4.當手指按下右邊的滑動控制元件時，右邊的滑動控制元件背景變為灰色，手指鬆開後，右邊的滑動控制元件又變為透明色

二.左邊ListView分組效果的實現

無論多大的工程，我們都要將之分解為一個個細小的功能塊分步來實現，那麼這裡我們就先來看看左邊的ListView的分組的實現，這個效果實現之後，我們再來看看右邊的滑動控制元件該怎麼實現。

首先我需要在佈局檔案中新增一個ListView，這個很簡單，和普通的ListView一模一樣，我就不貼程式碼了，另外，針對ListView中的資料集，我需要自建一個實體類，該實體類如下：

[java] view plain copy print ?

/**
* Created by wangsong on 2016/4/24.
*/
public class User {
private int img;
private String username;
private String pinyin;
private String firstLetter;
public User() {
}
public String getFirstLetter() {
return firstLetter;
}
public void setFirstLetter(String firstLetter) {
this.firstLetter = firstLetter;
}
public int getImg() {
return img;
}
public void setImg(int img) {
this.img = img;
}
public String getPinyin() {
return pinyin;
}
public void setPinyin(String pinyin) {
this.pinyin = pinyin;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public User(String firstLetter, int img, String pinyin, String username) {
this.firstLetter = firstLetter;
this.img = img;
this.pinyin = pinyin;
this.username = username;
}
}

username用來儲存使用者名稱，img表示使用者影象的資源id（這裡我沒有準備相應的圖片，大家有興趣可以自行新增），pinyin表示使用者姓名的拼音，firstLetter表示使用者姓名拼音的首字母，OK ，就這麼簡單的幾個屬性。至於資料來源，我在strings.xml檔案中添加了許多資料，這裡就不貼出來了，大家可以直接在文末下載原始碼看。知道了資料來源，知道了實體類，我們來看看在MainActivity中怎麼樣來初始化資料：

[java] view plain copy print ?

private void initData() {
list = new ArrayList<>();
String[] allUserNames = getResources().getStringArray(R.array.arrUsernames);
for (String allUserName : allUserNames) {
User user = new User();
user.setUsername(allUserName);
String convert = ChineseToPinyinHelper.getInstance().getPinyin(allUserName).toUpperCase();
user.setPinyin(convert);
String substring = convert.substring(0, 1);
if (substring.matches("[A-Z]")) {
user.setFirstLetter(substring);
}else{
user.setFirstLetter("#");
}
list.add(user);
}
Collections.sort(list, new Comparator<User>() {
@Override
public int compare(User lhs, User rhs) {
if (lhs.getFirstLetter().contains("#")) {
return 1;
} else if (rhs.getFirstLetter().contains("#")) {
return -1;
}else{
return lhs.getFirstLetter().compareTo(rhs.getFirstLetter());
}
}
});
}

首先建立一個List集合用來存放所有的資料，然後從strings.xml檔案中讀取出來所有的資料，遍歷資料然後儲存到List集合中，在遍歷的過程中，我通過ChineseToPinyinHelper這個工具類來將中文轉為拼音，然後擷取拼音的第一個字母，如果該字母是A～Z，那麼直接設定給user物件的firstLetter屬性，否則user物件的firstLetter屬性為一個#，這是由於我的資料來源中有一些不是以漢字開頭的姓名，而是以其他字元開頭的姓名，那麼我將這些統一歸為#這個分組。

OK，資料來源構造好之後，我還需要對List集合進行一個簡單的排序，那麼這個排序是Java中的操作，我這裡就不再贅述。

構造完資料來源之後，接著就該是構造ListView的Adapter了，我們來看看這個怎麼做，先來看看原始碼：

[java] view plain copy print ?

/**
* Created by wangsong on 2016/4/24.
*/
public class MyAdapter extends BaseAdapter implements SectionIndexer {
private List<User> list;
private Context context;
private LayoutInflater inflater;
public MyAdapter(Context context, List<User> list) {
this.context = context;
this.list = list;
inflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object getItem(int position) {
return list.get(position);
相關推薦

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。一.概述 1.頁面功能分析整體上來說，左邊是一個ListView，右邊是一個自定義View，但

Android自定義View之仿QQ側滑選單實現

最近，由於正在做的一個應用中要用到側滑選單，所以通過查資料看視訊，學習了一下自定義View，實現一個類似於QQ的側滑選單，順便還將其封裝為自定義元件，可以實現類似QQ的側滑選單和抽屜式側滑選單兩種選單。下面先放上效果圖：我們這裡的側

Android自定義View之仿京東售後稽核進度

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出概述：同常在做商城類的App時，都會有售後的需求，而售後流程通常會因為不同的業務，而分為不確定的幾個步驟，如下圖所示：那麼問題就來了，像這樣的效果如何實現呢？讓我們先放下這個問題，先看

Android 自定義View之仿華為圓形載入進度條

效果圖實現思路可以看出該View可分為三個部分來實現最外圍的圓，該部分需要區分進度圓和底部的刻度圓，進度部分的刻度需要和底色刻度區分開來中間顯示的文字進度，需要讓文字在View中居中顯示旋轉的小圓點，小圓點需要模擬小球下落運動時的加速度

android 自定義view之側滑效果

效果圖：看網上的都是兩個view拼接，預設右側的不顯示，水平移動的時候把右側的view顯示出來。但是看最新版QQ上的效果不是這樣的，但給人的感覺卻很好，所以獻醜來一發比較高仿的。知識點： 1、ViewDragHelper 的用法； 2、滑動衝突的解決； 3、自定

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

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

Android自定義View之(下拉重新整理+側滑刪除)

以前專案中用到了一個放qq的側滑刪除的效果，結果github上一搜就copy了一個，不得不說大神們寫的真心牛逼，那個時候呢看到一個東西能用就可以了，也不管怎麼實現的，現在反過來一看，原來自定義還可以這麼玩，當然，前面專案中也因此出現了一個bug，就是我使用的是P

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。二、效果圖首先看一下效果圖：看效果還挺炫酷

Android自定義View之Canvas

https://www.jianshu.com/p/fb18c28d6627 用繼承View的方式來自定義View，我們就需要重寫onDraw方法，也就是得咱自己來畫圖了。畫圖就得用到畫筆和畫布，也就是Paint和Canvas。我們來了解下Canvas。 Canvas Canvas我們可

Android 自定義View之Canvas詳解

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android : 自定義View之流式佈局

寫了一個很簡單的佈局這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

Android自定義View之getTextBounds()

在Android自定義View的過程中一定會用到Paint，而paint屬性中有一個方法getTextBounds(String text,int start,int end,Rext bounds),它的中文解釋是：返回一個包含中文的矩形邊界，位置為(start,end) 英文解釋：Retur

Android自定義View之自定義屬性

在Android開發中經常會用到自定義View的情況，而在自定義View時，自定義屬性是必須用到的。 1、新建一個自定義View如CustomView 它的自定義屬性主要是通過declare-styleable標籤為其配置自定義屬性。具體做法是：在res/values/目錄下增加一個reso

Android -- 自定義view之StepView

先看看實現的效果： 2，首先我們來看看我們常規的自定義view的基礎步驟吧 1，繼承View，重寫構造方法 2，自定義屬性 3，重寫onMeasure（）測量控制元件高度 4，重寫onDra

Android 自定義View 之可隨意拖動的View

因為趕專案本人停更兩個月從今天開始又可以更新了今天說一下這個可隨意拖動的view 簡單說一下這個view效果和發展一開始這種效果是使用在網頁端的特別是購物類例如某寶某東購物車和客服視窗都有使用這個懸浮可拖動的設計效果後來才發展到的移動端還有

自定義View之仿ios分段選擇器

一：效果 1.1 可動態新增或刪除tab，更改指定tab的文字。二：實現思路自定義view，實現效果動態建立textview，有幾個tab建立幾個textview 第一個tab和最後一個tab為圓角矩形，其餘的為直角矩形，通過shape檔案完成預設選

Android 自定義View之咖啡動畫

文章目錄效果畫杯子畫杯墊畫煙霧效果大概思路自定義view，直接繼承view 複寫onSizeChanged()方法，在此計算杯墊，杯子，煙霧效果的path 在onDraw()方法中，描繪杯墊，杯子處理煙霧動畫效果畫杯子這裡需要畫兩部分內容，第

Android 自定義View之下雨動畫

文章目錄效果思路畫雲畫雨滴優化效果開始前先做個熱身( ˘•灬•˘ ) 自己實現比較容易，但是到了要出部落格整理思路，總結要點的時候就撓頭，不知雲所以，所以最簡單的還是如果對安卓UI有興趣的朋友可以加我好友互相探討，思路思路比較簡單，整個view無

android自定義View之自定義EditText（新增刪除功能）

           忙忙碌碌20天，新的專案終於接近尾聲了。今天公司召集幾個使用者體驗師和美工一起吐糟這20天做的這個新產品，對於產品提出了很多建議，這幾天就改介面了。在這個專案中大量的使用了EditText元件，並且添加了刪除功能。這裡面都是用RelativeLayou

android自定義view之畫圓隨著手指移動

public class MyView extends View { private Paint mFanPaint,mTextPaint;//扇形畫筆和文字畫筆 public float AxisX=100; public float AxisY=100; public MyView(

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

一.概述

1.頁面功能分析

2.要實現的效果

二.左邊ListView分組效果的實現

相關推薦