Android ImageView點擊選中後添加邊框

ImageView點擊選中後添加邊框是最近做連連看時遇到的一個小需求，從網上搜了一下，發現有用Selector做的，有用Canvas做的，但是它們都沒能滿足我的需求。所以，我就思考尋找其他的解決方法，經過嘗試找到了一種實現的方法，具體的方法如下：1、製作一個和ImageView中要顯示的圖片一樣大小的透明圖片。2、通過繪圖工具給透明圖片畫上邊框。3、把ImageView要顯示的圖片設置成backgroud。4、給ImageView添加點擊事件處理，動態將帶邊框的透明圖片加入ImageView。下面就把代碼和效果圖展示給大家。

 

1. MainActivity.java

package com.htt.lianliankangame;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.ColorInt;
import android.support.annotation.RequiresApi;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.BaseAdapter;
import android.widget.GridLayout;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.Random;

import static com.htt.lianliankangame.R.*;
import static com.htt.lianliankangame.R.drawable.background_border;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    GridLayout gridView;
    ImageView imageView;
    ImageView currentImage;
    int dpScale;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(id.toolbar);
        setSupportActionBar(toolbar);
        DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        dpScale = (int)metrics.density;

        FloatingActionButton fab = (FloatingActionButton) findViewById(id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        //動態繪製64個帶不同圖片的網格
        addImageView();

    }

    @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.Game_difficult) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    public void addImageView(){
        gridView = (GridLayout)findViewById(id.gridLayout);
        for(int i = 0; i < 64; i++){
            imageView = new ImageView(this);
            //爲每一個網格設置一個ID，然後給每一個網格附隨機的圖片,網格與圖片之間是相互分離的
            imageView.setId(i);
            //隨機產生一個數，然後通過這個數去獲取圖片
            int random = getRandom();
            switch (random){
                case 1:
                    imageView.setBackgroundResource(drawable.icon_1);
                    break;
                case 2:
                    imageView.setBackgroundResource(drawable.icon_2);
                    break;
                case 3:
                    imageView.setBackgroundResource(drawable.icon_3);
                    break;
                case 4:
                    imageView.setBackgroundResource(drawable.icon_4);
                    break;
                case 5:
                    imageView.setBackgroundResource(drawable.icon_5);
                    break;
                case 6:
                    imageView.setBackgroundResource(drawable.icon_6);
                    break;
                case 7:
                    imageView.setBackgroundResource(drawable.icon_7);
                    break;
                case 8:
                    imageView.setBackgroundResource(drawable.icon_8);
                    break;
            }
            ViewGroup.LayoutParams params = new GridLayout.LayoutParams();
            imageView.setLayoutParams(new LinearLayout.LayoutParams(125,125));
            imageView.setClickable(true);
            //爲每一個imageView設置監聽事件
            imageView.setOnClickListener(this);
            gridView.addView(imageView);
        }
    }

    public int getRandom(){
        Random random = new Random();//定義隨機類
        int result = random.nextInt(8);
        return result+1;
    }

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    public void onClick(View v) {
        handleImageView((ImageView)v);

    }

    public void handleImageView(ImageView imageView){
        imageView.setImageResource(drawable.background_border);
        currentImage = imageView;
    }


}

2. background_border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    >
    <solid android:theme="@android:style/Theme.Translucent" />
    <stroke android:width="2dp" android:color="#99ccff" />
    <corners android:radius="0dp" />
    <padding android:left="0dp" android:top="0dp"
        android:right="0dp" android:bottom="0dp" />
</shape>

3. 運行後效果圖