ImageView的Tint屬性

2019-11-09 15:06:30

字體：大中小

來源：轉載

供稿：網友

Tint是一個比較難以用文字來解釋的屬性，效果圖可以參照以下一張圖片

這里寫圖片描述

首先有一張Src圖片以及一張Dst圖片，然后根據這兩張圖片不同的層疊變化，可以組合成其它十四種圖形例如 clear表示兩張圖片層疊后什么都不顯示 SrcOver表示兩張圖片的相交部分顯示Src的顏色 SrcIn表示只顯示兩張圖片的相交部分，且為Src的顏色

在布局中，tint屬性如下定義：

<ImageView android:tint="@color/color代碼如下定義：

setColorFilter(int color, PorterDuff.Mode mode)

這里做個小Demo來演示效果使用到的圖片有如下三張：這里寫圖片描述

將三張圖片作為Dst，再設定一個顏色值作為Src，Src用四個SeekBar來調節顏色，觀察其效果變化

布局文件：

<?xml version="1.0" encoding="utf-8"?><ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/green" android:layout_width="50dp" android:layout_height="50dp" android:src="@drawable/green" /> <ImageView android:id="@+id/red" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="10dp" android:src="@drawable/red" /> <ImageView android:id="@+id/transparent" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="10dp" android:src="@drawable/transparent" /> </LinearLayout> <Spinner android:id="@+id/spinner" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Alpha 透明度" /> <SeekBar android:id="@+id/alpha_seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="255" android:progress="255" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Red 紅色" /> <SeekBar android:id="@+id/red_seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="255" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Green 綠" /> <SeekBar android:id="@+id/green_seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="255" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Blue 藍色" /> <SeekBar android:id="@+id/blue_seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="255" /> <TextView android:gravity="center" android:text="圖片是Dst，設置的顏色是Src" android:layout_width="match_parent" android:layout_height="wrap_content" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/explain" /> </LinearLayout></ScrollView>

再Strings.xml文件中聲明Spinner的選項

<string-array name="modes"> <item>CLEAR</item> <item>SRC</item> <item>DST</item> <item>SRC_OVER</item> <item>DST_OVER</item> <item>SRC_IN</item> <item>DST_IN</item> <item>SRC_OUT</item> <item>DST_OUT</item> <item>SRC_ATOP</item> <item>DST_ATOP</item> <item>XOR</item> <item>DARKEN</item> <item>LIGHTEN</item> <item>MULTipLY</item> <item>SCREEN</item> <item>ADD</item> <item>OVERLAY</item> </string-array>

聲明控件與Tint模式

private ImageView iv_green; private ImageView iv_red; private ImageView iv_transparent; private Spinner spinner; //透明度滑動條 private SeekBar sb_transparent; //紅色滑動條 private SeekBar sb_red; //綠色滑動條 private SeekBar sb_green; //藍色滑動條 private SeekBar sb_blue; private static final PorterDuff.Mode[] MODES = new PorterDuff.Mode[]{ PorterDuff.Mode.CLEAR, PorterDuff.Mode.SRC, PorterDuff.Mode.DST, PorterDuff.Mode.SRC_OVER, PorterDuff.Mode.DST_OVER, PorterDuff.Mode.SRC_IN, PorterDuff.Mode.DST_IN, PorterDuff.Mode.SRC_OUT, PorterDuff.Mode.DST_OUT, PorterDuff.Mode.SRC_ATOP, PorterDuff.Mode.DST_ATOP, PorterDuff.Mode.XOR, PorterDuff.Mode.DARKEN, PorterDuff.Mode.LIGHTEN, PorterDuff.Mode.MULTIPLY, PorterDuff.Mode.SCREEN, PorterDuff.Mode.ADD, PorterDuff.Mode.OVERLAY };@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv_green = (ImageView) findViewById(R.id.green); iv_transparent = (ImageView) findViewById(R.id.transparent); iv_red = (ImageView) findViewById(R.id.red); sb_transparent = (SeekBar) findViewById(R.id.alpha_seekBar); sb_red = (SeekBar) findViewById(R.id.red_seekBar); sb_green = (SeekBar) findViewById(R.id.green_seekBar); sb_blue = (SeekBar) findViewById(R.id.blue_seekBar); spinner = (Spinner) findViewById(R.id.spinner); SpinnerAdapter spinnerAdapter = ArrayAdapter.createFromResource(this, R.array.modes, android.R.layout.simple_list_item_1); spinner.setAdapter(spinnerAdapter); initEvent(); updateImage(getRGBColor(), getMode()); } private void initEvent() { spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<?> parent, View view, int position, long id) { updateImage(getRGBColor(), getMode()); } @Override public void onNothingSelected(AdapterView<?> parent) { } }); SeekBar.OnSeekBarChangeListener seekBarChangeListener = new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { updateImage(getRGBColor(), getMode()); } @Override public void onStartTrackingTouch(SeekBar seekBar) { } @Override public void onStopTrackingTouch(SeekBar seekBar) { } }; sb_transparent.setOnSeekBarChangeListener(seekBarChangeListener); sb_red.setOnSeekBarChangeListener(seekBarChangeListener); sb_green.setOnSeekBarChangeListener(seekBarChangeListener); sb_blue.setOnSeekBarChangeListener(seekBarChangeListener); } private PorterDuff.Mode getMode() { return MODES[spinner.getSelectedItemPosition()]; } /** * 根據ARGB值計算顏色值 * * @return 顏色值 */ private int getRGBColor() { int alpha = sb_transparent.getProgress(); int red = sb_red.getProgress(); int green = sb_green.getProgress(); int blue = sb_blue.getProgress(); return Color.argb(alpha, red, green, blue); } /** * 更新顏色與模式 * * @param color 顏色 * @param mode 模式 */ private void updateImage(int color, PorterDuff.Mode mode) { iv_red.setColorFilter(color, mode); iv_green.setColorFilter(color, mode); iv_transparent.setColorFilter(color, mode); }

演示效果這里寫圖片描述