AndroidカスタムViewナビゲーションバーのコードを実現します。
考え方の分析:
1、カスタムViewのカーナビバーを実現する
2、ListView連絡先リストを実現する
3、アルファベットナビゲーションバーのスライドイベントの処理
4、アルファベットナビゲーションバーと中間字母の連動
5、アルファベットナビゲーションバーとListViewの連動
効果図:
まず、メインレイアウトのファイルを切ります。後のコードの説明に便利です。
考え方の分析:
1、私達は使う時幅を20 dpに設定し、親のコントロールを塗りつぶして高く設定しますので、ここで取得した幅は20 dpです。
2、ループを通して縦の文字を描きます。一度にもう一度色を設定します。選択した文字の色とデフォルトの色が違います。
考え方の分析:
1、主なActivityでは、データ配列を定義し、ツール類を使って配列の最初のアルファベットを取得し、Collectionを使って最初のアルファベットに基づいて並べ替えます。ツール類が長いので、貼り付けません。
2、ListViewサブレイアウトを作成し、Adapterを作成して充填する。
メインレイアウト:
考え方の分析:
1、カスタムViewでdispatch TouchEventを書き直してスライドイベントを処理して、最後にtrueに戻ります。
2、メインActivityからText Viewが入ってきました。私達がスライドする時にTextを設定して、リリースする時にTextを消します。Textを設定する時はTextの位置を計算しなければなりません。また、滑りすぎると配列が境界を越える問題が発生します。だから、私達は中で行列が境界を越える問題を処理します。
3、最後に、私達が滑った文字を記録するインターフェースを提供します。後ろにListViewと連動できるように。
考え方の分析:
1、私たちはもうインタフェースを通じて選択の字母を伝えました。そして、adaterでアルファベットによってpositionを検索する方法を書きました。この時、主Activityがカスタム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、私達は使う時幅を20 dpに設定し、親のコントロールを塗りつぶして高く設定しますので、ここで取得した幅は20 dpです。
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();
}
}
}
ステップ2:ListView連絡先リストの実現考え方の分析:
1、主なActivityでは、データ配列を定義し、ツール類を使って配列の最初のアルファベットを取得し、Collectionを使って最初のアルファベットに基づいて並べ替えます。ツール類が長いので、貼り付けません。
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;
}
}
ステップ3:アルファベットナビゲーションバースライドイベント処理、アルファベットナビゲーションバーと中間字母の連動考え方の分析:
1、カスタムViewでdispatch TouchEventを書き直してスライドイベントを処理して、最後にtrueに戻ります。
2、メインActivityからText Viewが入ってきました。私達がスライドする時に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;
}
ステップ4:アルファベットナビゲーションバーとListViewの連動考え方の分析:
1、私たちはもうインタフェースを通じて選択の字母を伝えました。そして、adaterでアルファベットによって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);
}
}
});
以上は小编で绍介したAndroidカスタムViewのアルファベットナビゲーションバーのコードです。皆さんに助けてほしいです。もし何か疑问がありましたら、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。