在 android 中使用搜索栏逐渐更改 5 个矩形的颜色 a

Question

我的屏幕上有 5 个矩形，底部有一个搜索栏（见下图 link）。我正在尝试通过移动搜索栏来逐渐更改 5 个矩形中的 4 个（灰色中间右侧除外）的颜色。我在 RectAngle class 中使用 drawRect 方法绘制了 5 个矩形，但我在不同的 class (GloblaUIVariables class) 中实例化了它们以使它们成为全局的，但是当我移动搜索时没有任何反应右边的栏。我在这里干什么。谢谢你的帮助。

Screen Image

这是我的 RectAngle class:

 public class RectAngle extends View {

        public RectAngle(Context context) {
            super(context);
        }
        public RectAngle(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }

        public RectAngle(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }


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

            float x = getWidth();
            float y = getHeight();



            // Draw  the top left rectangle
            GlobalUIVariables.topLeftRect.setStyle(Paint.Style.FILL);
            GlobalUIVariables.topLeftRect.setColor(Color.parseColor("#66FFFF"));
           // canvas.drawPaint(topLeftRect);
            canvas.drawRect(0, 0, x / 2, y / 2, GlobalUIVariables.topLeftRect);


            //Draw the bottom left rectangle

            GlobalUIVariables.bottomLeftRect.setStyle(Paint.Style.FILL);
            //bottomLeftRect.setColor(Color.WHITE);
           // canvas.drawPaint(bottomLeftRect);
            GlobalUIVariables.bottomLeftRect.setColor(Color.parseColor("#FFFF00"));
            canvas.drawRect(0, y / 2, x / 2, y, GlobalUIVariables.bottomLeftRect);

            //Draw the top tight rectangle

            GlobalUIVariables.topRightRect.setStyle(Paint.Style.FILL);
            //topRightRect.setColor(Color.WHITE);
            GlobalUIVariables.topRightRect.setColor(Color.parseColor("#FF6600"));
            //canvas.drawPaint(topRightRect);
            canvas.drawRect(x / 2, 0, x, y / 3, GlobalUIVariables.topRightRect);

            // Draw the middle right rectangle

            GlobalUIVariables.midRightRect.setStyle(Paint.Style.FILL);
            GlobalUIVariables.midRightRect.setColor(Color.parseColor("#808080"));
           // canvas.drawPaint(midRightRect);
            canvas.drawRect(x / 2, y/3, x, 2*y / 3, GlobalUIVariables.midRightRect);

            //Draw the bottom right rectangle

            GlobalUIVariables.bottomRightRect.setStyle(Paint.Style.FILL);
            //bottomRightRect.setColor(Color.WHITE);
            GlobalUIVariables.bottomRightRect.setColor(Color.parseColor("#CCCC00"));
           // canvas.drawPaint(bottomRightRect);
            canvas.drawRect(x/2, 2*y/3, x, y, GlobalUIVariables.bottomRightRect);




        }
    }

这是我的主要activity class:

    public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(new RectAngle(this));
        setContentView(R.layout.activity_main);
        SeekBar seekBar;
        RectAngle rect;

        seekBar = (SeekBar)findViewById(R.id.seekBar);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                RectAngle rect;
                rect = (RectAngle)findViewById(R.id.rectangle);
                rect.postInvalidate();
                GlobalUIVariables.topLeftRect.setStyle(Paint.Style.FILL);
                GlobalUIVariables.topLeftRect.setColor(Color.rgb(23 - progress, 200 + progress, 99 + progress));
                GlobalUIVariables.bottomLeftRect.setColor(Color.rgb(255, 133 + progress, 144 - progress));
                GlobalUIVariables.topRightRect.setColor((Color.rgb(88 + progress, 200 - progress, 177 + progress)));
                GlobalUIVariables.bottomRightRect.setColor(Color.rgb(230, 56 + progress, 233 - progress));
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

这是我的 GlobalUIVariables class:

public class GlobalUIVariables extends Application {
    public static Paint topLeftRect = new Paint();
    public static Paint bottomLeftRect = new Paint();
    public static Paint topRightRect = new Paint();
    public static Paint midRightRect = new Paint();
    public static Paint bottomRightRect = new Paint();
}

<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"  tools:context=".MainActivity">
    <com.example.hassan.modernartui.RectAngle
        android:id="@+id/rectangle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/seekBar"/>

    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar"
        android:max="100"
        android:indeterminate="false"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="false"
        android:layout_alignParentEnd="false" />
</RelativeLayout>

Answer 1

What am I doing wring here.

您忘记获取对 RectAngle 的引用（您可以使用 findViewById()）并在设置新颜色后对其调用 View.invalidate()。这将安排重绘您的 View 并且 onDraw 将再次被调用。在这里您可以找到 invalidate() 的文档。正如 @Petey 正确指出的那样，在 onDraw 中，您在 Paint 对象

中一遍又一遍地重置

Answer 2

您是否将自定义矩形视图添加到 activity_main 布局？

如果您还没有添加该视图，您应该像这样将它添加到 activity_main 布局

<com.blah.blah.RectAngle
         android:id="@+id/rectangle_view"
          android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

获取 RectAngle 视图的句柄并在 RectAngle 视图上调用 invalidate 以在 onStopTrackingTouch 上重绘。

答案：

在矩形的onDraw 方法中，它使用的是您第一次定义的颜色。在 activity.

的 Rectangle 视图构造函数或创建方法中注释或设置它们

GlobalUIVariables.topLeftRect.setColor(Color.parseColor("#66FFFF"));

在 onDrawMethod 中注释完所有这些颜色后，像现在一样在 onProgressChanged 中调用 Rectangle 的 invalidate 方法。

Answer 3

从头设置绘画（创建视图时）。这样我们也可以摆脱 using the application class, GlobalUIVariables, usages。以下是如何将此数据放入视图中，第 2 步将向您展示如何更改它们：

在 RectAngle 中放置颜料 class

public class RectAngle extends View {

    public Paint topLeftRect, bottomLeftRect, topRightRect, midRightRect, bottomRightRect;

    public RectAngle(Context context) {
        super(context);
        initPaints();
    }
    public RectAngle(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RectAngle(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaints();
    }

    void initPaints(){
        topLeftRect = new Paint();
        bottomLeftRect = new Paint();
        topRightRect = new Paint();
        midRightRect = new Paint();
        bottomRightRect = new Paint();
        topLeftRect.setStyle(Paint.Style.FILL);
        topLeftRect.setColor(Color.parseColor("#66FFFF"));
        bottomLeftRect.setStyle(Paint.Style.FILL);
        bottomLeftRect.setColor(Color.parseColor("#FFFF00"));
        topRightRect.setStyle(Paint.Style.FILL);
        topRightRect.setColor(Color.parseColor("#FF6600"));
        midRightRect.setStyle(Paint.Style.FILL);
        midRightRect.setColor(Color.parseColor("#808080"));
        bottomRightRect.setStyle(Paint.Style.FILL);
        bottomRightRect.setColor(Color.parseColor("#CCCC00"));
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float x = getWidth();
        float y = getHeight();
        // Draw  the top left rectangle
        canvas.drawRect(0, 0, x / 2, y / 2, topLeftRect);

        //Draw the bottom left rectangle
        canvas.drawRect(0, y / 2, x / 2, y, bottomLeftRect);

        //Draw the top tight rectangle
        canvas.drawRect(x / 2, 0, x, y / 3, topRightRect);

        // Draw the middle right rectangle
        canvas.drawRect(x / 2, y/3, x, 2*y / 3, midRightRect);

        //Draw the bottom right rectangle
        canvas.drawRect(x/2, 2*y/3, x, y, bottomRightRect);
    }
}

修复您的滑块侦听器以更改视图中的颜色（不是您的应用程序 class），然后调用 invalidate

final RectAngle rectAngleView = (RectAngle) findViewById(R.id.rectangle);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        rectAngleView.topLeftRect.setColor(Color.rgb(23 - progress, 200 + progress, 99 + progress));
        rectAngleView.bottomLeftRect.setColor(Color.rgb(255, 133 + progress, 144 - progress));
        rectAngleView.topRightRect.setColor((Color.rgb(88 + progress, 200 - progress, 177 + progress)));
        rectAngleView.bottomRightRect.setColor(Color.rgb(230, 56 + progress, 233 - progress));
        rectAngleView.invalidate();
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

    }
});

希望对您有所帮助。

在 android 中使用搜索栏逐渐更改 5 个矩形的颜色 a

Changing color a of 5 rectangles gradually using a seek bar in android

android

android-layout

android-activity

android-seekbar