仿网易新闻标题栏滑块-绘制的三角滑块

本文参考： http://aisk.sinaapp.com/?p=71
原文是长方形滑块，本文改用绘制的三角形代替长方形，使用drawPath()方法
先上效果图

BottomBar.java

• package aisk.bottombar;
• 
  
• import android.content.Context;
• import android.content.res.TypedArray;
• import android.graphics.Canvas;
• import android.graphics.Color;
• import android.graphics.Paint;
• import android.graphics.Path;
• import android.graphics.Rect;
• import android.graphics.RectF;
• import android.util.AttributeSet;
• import android.util.Log;
• import android.view.LayoutInflater;
• import android.view.View;
• import android.widget.ImageView;
• import android.widget.LinearLayout;
• 
  
• public class BottomBar extends LinearLayout {
•         private int mSelectedBtn;
•         private ImageView mBtn1;
•         private ImageView mBtn2;
•         private ImageView mBtn3;
•         private ImageView mBtn4;
•         private Paint paint;
•         private Triangle curTriangle = null;
•         private Triangle tarTriangle = null;
• 
  
•         public BottomBar(Context context) {
•                 this(context, null);
•         }
• 
  
•         public BottomBar(Context context, AttributeSet attrs) {
•                 super(context, attrs);
•                 setWillNotDraw(false);
•                 LayoutInflater.from(context).inflate(R.layout.bottom_bar, this, true);
• 
  
•                 paint = new Paint();
•                 paint.setAntiAlias(true);
• 
  
•                 mBtn1 = (ImageView)findViewById(R.id.btn1);
•                 mBtn2 = (ImageView)findViewById(R.id.btn2);
•                 mBtn3 = (ImageView)findViewById(R.id.btn3);
•                 mBtn4 = (ImageView)findViewById(R.id.btn4);
• 
  
•                 TypedArray a = context.obtainStyledAttributes(attrs,
•                                 R.styleable.BottomBar);
•                 mSelectedBtn = a.getInt(R.styleable.BottomBar_selected_btn, 1);
•                 a.recycle();
• 
  
• 
  
•                 View.OnClickListener clickBtn = new View.OnClickListener() {
•                         @Override
•                         public void onClick(View view) {
•                                 if (view == mBtn1)
•                                         mSelectedBtn = 1;
•                                 else if (view == mBtn2)
•                                         mSelectedBtn = 2;
•                                 else if (view == mBtn3)
•                                         mSelectedBtn = 3;
•                                 else if (view == mBtn4)
•                                         mSelectedBtn = 4;
•                                 //Log.d("Selected Button:", String.valueOf(mSelectedBtn));
• 
  
•                                 tarTriangle.left = view.getLeft() + view.getWidth()/2 - 10;
•                                 tarTriangle.right = view.getLeft() + view.getWidth()/2 + 10;
•                                 tarTriangle.top = view.getTop() - 4;
•                                 tarTriangle.bottom = view.getTop() + 13.3f;
•                                 invalidate();
•                         }
•                 };
• 
  
•                 mBtn1.setOnClickListener(clickBtn);
•                 mBtn2.setOnClickListener(clickBtn);
•                 mBtn3.setOnClickListener(clickBtn);
•                 mBtn4.setOnClickListener(clickBtn);
• 
  
•         }
• 
  
• 
  
•         public void setSelectedBtn(int i) {
•                 mSelectedBtn = i;
•         }
• 
  
•         public int getSelectedBtn() {
•                 return mSelectedBtn;
•         }
• 
  
•         @Override
•         public void onDraw(Canvas canvas) {
•                 super.onDraw(canvas);
•                 //Log.d("Validated!", "Should not always validate");
•                 int step = getWidth()/30;
•                 canvas.drawColor(Color.BLACK);
•                 paint.setColor(Color.LTGRAY);
•                 paint.setStyle(Paint.Style.FILL);
•                 if (curTriangle == null){
•                         curTriangle = new Triangle(
•                                         mBtn1.getLeft() + mBtn1.getWidth()/2 - 10,
•                                         mBtn1.getTop() - 4,
•                                         mBtn1.getLeft() + mBtn1.getWidth()/2 + 10,
•                                         mBtn1.getTop() + 13.3f
•                                         );
•                 }
•                 if (tarTriangle == null){
•                         tarTriangle = new Triangle(
•                                         mBtn1.getLeft() + mBtn1.getWidth()/2 - 10,
•                                         mBtn1.getTop() - 4,
•                                         mBtn1.getLeft() + mBtn1.getWidth()/2 + 10,
•                                         mBtn1.getTop() + 13.3f
•                                         );
•                 }
• 
  
•                 if (Math.abs(curTriangle.left - tarTriangle.left) < step) {
•                         curTriangle.left = tarTriangle.left;
•                         curTriangle.right = tarTriangle.right;
•                         curTriangle.reDraw();
•                 }
• 
  
•                 if (curTriangle.left > tarTriangle.left){
•                         curTriangle.left -= step;
•                         curTriangle.right -= step;
•                         curTriangle.reDraw();
•                         invalidate();
•                 }
•                 else if (curTriangle.left < tarTriangle.left) {
•                         curTriangle.left += step;
•                         curTriangle.right += step;
•                         curTriangle.reDraw();
•                         invalidate();
•                 }
•                 canvas.drawPath(curTriangle.getPath(), paint);
•         }
• 
  
• }
• 
  

复制代码
Triangle.java

• <blockquote>package aisk.bottombar;
  

复制代码
简单说明一下：
1.原理，其实很简单，curTriangle记录当前三角位置，tarTriangle记录目的三角位置，在BottomBar的onDraw()方法中监测两个位置，当发现curTriangle和tarTriangle不一致时，就移动屏幕大小的1/30

• int step = getWidth()/30;
  

复制代码
逐渐移动至tarTriangle。
2.三角的绘制方法是使用的Path()绘制

• mPath = new Path();
•                 mPath.moveTo(left, top);
•                 mPath.lineTo(right, top);
•                 mPath.lineTo((left + right)/2, bottom);
•                 mPath.close();
  

复制代码
3.发现位置改变时要重新绘制三角

• mPath.reset();
•                 mPath.moveTo(left, top);
•                 mPath.lineTo(right, top);
•                 mPath.lineTo((left + right)/2, bottom);
•                 mPath.close();
  

复制代码
附上源码，回复即可下载，原文中长方形滑块代码一并附上~~大家可以自己比较下


该贴已经同步到chaozhung的微博

BottomBar2.rar

BottomBar.rar