自定义view实现大转盘,以及展示ToolBar

一.实现的效果
在这里插入图片描述

二.自定义view实现转盘效果

public class Choujiang extends View implements   					
  View.OnClickListener {

private int widthPixels;
private int heightPixels;
private Paint mpaint;
private int centerX;
private int centerY;
private int[] colors;
private String[] desc = new String[]{"苹果", "小米", "华为", "锤子", "VIVO", "OPPO"};
private RotateAnimation rotateAnimation;
private boolean isRote;

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

public Choujiang(Context context, AttributeSet attrs) {
    this(context, attrs, -1);
}

public Choujiang(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    //获取屏幕的宽高信息
    DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
    //获取屏幕的宽
    widthPixels = displayMetrics.widthPixels;
    //获取屏幕的高
    heightPixels = displayMetrics.heightPixels;
    //获取屏幕中心的坐标
    centerX = widthPixels / 2;
    centerY = heightPixels / 2;

    //初始化画笔
    initPaint();


    this.setOnClickListener(this);

    //定义一个颜色数组
    colors = new int[]{Color.GREEN, Color.YELLOW, Color.BLUE, Color.CYAN, Color.GRAY, Color.MAGENTA};
}


//测量view的大小

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    //super.onMeasure(1000, 1000);
    setMeasuredDimension(1300, 1300);
}

//画笔
private void initPaint() {
    //初始化画笔
    mpaint = new Paint();
    mpaint.setColor(Color.RED);
    mpaint.setStrokeWidth(2f);
    mpaint.setStyle(Paint.Style.FILL);
    mpaint.setAntiAlias(true);
}

//绘图
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //移动画布的坐标原点
    canvas.translate(centerX, centerY);

    //绘制6个圆弧,绘制外面大圆
    //new 一个矩形
    RectF rect = new RectF(-300, -300, 300, 300);
    float start = 60;
    for (int i = 0; i < 6; i++) {
        mpaint.setColor(colors[i]);
        canvas.drawArc(rect, start * i, 60, true, mpaint);
    }

    //绘制中心小圆
    mpaint.setColor(Color.RED);
    canvas.drawCircle(0, 0, 100, mpaint);

    //字的颜色和大小
    mpaint.setColor(Color.WHITE);
    mpaint.setTextSize(40);

    //绘制圆中心字
    //获取文字的宽高和高度
    Rect rectText = new Rect();
    mpaint.getTextBounds("start", 0, 5, rectText);
    int width = rectText.width();
    int height = rectText.height();
    canvas.drawText("start", -width / 2, height / 2, mpaint);


    RectF rectF = new RectF(-200, -200, 200, 200);
    //绘制描述信息
    for (int i = 0; i < 6; i++) {
        mpaint.setColor(Color.WHITE);
        Path path = new Path();
        path.addArc(rectF, start * i + 15, 60);
        canvas.drawTextOnPath(desc[i], path, 0, 0, mpaint);
    }
}

private void startAnimation() {
    isRote = true;
    RotateAnimation rotateAnimation;
    double random = Math.random();
    rotateAnimation = new RotateAnimation(0, (float) (720 * random), centerX, centerY);
    rotateAnimation.setDuration(800);
    rotateAnimation.setFillAfter(true);
    rotateAnimation.setInterpolator(new LinearInterpolator());
    //设置重复模式
    rotateAnimation.setRepeatMode(Animation.RESTART);

    //给动画设置监听
    rotateAnimation.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            isRote = false;
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
    startAnimation(rotateAnimation);
}

@Override
public void onClick(View v) {
    if (!isRote) {
        startAnimation();
    }
   }
 }

三.布局文件

<android.support.v7.widget.Toolbar
    android:id="@+id/bar"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="#0ff">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:text="CenterText"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold" />

</android.support.v7.widget.Toolbar>

<comp.bwei.choujiangview.Choujiang
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

四.在Mainactivity中写ToolBar

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //找控件
    toolbar = (Toolbar) findViewById(R.id.bar);

    //一定要写在第一行
    setSupportActionBar(toolbar);

    //设置是否显示主标题
    getSupportActionBar().setDisplayShowTitleEnabled(true);

    //设置标题
    getSupportActionBar().setTitle("这是大转盘");

    //设置主题颜色
    toolbar.setTitleTextColor(Color.WHITE);

    toolbar.setSubtitle("子标题");
    toolbar.setSubtitleTextColor(Color.WHITE);

    //设置是否显示左侧的按钮
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    //给左侧按钮添加点击事件
    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            startActivity(new Intent(MainActivity.this,TwoActivity.class));
        }
    });
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    //初始化我们的菜单布局文件,添加到menu中
    getMenuInflater().inflate(R.menu.menu_main,menu);
    return super.onCreateOptionsMenu(menu);
}

//每次显示前都会调用
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    return super.onPrepareOptionsMenu(menu);
}

//菜单被选中是调用
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    return super.onOptionsItemSelected(item);
}

//关闭时调用
@Override
public void onOptionsMenuClosed(Menu menu) {
    super.onOptionsMenuClosed(menu);
}

//打开的是调用
@Override
public boolean onMenuOpened(int featureId, Menu menu) {
    return super.onMenuOpened(featureId, menu);
	   }
   }

五.注意:values文件夹下的styles.xml中要改为:NoActionBar

六.在res文件夹下创建一个menu文件夹

<item
    android:id="@+id/icon1"
    android:icon="@drawable/ewm1"
    android:orderInCategory="100"
    android:title="第一条"
    app:showAsAction="always" />

自定义view实现大转盘,以及展示ToolBar

猜你喜欢