안 드 로 이 드 는 위 챗 을 모방 하여 이니셜 네 비게 이 션 바 를 실현 한다.

본 고 는 안 드 로 이 드 가 이니셜 네 비게 이 션 바 를 실현 하 는 것 을 소개 한다.먼저 효과 도 를 보고 코드 를 어떻게 실현 하 는 지 구체 적 으로 살 펴 보 자.

구체 적 절차
1.전체 레이아웃 표시
2.A-Z 의 그룹 실현
3.사용자 정의 A-Z 내 비게 이 션 바
4.내 비게 이 션 바 의 구체 적 인 알파벳 을 중간 에 표시/숨 기기
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#fff"
 android:orientation="vertical"
 tools:context="com.example.firstnavigation.MainActivity">


 <FrameLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <!--ListView-->

  <ListView
   android:id="@+id/friend_listview"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="center" />

  <!--       -->

  <TextView
   android:id="@+id/tv_first"
   android:layout_width="80dp"
   android:layout_height="80dp"
   android:layout_gravity="center"
   android:text="A"
   android:textColor="#ff0000"
   android:textSize="30sp"
   android:visibility="gone" />

   <!--      -->

  <com.example.firstnavigation.SlidView
   android:id="@+id/slidView"
   android:layout_width="30dp"
   android:layout_height="match_parent"
   android:layout_gravity="right|center" />
 </FrameLayout>
</LinearLayout>

 item.xml―-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="#fff"
 android:orientation="vertical">

 <!--   -->

 <TextView
  android:id="@+id/tv"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="#9e9d9d"
  android:textColor="#fff"
  android:textSize="16sp" />

 <!--          -->

 <TextView
  android:id="@+id/name"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textColor="#262626"
  android:textSize="16sp" />
</LinearLayout>

연락처 Bean

public class Contact {
 //  
 private String name;
 //      
 private String firstWord;

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public String getFirstWord() {
  return firstWord;
 }

 public void setFirstWord(String ch) {
  this.firstWord = ch;
 }
}

ContactAdapter.java

public class ContactAdapter extends BaseAdapter {
 private ArrayList<Contact> arrayList;
 private Context context;
 private String pre = "A";

 public ContactAdapter(ArrayList<Contact> arrayList, Context context) {
  this.arrayList = arrayList;
  this.context = context;
 }

 @Override
 public int getCount() {
  return arrayList.size();
 }

 @Override
 public Object getItem(int position) {
  return arrayList.get(position);
 }

 @Override
 public long getItemId(int position) {
  return position;
 }

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
  ViewHolder viewHolder;
  if (convertView == null) {
   viewHolder = new ViewHolder();
   convertView = LayoutInflater.from(context).inflate(R.layout.item, parent, false);
   viewHolder.tv_firstWord = (TextView) convertView.findViewById(R.id.tv);
   viewHolder.name = (TextView) convertView.findViewById(R.id.name);
   convertView.setTag(viewHolder);
  } else {
   viewHolder = (ViewHolder) convertView.getTag();
  }
  viewHolder.tv_firstWord.setText(String.valueOf(arrayList.get(position).getFirstWord()));
  viewHolder.name.setText(arrayList.get(position).getName());
  /**
   *   :        
   */
  viewHolder.tv_firstWord.setVisibility(!arrayList.get(position).getFirstWord().equals(pre) ? View.VISIBLE : View.GONE);
  pre = arrayList.get(position).getFirstWord();
  return convertView;
 }

 class ViewHolder {
  TextView tv_firstWord;
  TextView name;
 }

MainActivity

public class MainActivity extends AppCompatActivity {
 private ListView listView;
 private TextView tv_first;
 private ArrayList<Contact> contacts;
 private SlidView slidView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  initView();
  initData();
 }

 private void initView() {
  listView = (ListView) findViewById(R.id.friend_listview);
  tv_first = (TextView) findViewById(R.id.tv_first);
  slidView = (SlidView) findViewById(R.id.slidView);
  slidView.setFirstListener(new OnTouchFirstListener() {
   @Override
   public void onTouch(String str) {
    tv_first.setVisibility(View.VISIBLE);
    tv_first.setText(str);
    for (int i = 0; i < contacts.size(); i++) {
     if (str.equals(contacts.get(i).getFirstWord())) {
      listView.setSelection(i);
     }
    }
   }

   @Override
   public void onRelease() {
    new Handler().postDelayed(new Runnable() {
     @Override
     public void run() {
      tv_first.setVisibility(View.GONE);
     }
    }, 300);
   }
  });
 }

 private void initData() {
  contacts = new ArrayList<>();
  //        
  String[] attrs = getResources().getStringArray(R.array.myFriend);
  Contact contact;
  for (int i = 0; i < attrs.length; i++) {
   contact = new Contact();
   contact.setName(attrs[i]);
   contact.setFirstWord(getPinYinHeadChar(attrs[i], 2));
   contacts.add(contact);
  }
  //  A-Z
  Collections.sort(contacts, new Comparator<Contact>() {
   @Override
   public int compare(Contact lhs, Contact rhs) {
    return lhs.getFirstWord().compareTo(rhs.getFirstWord());
   }
  });
  ContactAdapter contactAdapter = new ContactAdapter(contacts, this);
  listView.setAdapter(contactAdapter);
 }

 /**
  *         ,               ;          ""。
  *
  * @param caseType   1          ,     。
  */
 public static String getPinYinHeadChar(String zn_str, int caseType) {
  if (zn_str != null && !zn_str.trim().equalsIgnoreCase("")) {
   char[] strChar = zn_str.toCharArray();
   //          
   HanyuPinyinOutputFormat hanYuPinOutputFormat = new HanyuPinyinOutputFormat();
   //     ,   ,     
   if (1 == caseType) {
    hanYuPinOutputFormat.setCaseType(HanyuPinyinCaseType.LOWERCASE);
   } else {
    hanYuPinOutputFormat.setCaseType(HanyuPinyinCaseType.UPPERCASE);
   }
   hanYuPinOutputFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
   hanYuPinOutputFormat.setVCharType(HanyuPinyinVCharType.WITH_V);
   StringBuffer pyStringBuffer = new StringBuffer();
   char c = strChar[0];
   char pyc;
   if (String.valueOf(c).matches("[\\u4E00-\\u9FA5]+")) {//     a-z  A-Z    
    try {
     String[] pyStirngArray = PinyinHelper.toHanyuPinyinStringArray(strChar[0], hanYuPinOutputFormat);
     if (null != pyStirngArray && pyStirngArray[0] != null) {
      pyc = pyStirngArray[0].charAt(0);
      pyStringBuffer.append(pyc);
     }
    } catch (BadHanyuPinyinOutputFormatCombination e) {
     e.printStackTrace();
    }
   }
   return pyStringBuffer.toString();
  }
  return null;
 }

이니셜 추출 은 pingyin4j.jar 를 사용 해 야 합 니 다.작은 편집 은 여기 서 제공 되 지 않 습 니 다.인터넷 에서 다운로드 할 수 있 습 니 다.

//         
public class SlidView extends View {
 private String[] strs = {"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 Paint paint;
 private OnTouchFirstListener listener;

 public SlidView(Context context) {
  this(context, null);
 }

 public SlidView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public SlidView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  paint = new Paint();
  paint.setAntiAlias(true);
  paint.setColor(Color.GRAY);
  paint.setTypeface(Typeface.DEFAULT_BOLD);

 }

 // px---->sp
 protected int sp2px(int spVal) {
  return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, getResources().getDisplayMetrics());
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  for (int i = 0; i < strs.length; i++) {
   paint.setColor(i == index ? Color.RED : Color.BLACK);
   paint.setTextSize(i == index ? sp2px(18) : sp2px(16));
   int x = (int) (getWidth() - paint.measureText(strs[i])) / 2;
   int y = getHeight() / strs.length * (i + 1);
   canvas.drawText(strs[i], x, y, paint);
  }
 }

 int index = -1; //            

 //    
 //  ,  ,  
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:
   case MotionEvent.ACTION_MOVE:
    float y = event.getY();
    this.setBackgroundColor(Color.GRAY);
    //          
    index = (int) y * strs.length / getHeight();
    listener.onTouch(strs[index]);
    break;
   case MotionEvent.ACTION_UP:
    this.setBackgroundColor(android.R.color.transparent);
    index = -1;
    listener.onRelease();
    break;
  }
  //  
  invalidate();
  return true;
 }

 public void setFirstListener(OnTouchFirstListener listener) {
  this.listener = listener;
 }
}


/**
 * OnTouchFirstListener   
 * onTouch:        
 * onRelease:up               GONE
 */
public interface OnTouchFirstListener {
 void onTouch(String ch);
 void onRelease();
}


이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기