ListView的側邊字母滑動索引怎么實現

本篇內容主要講解“ListView的側邊字母滑動索引怎么實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“ListView的側邊字母滑動索引怎么實現”吧!

一、最終效果

二、功能分析與實現

 1.LisetView布局

  分析：同樣的字母開頭，第一個上方有該字母的標志

  實現：在item布局中除了TextView再在其上方加一個TextView等布局（用于顯示數據的首字母），然后在適配器的getView中判斷該布局是否顯示。默認設置該布局的Visibility為VISIBLE，當該布局的的文字內容首字母與上一個不同時說明該item是新的首字母開頭，設置為VISIBLE，否則設置為GONE。

部分代碼：

            // 默認顯示 為了顯示第一個布局以及布局復用出現的問題

vh.cd_lable.setVisibility(View.VISIBLE);

String now_city = Cheeses.sCheeseStrings[position];

vh.tv_city.setText(now_city);

String now_letter = now_city.substring(0, 1).toUpperCase();

vh.tv_label.setText(now_letter);

if (position != 0) {

// 與上一個比較 如果不同說明為該字母段的第一個

String pre_letter = Cheeses.sCheeseStrings[position - 1]

.substring(0, 1).toUpperCase();

if (!pre_letter.equals(now_letter)) {

vh.cd_lable.setVisibility(View.VISIBLE);

} else {

vh.cd_lable.setVisibility(View.GONE);

}

}

 2.自定義控件字母索引 

    1.新建一個類繼承View，重寫兩個參數的構造方法，為了獲取AttributeSet。重寫onDraw方法。

    2.畫文字A-Z

     1）調用canvas的drawText(String text, float x, float y, Paint paint)方法用來畫A-Z，這里的參數分別代表需要畫的文字，起始位置坐標（x,y）,畫筆。我們先在構造方法里new Paint(Paint.ANTI_ALIAS_FLAG)，這里的參數是為了抗鋸齒。

    2）畫筆有了還需要坐標和文字大小，構造方法里的AttributeSet參數就有作用了。我們在res/values目錄下建一個attrs.xml文件，為了放一些我們自定義控件所需要的屬性。如下：

<resources>

    <declare-styleable name="LetterSlideView">

        <attr name="textsize" format = "dimension|reference"  />

        <attr name="backcolor" format = "color|reference"  />

        <attr name="frontcolor" format = "color|reference"  />

    </declare-styleable>

</resources>

name一般為你自定義控件的類名，下面屬性意思就是名字不多說了，format是為了限定你輸入的內容格式，dimension|reference就是只能sp dp或者資源文件之類的。然后再自定義控件類的構造方法中獲取這些屬性的值：

          TypedArray typedArray = context.obtainStyledAttributes(attrs,

R.styleable.LetterSlideView);

text_size = typedArray.getDimension(

R.styleable.LetterSlideView_textsize, 26);

back_color = typedArray.getColor(R.styleable.LetterSlideView_backcolor,

Color.BLACK);

front_color = typedArray.getColor(

R.styleable.LetterSlideView_frontcolor, Color.RED);

typedArray.recycle();

這時有了文字的大小我們就可以計算我們要畫的坐標了，使用paint.measureText(letter);方法可以計算傳入文字letter的寬度，x軸的坐標即為

                float letter_w = paint.measureText(letter);

letter_x = (int) ((getWidth() - letter_w) / 2);

getWidth（）方法獲得控件的總寬度，（總寬度-文字寬度）/2作為起點的x坐標可以讓該文字畫在控件的正中間。因為我們需要從A畫到Z所以寫個26大小的for循環，每次y軸+一個文字的高度就可以了，為了讓26個字母平均在整個空間的高度則用控件總高度getHeight()/26作為文字的高度。代碼如下：

                String letter = (char) ('A' + i) + "";

letter_h = getHeight() / 26;

float letter_w = paint.measureText(letter);

letter_x = (int) ((getWidth() - letter_w) / 2);

canvas.drawText(letter, letter_x, letter_h * (i + 1), paint);

    3.動畫效果，按下控件有半透明背景以及點擊的文字變色。

        1）重寫onTouchEvent方法獲得觸摸事件，按下的時候，文字變色，出現背景。松開的時候回歸原狀。

        2）文字變色實現:調用event.getY()方法獲取觸摸事件的高度除以文字的高度這可以獲得是第幾個字母為成員變量index賦值，松開的時候設為-1。然后再畫字的循環中判斷是否是該字母并調用paint的setColor方法。

        3）出現背景：當按下的時候為成員變量isPressed賦值原理同上，調用canvas.drawColor方法設置背景。

        4）觸摸事件結束時調用invalidate()方法，系統為執行onDraw（）方法，注意最后要return ture;表示該事件由我們處理了。

    4.自定義控件控制ListvView的顯示。

        1）自定義接口為了實現回調，類似于其他控件的setOnclick機制，寫一個public的方法用來獲取接口，在觸摸事件中調用接口的方法（判斷非空）暴露該空間的index值。

接口：

public interface OnLSVTouchListener {

public void getState(int index);

}

方法：

public void setOnLSVTouchListener(OnLSVTouchListener listener) {

this.listener = listener;

}

暴露控件的index:

        if (listener != null) {

listener.getState(index);

}

        2）在activity中find該控件并實現該接口，這時候我們就獲取到了index也就是第幾個英文字母，這時候就需要知道我們的數據中那些數據是同樣首字母的第一個。

letter_list.add(0);

for (int i = 0; i < Cheeses.sCheeseStrings.length; i++) {

    if (i + 1 < Cheeses.sCheeseStrings.length) {

    if (!Cheeses.sCheeseStrings[i].substring(0,1)

        .equals(Cheeses.sCheeseStrings[i + 1].substring(0,1))) {

letter_list.add(i + 1);

}

}

}

第一個數據肯定符合要求，然后就是把當前的數據首字母與后一個比較不一樣則保存后一個數據進我們的new的容器中（代碼沒優化）。

        3）實現控制Listview，調用listview的setSelection（）方法，傳來的index相當于就是我們保存的容器的index，獲取到position設置就好了。中間顯示的TextView同理。

三、布局使用自定義控件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res/com.example.customview"

    android:id="@+id/FrameLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="com.example.ui_day2_city_customview.MainActivity" >

    <ListView

        android:id="@+id/lv_city"

        android:layout_width="match_parent"

        android:layout_height="match_parent" >

    </ListView>

    <TextView

        android:id="@+id/tv_city_letter"

        android:layout_width="120dp"

        android:layout_height="120dp"

        android:layout_gravity="center"

        android:background="#80000000"

        android:textSize="80sp"

        android:textColor="#FFFFFF"

        android:gravity="center"

        android:visibility="gone" />

    <com.example.customview.LetterSlideView

        android:id="@+id/lsv_city"

        android:layout_width="30dp"

        android:layout_height="match_parent"

        android:layout_gravity="right" >

    </com.example.customview.LetterSlideView>

</FrameLayout>

注意自定義命名空間、幀布局的位置用android:layout_gravity調整，自定義控件需要完整的包名

到此，相信大家對“ListView的側邊字母滑動索引怎么實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！