Android:圖片背景漸變切換與圖層疊加的實現
阿新 • • 發佈:2019-02-07
本例要實現的目的:
1.圖片背景漸變的切換,例如漸變的從紅色切換成綠色。
2.程式碼中進行圖層疊加,即把多個Drawable疊加在一起顯示在一個元件之上。
效果圖:
程式碼很簡單:
(1)佈局檔案:
(2)Activity程式碼:<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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:ignore="ContentDescription" tools:context=".MainActivity"> <ImageView android:id="@+id/color_iv" android:layout_width="200dp" android:layout_height="200dp" android:layout_centerHorizontal="true" android:src="@drawable/image_bg_2" android:layout_margin="20dp" /> <TextView android:id="@+id/note_text" android:layout_below="@+id/color_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:layout_margin="10dp" android:text="點選顏色塊,切換圖片背景" /> <LinearLayout android:layout_width="match_parent" android:layout_height="48dip" android:layout_below="@+id/note_text" android:layout_marginBottom="8dip" android:layout_marginLeft="4dip" android:layout_marginRight="4dip" android:orientation="horizontal"> <ImageView android:layout_width="0dip" android:layout_height="match_parent" android:layout_margin="4dip" android:layout_weight="1" android:background="#99666666" android:onClick="onColorClicked" android:tag="#99666666" /> <ImageView android:layout_width="0dip" android:layout_height="match_parent" android:layout_margin="4dip" android:layout_weight="1" android:background="#9996AA39" android:onClick="onColorClicked" android:tag="#9996AA39" /> <ImageView android:layout_width="0dip" android:layout_height="match_parent" android:layout_margin="4dip" android:layout_weight="1" android:background="#99C74B46" android:onClick="onColorClicked" android:tag="#99C74B46" /> <ImageView android:layout_width="0dip" android:layout_height="match_parent" android:layout_margin="4dip" android:layout_weight="1" android:background="#99F4842D" android:onClick="onColorClicked" android:tag="#99F4842D" /> <ImageView android:layout_width="0dip" android:layout_height="match_parent" android:layout_margin="4dip" android:layout_weight="1" android:background="#993F9FE0" android:onClick="onColorClicked" android:tag="#993F9FE0" /> <ImageView android:layout_width="0dip" android:layout_height="match_parent" android:layout_margin="4dip" android:layout_weight="1" android:background="#995161BC" android:onClick="onColorClicked" android:tag="#995161BC" /> </LinearLayout> </RelativeLayout>
package com.sinatj.colorgradientanim; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.graphics.drawable.Drawable; import android.graphics.drawable.LayerDrawable; import android.graphics.drawable.TransitionDrawable; import android.os.Build; import android.os.Handler; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.View; import android.widget.ImageView; public class MainActivity extends ActionBarActivity { private ImageView imageView; private Drawable oldBackground = null; private Drawable bgDrawable; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageView = (ImageView) findViewById(R.id.color_iv); bgDrawable = getResources().getDrawable(R.drawable.image_bg_1); //初始顏色 changeColor(Color.parseColor("#6696AA39")); } private void changeColor(int newColor) { Drawable colorDrawable = new ColorDrawable(newColor); //圖層疊加 LayerDrawable ld = new LayerDrawable(new Drawable[]{bgDrawable, colorDrawable}); if (oldBackground == null) { imageView.setBackgroundDrawable(ld); } else { //漸變切換 TransitionDrawable td = new TransitionDrawable(new Drawable[]{oldBackground, ld}); imageView.setBackgroundDrawable(td); td.startTransition(300); } oldBackground = ld; } public void onColorClicked(View v) { int color = Color.parseColor(v.getTag().toString()); changeColor(color); } }