本文参考:
http://aisk.sinaapp.com/?p=71
原文是长方形滑块,本文改用绘制的三角形代替长方形,使用drawPath()方法
先上效果图
BottomBar.java
复制代码
Triangle.java
复制代码
简单说明一下:
1.原理,其实很简单,curTriangle记录当前三角位置,tarTriangle记录目的三角位置,在BottomBar的onDraw()方法中监测两个位置,当发现curTriangle和tarTriangle不一致时,就移动屏幕大小的1/30
复制代码
逐渐移动至tarTriangle。
2.三角的绘制方法是使用的Path()绘制
复制代码
3.发现位置改变时要重新绘制三角
复制代码
附上源码,回复即可下载,原文中长方形滑块代码一并附上~~大家可以自己比较下
该贴已经同步到chaozhung的微博
原文是长方形滑块,本文改用绘制的三角形代替长方形,使用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的微博