在 Android 中按下 ToggleButton 时,如何在相对布局视图上设置动画背景颜色变化?
How to animate background color change on relative layouts views when pressing a ToggleButton in Android?
我有一个 RelativeLayout
包含另一个 relative layout
,其中有几个 backgroundColored 视图,像这样,并继续更多视图:
<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
">
<RelativeLayout
android:id="@+id/palette"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:animateLayoutChanges="true">
<View
android:background="@color/purple"
android:tag="@color/purple"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_width="100dip"
android:layout_height="200dip"
android:id="@+id/view1">
</View>
然后我有一个 seekbar
,它在滑动时遍历 relative layouts
的视图数并更改它们的颜色,如下所示:
@
Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
for (int i = 0; i < mPalette.getChildCount(); i++) {
View child = mPalette.getChildAt(i);
int originalColor = Color.parseColor((String) child.getTag());
int invertedColor = (0x00FFFFFF - (originalColor | 0xFF000000)) |
(originalColor & 0xFF000000);
if (getResources().getColor(R.color.white) != originalColor &&
getResources().getColor(R.color.lightgray) != originalColor) {
int red = (originalColor >> 16) & 0x000000FF;
int green = (originalColor >> 8) & 0x000000FF;
int blue = originalColor & 0x000000FF;
int invR = (invertedColor >> 16) & 0x000000FF;
int invG = (invertedColor >> 8) & 0x000000FF;
int invB = invertedColor & 0x000000FF;
child.setBackgroundColor(Color.rgb(
(int)(red + (invR - red) * (progress / 100f)), (int)(green + (invG - green) * (progress / 100f)), (int)(blue + (invB - blue) * (progress / 100f))));
child.invalidate();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
运行顺利,没有问题。
我想要实现的是通过使用 ToggleButton "auto" 自动滑动 seekBar
以便在更改进度时查看颜色变化seekbar
从 0 到 100,但我的代码实际发生的是它等待循环完成,只有当搜索栏达到 100 时才更新视图(它直接点击它而不是步进它),我的代码是这样的:
public void autoToggle(View view) throws InterruptedException {
SeekBar seekBar=(SeekBar)findViewById(R.id.seekBar);
boolean on = ((ToggleButton) view).isChecked();
if(on){
mPalette = (RelativeLayout) findViewById(R.id.palette);
for (int i =0;i<10;i++){
seekBar.setProgress(i);
mPalette.requestLayout();
Thread.sleep(10);
}
}
else
seekBar.setProgress(0);
}
我已经添加了 mPalette.requestLayout()
方法来查看它是否更新,但也没有。
根据这个答案,我决定研究 ObjectAnimator class:
Android ObjectAnimator
首先,我确实更改了两个按钮的 ToggleButton
,一个称为 go100,另一个称为 go0,两者都从其 currentPosition() 滑动 seekbar
;到 100 或 0,这是因为它们有更好的使用逻辑,因为如果我不强制取消选中,toggleButton 在执行动画后将保持选中状态,无论哪种方式都会是一种奇怪的 UI 行为.两个按钮都在 RelativeLayout
之外,其中包含 seekBar
重新着色的彩色视图。
按钮xml定义,通过使用android:onClick:
方法,不需要在代码上覆盖按钮的onClickListener,只需定义它们的onClick方法
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/go_100"
android:id="@+id/go100"
android:onClick="go100"
android:layout_alignTop="@+id/go0"
android:layout_alignParentRight="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/go_0"
android:id="@+id/go0"
android:onClick="go0"
android:layout_alignWithParentIfMissing="false"
android:layout_alignParentBottom="true"
android:layout_marginBottom="73dp"
android:layout_alignParentLeft="true" />
Java 代码执行 seekBar 的滑动,并允许它在滑动时改变,这是实际问题,因为我可以用 for、while 或其他方法让它移动,但不显示起始位置和结束位置之间的滑动间隔。
/* Called when the go100 button is clicked, it slides the seekBar from its current position
to 100 in an adjusted time given the previous progress of the seekbar,
given maximum 4 seconds and minimum 0 seconds
*/
public void go100(View view){
final SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);
ObjectAnimator anim = ObjectAnimator.ofInt(seekBar, "progress", seekBar.getProgress(),100);
anim.setDuration(4000-(4000*seekBar.getProgress()/100));
anim.start();
}
/* Called when the go0 button is clicked, it slides the seekBar from its current position
to 100 in an adjusted time given the previous progress of the seekbar,
given maximum 4 seconds and minimum 0 seconds
*/
public void go0 (View view){
final SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);
ObjectAnimator anim2 = ObjectAnimator.ofInt(seekBar, "progress", seekBar.getProgress(),0);
anim2.setDuration(4000*seekBar.getProgress()/100);
anim2.start();
}
最后我还想通过使用 ObjectAnimator ofMultiInt (Object target, String propertyName, int[][] values) 并为其提供 int [][] a = new int {{ 的矩阵来尝试搜索栏从一侧循环到另一侧0,100},{100,0} 但没有设法解决它并采用我上面的解决方案。
我有一个 RelativeLayout
包含另一个 relative layout
,其中有几个 backgroundColored 视图,像这样,并继续更多视图:
<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
">
<RelativeLayout
android:id="@+id/palette"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:animateLayoutChanges="true">
<View
android:background="@color/purple"
android:tag="@color/purple"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_width="100dip"
android:layout_height="200dip"
android:id="@+id/view1">
</View>
然后我有一个 seekbar
,它在滑动时遍历 relative layouts
的视图数并更改它们的颜色,如下所示:
@
Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
for (int i = 0; i < mPalette.getChildCount(); i++) {
View child = mPalette.getChildAt(i);
int originalColor = Color.parseColor((String) child.getTag());
int invertedColor = (0x00FFFFFF - (originalColor | 0xFF000000)) |
(originalColor & 0xFF000000);
if (getResources().getColor(R.color.white) != originalColor &&
getResources().getColor(R.color.lightgray) != originalColor) {
int red = (originalColor >> 16) & 0x000000FF;
int green = (originalColor >> 8) & 0x000000FF;
int blue = originalColor & 0x000000FF;
int invR = (invertedColor >> 16) & 0x000000FF;
int invG = (invertedColor >> 8) & 0x000000FF;
int invB = invertedColor & 0x000000FF;
child.setBackgroundColor(Color.rgb(
(int)(red + (invR - red) * (progress / 100f)), (int)(green + (invG - green) * (progress / 100f)), (int)(blue + (invB - blue) * (progress / 100f))));
child.invalidate();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
运行顺利,没有问题。
我想要实现的是通过使用 ToggleButton "auto" 自动滑动 seekBar
以便在更改进度时查看颜色变化seekbar
从 0 到 100,但我的代码实际发生的是它等待循环完成,只有当搜索栏达到 100 时才更新视图(它直接点击它而不是步进它),我的代码是这样的:
public void autoToggle(View view) throws InterruptedException {
SeekBar seekBar=(SeekBar)findViewById(R.id.seekBar);
boolean on = ((ToggleButton) view).isChecked();
if(on){
mPalette = (RelativeLayout) findViewById(R.id.palette);
for (int i =0;i<10;i++){
seekBar.setProgress(i);
mPalette.requestLayout();
Thread.sleep(10);
}
}
else
seekBar.setProgress(0);
}
我已经添加了 mPalette.requestLayout()
方法来查看它是否更新,但也没有。
根据这个答案,我决定研究 ObjectAnimator class: Android ObjectAnimator
首先,我确实更改了两个按钮的 ToggleButton
,一个称为 go100,另一个称为 go0,两者都从其 currentPosition() 滑动 seekbar
;到 100 或 0,这是因为它们有更好的使用逻辑,因为如果我不强制取消选中,toggleButton 在执行动画后将保持选中状态,无论哪种方式都会是一种奇怪的 UI 行为.两个按钮都在 RelativeLayout
之外,其中包含 seekBar
重新着色的彩色视图。
按钮xml定义,通过使用android:onClick:
方法,不需要在代码上覆盖按钮的onClickListener,只需定义它们的onClick方法
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/go_100"
android:id="@+id/go100"
android:onClick="go100"
android:layout_alignTop="@+id/go0"
android:layout_alignParentRight="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/go_0"
android:id="@+id/go0"
android:onClick="go0"
android:layout_alignWithParentIfMissing="false"
android:layout_alignParentBottom="true"
android:layout_marginBottom="73dp"
android:layout_alignParentLeft="true" />
Java 代码执行 seekBar 的滑动,并允许它在滑动时改变,这是实际问题,因为我可以用 for、while 或其他方法让它移动,但不显示起始位置和结束位置之间的滑动间隔。
/* Called when the go100 button is clicked, it slides the seekBar from its current position
to 100 in an adjusted time given the previous progress of the seekbar,
given maximum 4 seconds and minimum 0 seconds
*/
public void go100(View view){
final SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);
ObjectAnimator anim = ObjectAnimator.ofInt(seekBar, "progress", seekBar.getProgress(),100);
anim.setDuration(4000-(4000*seekBar.getProgress()/100));
anim.start();
}
/* Called when the go0 button is clicked, it slides the seekBar from its current position
to 100 in an adjusted time given the previous progress of the seekbar,
given maximum 4 seconds and minimum 0 seconds
*/
public void go0 (View view){
final SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);
ObjectAnimator anim2 = ObjectAnimator.ofInt(seekBar, "progress", seekBar.getProgress(),0);
anim2.setDuration(4000*seekBar.getProgress()/100);
anim2.start();
}
最后我还想通过使用 ObjectAnimator ofMultiInt (Object target, String propertyName, int[][] values) 并为其提供 int [][] a = new int {{ 的矩阵来尝试搜索栏从一侧循环到另一侧0,100},{100,0} 但没有设法解决它并采用我上面的解决方案。