使用android写一个控件绘制一个较为精美适配屏幕的柱状图,柱形颜色为#8b51fe,y轴刻度分别为0,2000,4000,6000,8000,10000;x轴刻度为19日,20日,21日,22日,23日,24日,25日。每当点击柱形时显示对应的数据
时间: 2024-01-01 11:03:47 浏览: 57
好的,我会尽力回答您的问题。
首先,我们需要定义一个自定义View,用于绘制柱状图。以下是一份简单的代码示例:
```java
public class BarChartView extends View {
private Paint mBarPaint;
private Paint mTextPaint;
private int[] mData;
private int mMaxValue;
private int mBarColor = Color.parseColor("#8b51fe");
private int mTextColor = Color.BLACK;
private int mBarWidth;
private int mBarGap;
private int mTextSize;
public BarChartView(Context context) {
this(context, null);
}
public BarChartView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BarChartView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mBarPaint = new Paint();
mBarPaint.setColor(mBarColor);
mBarPaint.setStyle(Paint.Style.FILL);
mTextPaint = new Paint();
mTextPaint.setColor(mTextColor);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setTextSize(mTextSize);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
int barCount = mData.length;
mBarWidth = (int) ((w - getPaddingLeft() - getPaddingRight() - (barCount - 1) * mBarGap) / (float) barCount);
mTextSize = (int) (h * 0.05f);
mTextPaint.setTextSize(mTextSize);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int paddingLeft = getPaddingLeft();
int paddingTop = getPaddingTop();
int paddingBottom = getPaddingBottom();
int width = getWidth() - paddingLeft - getPaddingRight();
int height = getHeight() - paddingTop - paddingBottom;
int x = paddingLeft;
for (int i = 0; i < mData.length; i++) {
int value = mData[i];
int barHeight = (int) (value / (float) mMaxValue * height);
canvas.drawRect(x, paddingTop + height - barHeight, x + mBarWidth, paddingTop + height, mBarPaint);
canvas.drawText(String.valueOf(value), x + mBarWidth / 2f, paddingTop + height - barHeight - mTextSize, mTextPaint);
x += mBarWidth + mBarGap;
}
}
public void setData(int[] data) {
mData = data;
mMaxValue = 0;
for (int value : mData) {
mMaxValue = Math.max(mMaxValue, value);
}
invalidate();
}
public void setBarColor(int color) {
mBarColor = color;
mBarPaint.setColor(mBarColor);
invalidate();
}
public void setTextColor(int color) {
mTextColor = color;
mTextPaint.setColor(mTextColor);
invalidate();
}
public void setBarGap(int gap) {
mBarGap = gap;
invalidate();
}
}
```
然后,在我们的Activity布局文件中添加这个自定义View,并且在Activity代码中设置数据和点击事件监听器:
```xml
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.myapplication.BarChartView
android:id="@+id/bar_chart_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp" />
<TextView
android:id="@+id/value_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="24sp" />
</FrameLayout>
```
```java
public class MainActivity extends AppCompatActivity {
private BarChartView mBarChartView;
private TextView mValueTextView;
private int[] mData = {5000, 8000, 6000, 9000, 7000, 10000, 12000};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mBarChartView = findViewById(R.id.bar_chart_view);
mValueTextView = findViewById(R.id.value_text_view);
mBarChartView.setData(mData);
mBarChartView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int index = (int) (v.getX() / (float) v.getWidth() * mData.length);
int value = mData[index];
mValueTextView.setText(String.valueOf(value));
}
});
}
}
```
这样就完成了一个简单的柱状图控件,并且支持点击显示数据的功能。为了适配不同屏幕,可以在自定义View中动态计算柱形宽度、间隔和文字大小等。
阅读全文