Android自定义一个圆球View

最新推荐文章于 2021-05-27 02:58:23 发布

原创最新推荐文章于 2021-05-27 02:58:23 发布 · 598 阅读

0 ·

CC 4.0 BY-SA版权

android 专栏收录该内容

109 篇文章

订阅专栏

本文介绍了如何在Android中自定义一个圆形的View组件，详细阐述了实现代码和最终达到的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

x效果如图：

具体实现的代码：

package com.example.circle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class MyCircleView extends View {
	//radius 圆球半径
	private static final float radius = 5.0f;
	private int chooseId = 4;
	private int count = 6;
	//圆球之间的间距
	private int gap = 20;
	private int start_x = 20;

	public MyCircleView(Context context, AttributeSet attrs) {
		super(context, attrs);

	}

	public void choose(int pos) {

		this.chooseId = pos;
		//每次选择的时候重画
		this.invalidate();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		int width = getWidth();
		int height = getHeight();

		Paint paint = new Paint();
		//设置圆球的锯齿
		paint.setAntiAlias(true);
		//设置圆球从居中位置开始布置
		int start_x = (width - (count - 1) * gap) / 2;
		for (int i = 0; i < count; i++) {
			if (chooseId == i) {
				paint.setColor(Color.RED);

				canvas.drawCircle(start_x + i * gap, height - 20, radius + 5, paint);
			} else {

				paint.setColor(Color.DKGRAY);
				canvas.drawCircle(start_x + i * gap, height - 20, radius, paint);
				// Log.d("dddddddd", count/2+"");
			}
		}

	}
}

需要的xml文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.circle.MainActivity" >

    <com.example.circle.MyCircleView
        android:id="@+id/circle"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

需要的Menu：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.example.circle.MainActivity" >

    <item
        android:id="@+id/choose1"
        android:orderInCategory="97"
        android:showAsAction="never"
        android:title="choose1"/>
    <item
        android:id="@+id/choose2"
        android:orderInCategory="98"
        android:showAsAction="never"
        android:title="choose2"/>
    <item
        android:id="@+id/choose3"
        android:orderInCategory="99"
        android:showAsAction="never"
        android:title="choose3"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:showAsAction="never"
        android:title="@string/action_settings"/>

</menu>

MainActivity代码：

package com.example.circle;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

	private MyCircleView mMyCircleView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		mMyCircleView = (MyCircleView) findViewById(R.id.circle);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		int id = item.getItemId();

		if (id == R.id.choose1) {
			mMyCircleView.choose(0);
		}
		if (id == R.id.choose2) {
			mMyCircleView.choose(1);
		}
		if (id == R.id.choose3) {
			mMyCircleView.choose(2);
		}
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}