Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to realize the side letter sliding index of ListView". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to implement the side letter sliding index of ListView.

First, the final effect

Second, function analysis and implementation

1.LisetView layout

Analysis: the beginning of the same letter, with the sign of the letter above the first

Implementation: in addition to TextView in the item layout, add a layout such as TextView above it (used to display the initials of the data), and then determine whether the layout is displayed in the getView of the adapter. By default, the Visibility of the layout is set to VISIBLE. When the first letter of the text content of the layout is different from the previous one, the item is the beginning of the new acronym, set to VISIBLE, otherwise set to GONE.

Part of the code:

/ / default displays problems in order to display the first layout and layout reuse

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) {

/ / compare with the previous one, if the difference is the first of the letter segment.

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)

}

}

two。 Custom control alphabet index

1. Create a new class that inherits View and overrides the constructor of the two parameters in order to get AttributeSet. Override the onDraw method.

two。 Draw the text Amurz

1) call the drawText (String text, float x, float y, Paint paint) method of canvas to draw Amurz, where the parameters represent the text to be drawn, the starting position coordinates (xmemy), and the brush. Let's first new Paint (Paint.ANTI_ALIAS_FLAG) in the constructor, where the parameter is for anti-aliasing.

2) when the brush also needs coordinates and text size, the AttributeSet parameter in the construction method will be useful. We create an attrs.xml file in the res/values directory in order to put some of the properties we need to customize the control. As follows:

Name generally defines the class name of your custom control. The following attributes mean that the name is not said much, format is to limit the format of the content you enter, dimension | reference is only sp dp or resource files and so on. Then get the values of these properties in the constructor of the custom control class:

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 ()

Now that we have the size of the text, we can calculate the coordinates we want to draw, using paint.measureText (letter); the method can calculate the width of the incoming text letter, and the coordinates of the x-axis are

Float letter_w = paint.measureText (letter)

Letter_x = (int) ((getWidth ()-letter_w) / 2)

The getWidth () method gets the total width of the control, and the x coordinate of (total width-text width) / 2 as the starting point allows the text to be drawn right in the middle of the control. Because we need to draw from A to Z, write a 26-size for loop, each time the y axis + the height of one text, in order to make the 26 letters average in the height of the whole space, use the total height of the control getHeight () / 26 as the height of the text. The code is as follows:

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. Animation effect, press the control has a translucent background and click on the text to change color.

1) override the onTouchEvent method to get the touch event. When pressed, the text changes color and the background appears. Return to its original state when it is loosened.

2) text discoloration implementation: call the event.getY () method to get the height of the touch event divided by the height of the text, which can be assigned to the member variable index, which is set to-1 when loosened. Then determine whether it is the letter in the loop of the drawing and call the setColor method of paint.

3) background: when pressed, assign the member variable isPressed with the same principle as above, and call the canvas.drawColor method to set the background.

4) the invalidate () method is called at the end of the touch event. In order to execute the onDraw () method, the system needs return ture; to indicate that the event has been handled by us.

4. Custom controls control the display of the ListvView.

1) Custom API to implement callback, similar to the setOnclick mechanism of other controls, write a public method to get the interface, and call the interface method in the touch event (determine whether it is not empty) to expose the index value of the space.

Interface:

Public interface OnLSVTouchListener {

Public void getState (int index)

}

Methods:

Public void setOnLSVTouchListener (OnLSVTouchListener listener) {

This.listener = listener

}

Expose the index of the control:

If (listener! = null) {

Listener.getState (index)

}

2) find the control in activity and implement the interface, and then we get the first letter of index, which is the first letter of the same initials in our data.

Letter_list.add (0)

For (int I = 0; I < Cheeses.sCheeseStrings.length; iTunes +) {

If (I + 1 < Cheeses.sCheeseStrings.length) {

If (! cheeses.sCheeseStrings [I] .substring (0prime1)

.equals (Cheeses.sCheeseStrings [I + 1] .substring (0recover1)) {

Letter_list.add (I + 1)

}

}

}

The first data must meet the requirements, and then the first letter of the current data is different from the latter, and the latter data is saved into our new container (the code is not optimized).

3) to control Listview, call the setSelection () method of listview. The index is equivalent to the index of the container we saved. Just get the position setting. The TextView shown in the middle is the same.

Third, layout uses custom controls

Note that the location of the custom namespace and frame layout is adjusted with android:layout_gravity, and the custom control requires a complete package name.

At this point, I believe that everyone on the "ListView side letter sliding index how to achieve" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.