Android自定义滚动选择器实例代码

Android自定义滚动选择器实例代码攻略

滚动选择器是Android开发中常用的控件之一，但是默认样式比较简单，很多时候需要自定义滚动选择器的样式和功能。下面介绍如何通过自定义控件来实现Android自定义滚动选择器。

步骤1：创建自定义控件

我们首先创建一个类，继承View类，绘制自定义的滚动选择器。代码如下：

public class MyRollerView extends View {

    // 绘制文本画笔
    private Paint mTextPaint;
    // 选中文本画笔
    private Paint mSelectedPaint;
    // 文本数组
    private String[] mValues;
    // 默认选中项
    private int mSelectedIndex;

    // 构造函数，初始化画笔和默认选中项
    public MyRollerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setTextSize(50);
        mSelectedPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mSelectedPaint.setTextSize(50);
        mSelectedPaint.setColor(Color.RED);
        mValues = new String[]{"Apple", "Banana", "Orange", "Pineapple", "Watermelon"};
        mSelectedIndex = 0;
    }

    // 绘制函数
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 计算文本尺寸
        float textWidth = mTextPaint.measureText(mValues[mSelectedIndex]);
        float textHeight = mTextPaint.getFontMetrics().bottom - mTextPaint.getFontMetrics().top;
        // 计算绘制位置
        float x = (getWidth() - textWidth) / 2;
        float y = (getHeight() - textHeight) / 2 + textHeight - mSelectedIndex * textHeight;
        // 绘制文本
        for (int i = 0; i < mValues.length; i++) {
            if (i == mSelectedIndex) {
                canvas.drawText(mValues[i], x, y, mSelectedPaint);
            } else {
                canvas.drawText(mValues[i], x, y, mTextPaint);
            }
            y += textHeight;
        }
    }

    // 设置选中项
    public void setSelectedIndex(int index) {
        mSelectedIndex = index;
        invalidate();
    }
}

上述代码绘制了一个滚动选择器，其中mValues为文本数组，mSelectedIndex为默认选中项。在onDraw方法中绘制了所有文本，通过计算绘制位置来实现滚动效果。setSelectedIndex方法用于设置选中项并刷新视图。

步骤2：创建对话框

我们创建一个布局文件作为对话框内容，使用我们之前创建的自定义控件来实现滚动选择器功能。代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <com.example.myapp.MyRollerView
        android:id="@+id/roller_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <Button
        android:id="@+id/btn_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OK" />

    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancel" />

</LinearLayout>

上述代码创建了一个LinearLayout，其中包含一个自定义控件和两个Button。我们需要在代码中动态添加这个布局到一个对话框中。

步骤3：显示对话框

我们需要在点击某个视图时显示自定义的滚动选择器对话框。代码如下：

public void showDialog() {
        final Dialog dialog = new Dialog(this);
        dialog.setContentView(R.layout.dialog);
        final MyRollerView rollerView = dialog.findViewById(R.id.roller_view);
        Button btnOk = dialog.findViewById(R.id.btn_ok);
        Button btnCancel = dialog.findViewById(R.id.btn_cancel);
        btnOk.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, rollerView.mValues[rollerView.mSelectedIndex], Toast.LENGTH_SHORT).show();
                dialog.dismiss();
            }
        });
        btnCancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });
        dialog.show();
    }

上述代码创建了一个对话框，设置对话框的内容为我们之前创建的布局文件。我们通过findViewById方法获取MyRollerView和Button视图，给Button绑定点击事件。showDialog方法用于显示对话框。

示例1：修改文本颜色

我们可以通过修改MyRollerView类中定义的mTextPaint和mSelectedPaint来修改文本颜色。代码如下：

public MyRollerView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mTextPaint.setTextSize(50);
    mTextPaint.setColor(Color.BLUE); // 修改文本颜色为蓝色
    mSelectedPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mSelectedPaint.setTextSize(50);
    mSelectedPaint.setColor(Color.RED);
    mValues = new String[]{"Apple", "Banana", "Orange", "Pineapple", "Watermelon"};
    mSelectedIndex = 0;
}

上述代码修改了文本颜色为蓝色，MyRollerView默认会绘制选中项的文本颜色为红色。可以通过修改mSelectedPaint来修改选中项的文本颜色。

示例2：修改文本字体大小

我们可以通过修改MyRollerView类中定义的mTextPaint和mSelectedPaint来修改文本字体大小。代码如下：

public MyRollerView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mTextPaint.setTextSize(70); // 修改文本大小为70
    mSelectedPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mSelectedPaint.setTextSize(70); // 修改选中项文本大小为70
    mValues = new String[]{"Apple", "Banana", "Orange", "Pineapple", "Watermelon"};
    mSelectedIndex = 0;
}

上述代码修改了文本大小为70，可以根据实际需求修改。