Android 사용자 정의 View 알파벳 탐색 표시 줄 구현 코드

사고 분석:
1.사용자 정의 View 알파벳 탐색 표시 줄 구현
2,ListView 구현 연락처 목록
3.알파벳 네 비게 이 션 바 미끄럼 이벤트 처리
4.알파벳 네 비게 이 션 바 와 중간 자모의 연동
5.알파벳 네 비게 이 션 표시 줄 과 ListView 의 연동
효과 그림:

우선,우 리 는 먼저 메 인 레이아웃 파일 을 던 져 서 뒤의 코드 에 대한 설명 을 편리 하 게 합 니 다.

<?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"> 
<EditText 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:background="@drawable/search_border" 
android:drawableLeft="@android:drawable/ic_menu_search" 
android:padding="8dp" /> 
<RelativeLayout 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 
<ListView 
android:id="@+id/lv" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:divider="@null" /> 
<TextView 
android:id="@+id/tv" 
android:layout_width="50dp" 
android:layout_height="50dp" 
android:layout_centerInParent="true" 
android:background="#888888" 
android:gravity="center" 
android:textColor="#000000" 
android:textSize="18dp" 
android:visibility="gone" /> 
<com.handsome.tulin.View.NavView 
android:id="@+id/nv" 
android:layout_width="20dp" 
android:layout_height="match_parent" 
android:layout_alignParentRight="true" 
android:layout_margin="16dp" /> 
</RelativeLayout> 
</LinearLayout>

단계 1:사용자 정의 알파벳 탐색 표시 줄 분석
사고 분석:
1.우 리 는 사용 할 때 폭 을 20dp 로 설정 하고 높이 는 부모 컨트롤 을 채 우 는 것 으로 설정 하기 때문에 여기 서 얻 은 폭 은 20dp 입 니 다.
2.순환 을 통 해 세로 로 된 자 모 를 그립 니 다.그림 을 그 릴 때마다 색 을 다시 설정 해 야 합 니 다.왜냐하면 우 리 는 선택 한 자모 색 이 기본 과 다 르 기 때 문 입 니 다.

public class NavView extends View { 
private Paint textPaint = new Paint(); 
private String[] s = new String[]{ 
"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", 
"L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", 
"W", "X", "Y", "Z", "#"}; 
//    、         
private int choose = -1; 
//      
private TextView tv; 
public NavView(Context context, AttributeSet attrs) { 
super(context, attrs); 
} 
public NavView(Context context) { 
super(context); 
} 
public NavView(Context context, AttributeSet attrs, int defStyleAttr) { 
super(context, attrs, defStyleAttr); 
} 
private void initPaint() { 
textPaint.setTextSize(20); 
textPaint.setAntiAlias(true); 
textPaint.setColor(Color.BLACK); 
} 
@Override 
protected void onDraw(Canvas canvas) { 
super.onDraw(canvas); 
//    
drawText(canvas); 
} 
/** 
*     
* 
* @param canvas 
*/ 
private void drawText(Canvas canvas) { 
//  View    
int width = getWidth(); 
int height = getHeight(); 
//          
int singleHeight = height / s.length; 
//    
for (int i = 0; i < s.length; i++) { 
//       
initPaint(); 
//       
if (choose == i) { 
textPaint.setColor(Color.RED); 
} 
//          
float x = (width - textPaint.measureText(s[i])) / 2; 
float y = (i + 1) * singleHeight; 
canvas.drawText(s[i], x, y, textPaint); 
//     
textPaint.reset(); 
} 
} 
}

STEP 2:ListView 연락처 목록 구현
사고 분석:
1.주 Activity 에서 하나의 데이터 배열 을 정의 하고 도구 류 를 사용 하여 배열 의 첫 번 째 자 모 를 가 져 옵 니 다.Collections 를 사용 하여 첫 번 째 자모 에 따라 정렬 합 니 다.도구 류 가 좀 길 기 때문에 붙 이지 않 습 니 다.
2.ListView 하위 레이아웃 을 만 들 고 Adapter 를 만들어 채 웁 니 다.
주 레이아웃:

public class MainActivity extends AppCompatActivity { 
private TextView tv; 
private ListView lv; 
private NavView nv; 
private List<User> list; 
private UserAdapter adapter; 
private String[] name = new String[]{ 
"   ", "  ", "   ", "  ", "  ", "  ", "   ", 
"  ", "  ", "  ", "   ", "  ", "   ", "  ", "   ", "   ", "  ", "   ", 
"    ", "   ", "  ", "  ", "  ", "  ", "  ", "  ", "   ", "   ", "  ", 
"  ", "  ", "  ", "   ", "   ", "   ", "   ", "  ", "  ", "   "}; 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_main); 
initView(); 
initData(); 
} 
private void initView() { 
tv = (TextView) findViewById(R.id.tv); 
lv = (ListView) findViewById(R.id.lv); 
nv = (NavView) findViewById(R.id.nv); 
nv.setTextView(tv); 
} 
private void initData() { 
//      
list = new ArrayList<>(); 
for (int i = 0; i < name.length; i++) { 
list.add(new User(name[i], CharacterUtils.getFirstSpell(name[i]).toUpperCase())); 
} 
//      
Collections.sort(list, new Comparator<User>() { 
@Override 
public int compare(User lhs, User rhs) { 
return lhs.getFirstCharacter().compareTo(rhs.getFirstCharacter()); 
} 
}); 
//  ListView 
adapter = new UserAdapter(this, list); 
lv.setAdapter(adapter); 
} 
}

ListView 하위 레이아웃:

<?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:background="#ffffff" 
android:orientation="vertical"> 
<TextView 
android:id="@+id/tv_firstCharacter" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:background="#DBDBDA" 
android:padding="8dp" 
android:text="A" 
android:textColor="#000000" 
android:textSize="14dp" /> 
<TextView 
android:id="@+id/tv_name" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:background="#ffffff" 
android:padding="8dp" 
android:text="   " 
android:textColor="#2196F3" 
android:textSize="14dp" /> 
</LinearLayout>

Adapter：

public class UserAdapter extends BaseAdapter { 
private List<User> list; 
private User user; 
private LayoutInflater mInflater; 
private Context context; 
public UserAdapter(Context context, List<User> list) { 
this.list = list; 
mInflater = LayoutInflater.from(context); 
this.context = context; 
} 
@Override 
public int getCount() { 
return list.size(); 
} 
@Override 
public Object getItem(int position) { 
return list.get(position); 
} 
@Override 
public long getItemId(int position) { 
return position; 
} 
@Override 
public View getView(int position, View convertView, ViewGroup parent) { 
if (convertView == null) { 
convertView = mInflater.inflate(R.layout.adapter_user, null); 
} 
ViewHolder holder = getViewHolder(convertView); 
user = list.get(position); 
if (position == 0) { 
//              
holder.tv_firstCharacter.setVisibility(View.VISIBLE); 
holder.tv_firstCharacter.setText(user.getFirstCharacter()); 
holder.tv_name.setText(user.getUsername()); 
} else { 
//             ，    Ascii      
if (CharacterUtils.getCnAscii(list.get(position - 1).getFirstCharacter().charAt(0)) < 
CharacterUtils.getCnAscii(user.getFirstCharacter().charAt(0))) { 
//              ，       
holder.tv_firstCharacter.setVisibility(View.VISIBLE); 
holder.tv_firstCharacter.setText(user.getFirstCharacter()); 
holder.tv_name.setText(user.getUsername()); 
} else { 
//              ，      
holder.tv_firstCharacter.setVisibility(View.GONE); 
holder.tv_name.setText(user.getUsername()); 
} 
} 
return convertView; 
} 
/** 
*          
* 
* @param view 
* @return 
*/ 
private ViewHolder getViewHolder(View view) { 
ViewHolder holder = (ViewHolder) view.getTag(); 
if (holder == null) { 
holder = new ViewHolder(view); 
view.setTag(holder); 
} 
return holder; 
} 
/** 
*       
*/ 
private class ViewHolder { 
private TextView tv_firstCharacter, tv_name; 
ViewHolder(View view) { 
tv_firstCharacter = (TextView) view.findViewById(R.id.tv_firstCharacter); 
tv_name = (TextView) view.findViewById(R.id.tv_name); 
} 
} 
/** 
*          
* 
* @param s 
* @return 
*/ 
public int getSelectPosition(String s) { 
for (int i = 0; i < getCount(); i++) { 
String firChar = list.get(i).getFirstCharacter(); 
if (firChar.equals(s)) { 
return i; 
} 
} 
return -1; 
} 
}

STEP 3:알파벳 네 비게 이 션 바 미끄럼 사건 처리,알파벳 네 비게 이 션 바 와 중간 자모의 연동
사고 분석:
1.사용자 정의 View 에 dispatchTouchEvent 를 다시 쓰 고 미끄럼 사건 을 처리 한 다음 에 true 로 돌아 갑 니 다.
2.주 Activity 에서 TextView 가 들 어 오 면 우리 가 미 끄 러 질 때 Text 를 설정 하고 풀 때 Text 를 사라 집 니 다.Text 를 설정 할 때 Text 의 위 치 를 계산 하고 너무 많이 미 끄 러 지면 배열 의 경 계 를 넘 는 문제 가 발생 하기 때문에 우 리 는 안에서 배열 의 경 계 를 넘 는 문 제 를 처리 합 니 다.
3.마지막 으로 인 터 페 이 스 를 제공 하여 우리 가 미 끄 러 진 자 모 를 기록 하고 뒤에서 ListView 와 연결 할 수 있 도록 합 니 다.

@Override 
public boolean dispatchTouchEvent(MotionEvent event) { 
//       
int index = (int) (event.getY() / getHeight() * s.length); 
//       
if (index >= s.length) { 
index = s.length - 1; 
} else if (index < 0) { 
index = 0; 
} 
switch (event.getAction()) { 
case MotionEvent.ACTION_DOWN: 
case MotionEvent.ACTION_MOVE: 
setBackgroundColor(Color.GRAY); 
//       
choose = index; 
//       
tv.setVisibility(VISIBLE); 
tv.setText(s[choose]); 
//  ListView     
if (listener != null) { 
listener.touchCharacterListener(s[choose]); 
} 
//   
invalidate(); 
break; 
default: 
setBackgroundColor(Color.TRANSPARENT); 
//         
choose = -1; 
//       
tv.setVisibility(GONE); 
//   
invalidate(); 
break; 
} 
return true; 
} 
public onTouchCharacterListener listener; 
public interface onTouchCharacterListener { 
void touchCharacterListener(String s); 
} 
public void setListener(onTouchCharacterListener listener) { 
this.listener = listener; 
} 
/** 
*      TextView 
* 
* @param tv 
*/ 
public void setTextView(TextView tv) { 
this.tv = tv; 
}

STEP 4:알파벳 네 비게 이 션 표시 줄 과 ListView 의 연결
사고 분석:
1.우 리 는 이미 인 터 페 이 스 를 통 해 선택 한 자 모 를 전 달 했 고 adapter 에서 자모 에 따라 position 를 조회 하 는 방법 을 썼 습 니 다.이 럴 때 주 Activity 가 사용자 정의 View 설정 에 대한 감청 만 하면 판단 할 수 있 습 니 다.

//ListView     
nv.setListener(new NavView.onTouchCharacterListener() { 
@Override 
public void touchCharacterListener(String s) { 
int position = adapter.getSelectPosition(s); 
if (position != -1) { 
lv.setSelection(position); 
} 
} 
});

위 에서 말 한 것 은 소 편 이 소개 한 안 드 로 이 드 사용자 정의 View 가 알파벳 네 비게 이 션 표시 줄 을 실현 하 는 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!