概述:
目前,豎直索引欄還是很流行的,微信、美團、手機通訊錄等各種常用軟件都要用到它。
Demo
寫一個自定義View,利用觀察者模式,自定義其中的點擊事件。
public class MySlider extends View {
private int width;
private int height;
private float x;
private float y;
private float letterSize;
private int index = -1;
private char[] letters = {'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 mPaintText;
private Paint mPaintTextSel;
public MySlider(Context context) {
super(context);
}
//定義一個接口,作爲觀察者
public interface OnItemListener{
public void onItemSelected(int index,String content);
}
//觀察者進行通訊的對象
private OnItemListener listener;
public void setOnItemListener(OnItemListener listener){
this.listener = listener;
}
public MySlider(Context context, AttributeSet attrs) {
super(context, attrs);
mPaintText = new Paint();
mPaintText.setColor(Color.BLACK);
//讓字母居中排列
mPaintText.setTextAlign(Paint.Align.CENTER);
mPaintTextSel = new Paint();
mPaintTextSel.setColor(Color.RED);
mPaintTextSel.setTextAlign(Paint.Align.CENTER);
}
public int getIndex() {
return index;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
setMeasuredDimension(width, height);
//setPaintText務必在此寫,因爲運行了onMeasure()後纔得到height值
mPaintText.setTextSize(height / 27-20);
mPaintTextSel.setTextSize(height / 27-20);
}
/**
*自定義點擊事件
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_MOVE:
//此處故意不加break,只要滑動屏幕上字母就會促發點擊事件
case MotionEvent.ACTION_DOWN:
//得到觸碰點的x,y座標
x = event.getX();
y = event.getY();
//根據座標得到點擊的字母
if(x>width-mPaintText.measureText("A")*2){
index = (int)(y/(height/27));
//index可能會大於等於27,會造成letters數組下標越界的錯誤,所以此處先作判斷,防止其大於26
if(index>=27){
index = 26;
}
Log.d("letter", letters[index] + "");
//調用listener對象的onItemSelected()函數,傳入index
if(listener!=null) {
listener.onItemSelected(index,letters[index]+"");
}
//讓主線程重繪
invalidate();
return true;
}
break;
default:
break;
}
return super.onTouchEvent(event);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
letterSize = mPaintText.measureText("A");
for(int i=0;i<27;i++){
//根據index值判斷字母是否被點擊到,被點擊的字母是紅色,否則是黑色
if(index==i) {
//將字母依次向下繪出
canvas.drawText(letters[i] + "", width - letterSize, height / 27 * (i + 1), mPaintTextSel);
}else{
canvas.drawText(letters[i] + "", width - letterSize, height / 27 * (i + 1), mPaintText);
}
}
}
}
主活動的寫法:
public class TimerActivity extends Activity {
private TextView mTextViewLetter;
private MySlider mySlider;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_timer);
mTextViewLetter = (TextView) findViewById(R.id.textView_letter);
mySlider = (MySlider) findViewById(R.id.my_slider);
mySlider.setOnItemListener(new MySlider.OnItemListener() {
@Override
public void onItemSelected(int index, String content) {
//如果點擊到字母,就打印該字母
mTextViewLetter.setText(content);
}
});
}
}
activity_timer佈局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.administrator.selfdefinedview.widget.MySlider
android:id="@+id/my_slider"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:id="@+id/textView_letter"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:gravity="center"
android:textSize="150dp"
android:text="A"/>
</RelativeLayout>
結果演示:
我們猿類工作壓力大,很需要有自己的樂趣,於是乎,我開通了音樂人賬號,以後的作品將會上傳到我的音樂人小站上。如果這篇博客幫助到您,希望您能多關注,支持,鼓勵我將創作進行下去,同時也祝你能在工作和生活樂趣兩發麪都能出彩!