2. 程式人生 > >Android通訊錄字母排序城市列表展示效果

Android通訊錄字母排序城市列表展示效果

阿新 • • 發佈：2019-01-03

本篇文章主要給大家介紹一個通訊錄列表字母A——Z排序展示的效果，其實很多場景都會用到，今天一個同事做城市列表也需要類似這樣的效果，於是乎我就給他簡單寫了一個demo，剛好藉此機會將此demo和效果展示給正在學習和需要用到該效果的android開發者。個人認為學習android是一個日積月累的過程，見得多了，寫的多了，自身能力自然會提升，所以建議廣大朋友可以平時多積累一些專案開發中常用的demo，這樣我相信在工作中能極大的提高開發效率。時間長了，也會慢慢發現自己可以寫一些簡單的demo，可能哪一天別人也在學習著自己寫的demo，這樣豈不是一件很開心的事情。

還是先上效果圖：
這裡寫圖片描述

這裡寫圖片描述


文章最底部有本篇文章Demo下載地址！

注意本篇文章以下幾點：

  1. Demo的展示資料儲存在本地assets中的drugs.xml中，通過解析XML檔案或許資料集，其實解析完成後依然是一個List，所以這點大可放心，資料庫定會返回集合資料的。
  2. 介面右邊A——Z通過自定義View實現一個SideBar，定義觸控事件介面OnTouchingLetterChangedListener並實現一個public void onTouchingLetterChanged(String s);方法，在使用者點選觸控右邊SideBar時判斷點選是否在SideBar控制元件上，然後設定點選的字母即可。
  3. 將獲取到的List集合通過拼音來進行A——Z排序展示，本篇文章用到”pinyin4j-2.5.0.jar”工具來進行轉換操作。
    pinyin4j-2.5.0.jar下載地址：http://download.csdn.net/detail/jaynm/9570829
  4. 自定義EditText，獲取EditText的DrawableRight,假如沒有設定我們就使用預設的圖片。

自定義SideBar實現右側A——Z列表，建立陣列String[]b，重寫onDraw()方法，獲取View對應的高度和寬度，然後獲取到每一個字母對應的高度，遍歷String[]b，給26個字母設定顏色、字型、型別等屬性並且進行繪製。

/**
 * 重寫onDraw()這個方法
 */
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 獲取焦點改變背景顏色.
    int height = getHeight();// 獲取對應高度
    int width = getWidth(); // 獲取對應寬度
    int singleHeight = height / b.length;/// 獲取每一個字母的高度

    for (int i = 0; i < b.length; i++) {
        paint.setColor(Color.parseColor("#CDCDCD"));
        // paint.setColor(Color.WHITE);
        paint.setTypeface(Typeface.DEFAULT_BOLD);
        paint.setAntiAlias(true);
        paint.setTextSize(20);
        // 選中的狀態
        if (i == choose) {
            paint.setColor(Color.parseColor("#29333d"));
            paint.setFakeBoldText(true);
        }
        // x座標等於中間-字串寬度的一半.
        float xPos = width / 2 - paint.measureText(b[i]) / 2;
        float yPos = singleHeight * i + singleHeight;
        canvas.drawText(b[i], xPos, yPos, paint);
        paint.reset();// 重置畫筆
    }

}

最重要的是需要重寫dispatchTouchEvent(MotionEvent event)方法進行使用者點選監聽。event.getAction()獲取手勢狀態，這裡多說一個事件傳遞機制的知識點內容：
MotionEvent 常見的動作常量：

  • public static final int ACTION_DOWN = 0;單點觸控動作

  • public static final int ACTION_UP = 1;單點觸控離開動作

  • public static final int ACTION_MOVE = 2;觸控點移動動作

  • public static final int ACTION_CANCEL = 3;觸控動作取消

  • public static final int ACTION_OUTSIDE = 4;觸控動作超出邊界

  • public static final int ACTION_POINTER_DOWN = 5;多點觸控動作

  • public static final int ACTION_POINTER_UP = 6;多點離開動作

Android事件傳遞機制前，明確android的兩大基礎控制元件型別:View和ViewGroup。View即普通的控制元件，沒有子佈局的，如Button、TextView. ViewGroup繼承自View，表示可以有子控制元件，如Linearlayout、Listview這些。而事件即MotionEvent，最重要的有3個:
(1)MotionEvent.ACTION_DOWN 按下View，是所有事件的開始
(2)MotionEvent.ACTION_MOVE 滑動事件
(3)MotionEvent.ACTION_UP 與down對應，表示擡起

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
    final int action = event.getAction();
    final float y = event.getY();// 點選y座標
    final int oldChoose = choose;
    final OnTouchingLetterChangedListener listener = onTouchingLetterChangedListener;
    // 點選y座標所佔總高度的比例*b陣列的長度就等於點選b中的個數.
    final int c = (int) (y / getHeight() * b.length);

    switch (action) {
        case MotionEvent.ACTION_UP:
            setBackgroundDrawable(new ColorDrawable(0x00000000));
            choose = -1;//
            invalidate();
            if (mTextDialog != null) {
                mTextDialog.setVisibility(View.INVISIBLE);
            }
            break;
        default:
            setBackgroundResource(R.drawable.sidebar_background);
            if (oldChoose != c) {
                if (c >= 0 && c < b.length) {
                    if (listener != null) {
                        //回撥介面
                        listener.onTouchingLetterChanged(b[c]);
                    }
                    if (mTextDialog != null) {
                        mTextDialog.setText(b[c]);
                        mTextDialog.setVisibility(View.VISIBLE);
                    }
                    choose = c;
                    invalidate();
                }
            }
            break;
    }
    return true;
}

對於View來說，事件傳遞機制有兩個函式：dispatchTouchEvent負責分發事件，在dispatchTouchEvent裡又會呼叫onTouchEvent表示執行事件，或者說消費事件，結合原始碼分析其流程。事件傳遞的入口是View的dispatchTouchEvent()函式:
本demo中只區分MotionEvent.ACTION_UP事件和預設狀態，在預設狀態下判斷當前點選觸控的字母，然後OnTouchingLetterChangedListener介面回調當前點選的字母listener.onTouchingLetterChanged(b[c]);在ListView中更新列表資料。

// 設定右側SideBar觸控監聽
sideBar.setOnTouchingLetterChangedListener(new SideBar.OnTouchingLetterChangedListener() {

    @Override
    public void onTouchingLetterChanged(String s) {
        // 該字母首次出現的位置
        int position = adapter.getPositionForSection(s.charAt(0));
        if (position != -1) {
            sortListView.setSelection(position);
        }

    }
});

自定義EditText，新增刪除按鈕的引用Drawable mClearDrawable，然後獲取EditText的DrawableRight,假如沒有設定我們就使用預設的圖片。
因為我們不能直接給EditText設定點選事件，所以我們用記住我們按下的位置來模擬點選事件，當我們按下的位置 在 EditText的寬度 - 圖示到控制元件右邊的間距 - 圖示的寬度和EditText的寬度 - 圖示到控制元件右邊的間距之間我們就算點選了圖示，豎直方向沒有考慮。

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (getCompoundDrawables()[2] != null) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            boolean touchable = event.getX() > (getWidth()
                    - getPaddingRight() - mClearDrawable.getIntrinsicWidth())
                    && (event.getX() < ((getWidth() - getPaddingRight())));
            if (touchable) {
                this.setText("");
            }
        }
    }
    return super.onTouchEvent(event);
}

當ClearEditText焦點發生變化的時候，判斷裡面字串長度設定清除圖示的顯示與隱藏，這裡沒有什麼實際操作，就是在輸入框右邊新增一個刪除按鈕，當輸入框內有內容時可以進行刪除操作，內容為空時不顯示刪除引用圖片。
設定清除圖示的顯示與隱藏，呼叫setCompoundDrawables為EditText繪製上去。

@Override
public void onFocusChange(View v, boolean hasFocus) {
    if (hasFocus) {
        setClearIconVisible(getText().length() > 0);
    } else {
        setClearIconVisible(false);
    }
}

protected void setClearIconVisible(boolean visible) {
    Drawable right = visible ? mClearDrawable : null;
    setCompoundDrawables(getCompoundDrawables()[0],
            getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
}

// 根據輸入框輸入值的改變來過濾搜尋，並根據輸入框中的值來過濾資料並更新ListView，注意這邊開啟一個新的執行緒來操作更新，因為大家都知道android4.0之後不允許主執行緒更新UI，所以如果直接更新可能會導致程式崩潰，所以還是建議大家開啟一個新的執行緒或者非同步來操作過濾資料並更新ListView的步驟

mClearEditText.addTextChangedListener(new TextWatcher() {

    @Override
    public void onTextChanged(CharSequence s, int start, int before,
            int count) {
        // 當輸入框裡面的值為空，更新為原來的列表，否則為過濾資料列表
        final String str = s.toString();
        new Thread(new Runnable() {

            @Override
            public void run() {
                // TODO Auto-generated method stub
                filterData(str);
            }
        }) {

        }.start();
    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count,
            int after) {

    }

    @Override
    public void afterTextChanged(Editable s) {
    }
});
/**
 * 根據輸入框中的值來過濾資料並更新ListView
 * 
 * @param filterStr
 */
private void filterData(String filterStr) {
    filterStr = filterStr.replace(" ", "");
    List<SortModel> filterDateList = new ArrayList<SortModel>();
    if (TextUtils.isEmpty(filterStr.replace(" ", ""))) {
        filterDateList = SourceDateList;
    } else {
        filterDateList.clear();
        String letter = Chinese.getInstance()
                .getCharacterPinYin(filterStr.charAt(0)).charAt(0)
                + "";
        String key = letter.toUpperCase();
        List<SortModel> list = map.get(key);
        for (SortModel sortModel : list) {
            String name = sortModel.getName();
            String pinYin = sortModel.getPinYin();
            if (!"".equals(pinYin)) {
                if (name.indexOf(filterStr.toString()) != -1
                        || pinYin.indexOf(filterStr.toLowerCase()) != -1) {
                    filterDateList.add(sortModel);
                }
            }
        }
    }
    Message msg = new Message();
    msg.obj = filterDateList;
    msg.what = 0;
    handler.sendMessage(msg);
}

大家可以看到將輸入框中的資料拿到之後filterStr = filterStr.replace(” “,
“”);進行清空空格的操作，防止第一個字元使用者輸入空格搜尋不到無法更新ListView的情況。
通過Chinese.getInstance().getCharacterPinYin(filterStr.charAt(0)).charAt(0)+
“”;獲取到輸入框的內容並轉換成拼音，然後從Map中得到List，重新填充filterDateList資料，使用handler傳送handler.sendMessage(msg)更新資料adapter.updateListView((List)
msg.obj)

好了，今天的分享就到這裡，其實個人覺得很簡單，使用起來也很容易，能夠很輕鬆的應用到自己專案中。
可能其中有很多地方寫的不太到位或者文章方式有待提高，還希望各位朋友能給我提出一些意見，在日後的分享部落格中能夠提高自身的能力。歡迎互相交流！
我是一個不喜歡讀書的人，更別提寫文章了。以前上CSDN找文章就是hongyang大神、郭霖大神、夏大神等等，因為之前剛開始工作的時候遇到問題找demo，基本上也就是看著他們的文章成長的。所以現在自己下定決心也要堅持寫部落格，堅持寫一些有用的東西，希望能幫助所有android初學者和愛好者們！同事也是為了自己做記錄，防止日後需要該功能或效果時忘記。所以鼓勵每一位開發者都能養成寫部落格的習慣！
愛學習，愛程式設計，愛生活！

相關推薦

Android通訊錄字母排序城市列表展示效果

本篇文章主要給大家介紹一個通訊錄列表字母A——Z排序展示的效果，其實很多場景都會用到，今天一個同事做城市列表也需要類似這樣的效果，於是乎我就給他簡單寫了一個demo，剛好藉此機會將此demo和效果展示給正在學習和需要用到該效果的android開發者。個人認為學習

Android 使用資料庫操作應用加鎖、未加鎖，列表展示效果

效果圖： 要求：1.獲取應用並展示，上下滑動帶動畫 2.未加鎖中點選"鎖"圖示動畫刪除該條目，並新增至 程式鎖 資料庫(存放已加鎖應用) 3.已加鎖中點選"鎖"圖示動畫刪除該條目，並將當前應用從  程式鎖  中刪除 上程式碼： 首先編寫頁面： activity_main.

android 通訊錄好友排序+字母索引

1.首先自定義TextView繼承TextView 2.重寫onTuchEvent方法，對txtview的狀態進行判斷 3.自定義介面回撥，在onTuchevet事件裡邊對我們的介面方法進行賦值 4.漢語轉拼音工具類，有兩種方法： 使用第三方pinyin4j的jar包

Android DataBinding使用總結(三)列表展示

前言 在我的前兩篇文章中，簡單學習了以下內容： 本文將進行闡述如何通過DataBinding展示RecyclerView列表 先看一下效果： 1.每個item展示Student name 和Student age兩個Button

九、android的ListView實現資料列表展示

基於上一篇第八節的資料庫操作為基礎，對資料庫中的內容在android介面上進行列表展示 1、工程結構： 列表顯示示意圖： 列表顯示效果圖： 2、介面的列表展示配置檔案 item.xml: <?xml version="1.0" encoding="utf-8"

Android仿 京東切換 商品列表 佈局效果

效果圖： 上面兩幅圖分別是點選右上角按鈕後顯示兩種不同佈局的效果。簡單的流程可以概括為：第一次進入頁面，有個預設的佈局（豎直的線性佈局），點選按鈕，由豎直的線性佈局切換到網格佈局，再次點選切換到豎直的線性佈局。 分析： 可以看到商品展示的形式都是以列表的方式來展現，我用的是Rec

Android ListView城市列表,按a-z分組字母索引排序

       在上一篇中實現了，先自定義資料來源，使Adapter通過實現SectionIndexer介面給ListView分組，並用Collections.sort對資料list進行排序。 但是Collections.sort並不高效，如果資料來源太多，必然會太耗時，

jquery模擬字母順序排序定位城市列表方法(bug改進)

<script>jquery模擬字母順序排序定位城市列表方法下載地址http://www.lanrenzhijia.com/jquery/3155.htmlbug 重慶--長沙不能正常排序.原因是derail有可能會放回兩個字符的數組。需要做判斷改進 //改動 特殊字符-->可

vue移動端城市列表按首字母排序元件包，有npm包，可直接下載使用

初衷，為各使用相關元件的小夥伴寫更少的相關程式碼實現功能，原始碼在我的被另一篇博文裡有，有興趣的可以去研究，使用過程中有問題的請即時反饋，謝了！qq（微信）591339209，有其他常用到的元件也可以反饋給我，酌情封裝！另外要是這個元件還有什麼需要優化，或者有哪裡使用還不方便

Android 實現漢字轉成拼音，實現ListView的A-Z字母排序，顯現多音字城市排序

今天給大家帶來ListView的A-Z字母排序和過濾搜尋功能並且實現漢字轉成拼音的功能，我們知道一般我們對聯絡人，城市列表等實現A-Z的排序，因為聯絡人和城市列表我們可以直接從資料庫中獲取他的漢字拼音，而對於一般的資料，我們怎麼實現A-Z的排序，我們需要將漢字

城市列表-根據拼音首字母排序

今天我們就簡單的實現一下城市的排序 讀取我們城市的資訊並通過listview展示 首先看一下我們的佈局檔案 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/and

Mint Ul --- 製作A-Z字母排序的城市選擇列表

效果圖如下： 專案檔案存放路徑圖： 所有程式碼如下： <template> <mt-index-list> <mt-index

java/android 對列表進行首字母排序

最近寫一個android的檔案管理器，用到對檔案列表的排序，於是在網上找了一些資料。 剛開始使用這個演算法： List<String> mFilename1=new ArrayList<String>(); if (!mFilename1.isEmp

Android陣列列表按照字母排序

使用環境： 類似手機聯絡人電話本，微信聯絡人目錄一樣的功能。聯絡人按照字典排序，相同字母的聯絡人放一起。 不需要依賴第三方jar包，用心看，思路清晰。 使用方法： 算了，免費下載去吧，程式碼比較容易點。 因為剛好更新了studio，如果版本不合適，可以直接賦值程式碼走人，缺

原生JS寫一個首字母排序的通訊錄效果

點選檢視效果demo 思路上先將要排序的資料進行漢字轉換成拼音,根據首字母進行分類,然後將分類後的資料都有哪些首字母放入右邊的導航中,並將分類好的資料渲染進頁面.最後給右邊的導航中加上點選事件並滾動到內容的對應位子. html <!DOCTYPE html>

Android 仿美團網,探索ListView的A-Z字母排序功能實現選擇城市

記得在我剛開始接觸到美團網的時候就對美團網這個城市定位、選擇城市功能很感興趣，覺得它做得很棒。有如下幾個點： 一：實現ListView的A-Z字母排序功能 二：根據輸入框的輸入值改變來過濾搜尋結果，如果輸入框裡面的值為空，更新為原來的列表，否則為過濾資料列表

java/android 對列表進行首字母排序和過濾相同字串

List<String> topicNames = new ArrayList<>(new HashSet<>(topicName)); if (!topicNames.isEmpty()) { //不為空 Collecti

關於城市列表按首字母排序、分組及查詢的一個解決方案（mysql端）java

最近要做一個城市列表，網上找了個城市列表往mysql裡面一匯入，OK!  再把城市id，名稱查出來放到list裡面丟給前端客戶端處理。 後面客戶端找過來了，這樣把資料扔過去他那邊不好處理，要求在後臺根據首字母分組之後再傳過去，然後找了一上午處理方法，總體來說有三種方案： 1

Android 仿聯絡人列表 實現ListView的A-Z字母排序和過濾搜尋功能

轉自：http://blog.csdn.net/huazai963184709/article/details/19119021    首先說些這篇文章的初衷是為了給自己打拼留下一些回憶！也為同道減少研究的時間       應公司專案要求實現這個功能，看了網上不少文章，最後參考 兩篇文章各有缺陷，也各有

Android實現列表抽屜展示效果

終於迎來的週末哇，深圳兩天的涼雨天終於迎來晴日。早上爬起來異常的累，哎。。每天地鐵兩小時真是強身健體啊~ 今天給大家帶來一篇關於Android UI的文章：列表Item抽屜展示效果。單說沒意思，不然大家又該說我是標題黨了。我來筆墨描述下場景： 例如當我們點選某個Item項時