Хорошим примером этого является либо на экране запуска Twitter (экран с большими значками, который отображается при первом запуске приложения), либо даже просто посмотрите на панель приложений, когда вы фокусируете значок приложения.
В основном мне нужно выделить ImageView, где выделены контуры изображения в ImageView и выглядит как граница этого изображения. Я также хотел бы настроить подсветку, чтобы она была определенного цвета и чтобы она исчезла.
Спасибо,
groomsy
Вам нужно назначить атрибут src для списка состояний ImageView. Другими словами, этот список состояний будет иметь другое изображение для выбранных, нажатых, не выбранных и т.д. - то, как это делает приложение Twitter.
Итак, если у вас есть ImageView:
<ImageView style="@style/TitleBarLogo"
android:contentDescription="@string/description_logo"
android:src="@drawable/title_logo" />
src drawable (title_logo.xml) будет выглядеть так:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/title_logo_pressed"/>
<item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/title_logo_pressed"/>
<item android:state_focused="true" android:drawable="@drawable/title_logo_selected"/>
<item android:state_focused="false" android:state_pressed="false" android:drawable="@drawable/title_logo_default"/>
</selector>
Приложение Google IO Schedule имеет хороший пример.
Если у вас нет другого вытягиваемого для нажатого состояния, вы можете использовать setColorFilter для достижения простого эффекта оттенка.
Он ведет себя точно так же, как нажатие селектора состояний, поэтому, когда изображение нажимается, оно меняет фон на светло-серый цвет.
final ImageView image = (ImageView) findViewById(R.id.my_image);
image.setOnTouchListener(new View.OnTouchListener() {
private Rect rect;
@Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN){
image.setColorFilter(Color.argb(50, 0, 0, 0));
rect = new Rect(v.getLeft(), v.getTop(), v.getRight(), v.getBottom());
}
if(event.getAction() == MotionEvent.ACTION_UP){
image.setColorFilter(Color.argb(0, 0, 0, 0));
}
if(event.getAction() == MotionEvent.ACTION_MOVE){
if(!rect.contains(v.getLeft() + (int) event.getX(), v.getTop() + (int) event.getY())){
image.setColorFilter(Color.argb(0, 0, 0, 0));
}
}
return false;
}
});
Он обрабатывает перемещение пальца вне границ вида, поэтому, если это происходит, он восстанавливает фон по умолчанию.
Важно возвращать метод false из onTouch, если вы хотите также поддерживать onClickListner.
Для отображения динамических изображений вы можете использовать LayerDrawable для источника изображения.
LayerDrawable d = new LayerDrawable(new Drawable[]{new BitmapDrawable(myBmp), getResources().getDrawable(R.drawable.my_selector_list)});
imageView.setImageDrawable(d);
Только для завершения ответа Джоша Клемма. Вы также можете сохранить тот же образ, определенный src, но изменить или выделить только фон. Это примерно так:
logo_box.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/background_normal"/>
<item android:state_pressed="false" android:drawable="@drawable/background_pressed"/>
</selector>
И затем определяя фон вашей кнопки как logo_box:
<ImageView
android:contentDescription="@string/description_logo"
android:src="@drawable/logo"
android:background="@drawable/logo_box" />
Если background_normal и background_pressed могут быть такими сложными, как вы хотите, или просто, как @color:)
Мое решение, настраиваемый атрибут для ImageView:
https://github.com/henrychuangtw/Android-ImageView-hover
Шаг 1: объявить стиль
<declare-styleable name="MyImageViewAttr">
<attr name="hover_res" format="reference" />
</declare-styleable>
Шаг 2: пользовательский ImageView
public class MyImageView extends ImageView {
int resID, resID_hover;
public MyImageView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public MyImageView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MyImageViewAttr);
resID_hover = array.getResourceId(R.styleable.MyImageViewAttr_hover_res, -1);
if(resID_hover != -1){
int[] attrsArray = new int[] {
android.R.attr.src
};
TypedArray ta = context.obtainStyledAttributes(attrs, attrsArray);
resID = ta.getResourceId(0 , View.NO_ID);
ta.recycle();
setOnTouchListener(listener_onTouch);
}
array.recycle();
}
public MyImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MyImageViewAttr);
resID_hover = array.getResourceId(R.styleable.MyImageViewAttr_hover_res, -1);
if(resID_hover != -1){
int[] attrsArray = new int[] {
android.R.attr.src
};
TypedArray ta = context.obtainStyledAttributes(attrs, attrsArray);
resID = ta.getResourceId(0 , View.NO_ID);
ta.recycle();
setOnTouchListener(listener_onTouch);
}
array.recycle();
}
OnTouchListener listener_onTouch = new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
setImageResource(resID_hover);
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
setImageResource(resID);
break;
default:
break;
}
return false;
}
};
}
Шаг 3: объявить myattr: xmlns: myattr = "http://schemas.android.com/apk/res-auto" в макете xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myattr="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
Шаг 4: установите myattr: hover_res для MyImageView
<dev.henrychuang.component.MyImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
myattr:hover_res="@drawable/icon_home_h"
android:src="@drawable/icon_home"/>
Это расширение mklimek. Я не мог заставить его работать должным образом из его фрагмента. Я немного отредактировал
ImageView testImage = (ImageView)findViewById(R.id.imageView);
testImage.setOnTouchListener(listener);
View.OnTouchListener listener = new View.OnTouchListener() {
private Rect rect;
@Override
public boolean onTouch(View v, MotionEvent event) {
ImageView image = (ImageView) v;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
image.getDrawable().setColorFilter(0x77000000,PorterDuff.Mode.SRC_ATOP);
image.invalidate();
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL: {
//clear the overlay
image.getDrawable().clearColorFilter();
image.invalidate();
break;
}
}
return true;
}
};
Я собрал небольшую библиотеку, которая должна помочь с этим: https://github.com/noveogroup/Highlightify
В основном он создает селектор во время выполнения, и он должен быть очень прост в использовании. Хотя, сфокусированное состояние еще не поддерживается...
Я заметил, что выпадающего xml недостаточно:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_filter_up" android:state_pressed="true"/>
<item android:drawable="@drawable/ic_filter_up_shadow"/>
</selector>
ImageView не нажимает. Вы также должны назначить OnClickListener для ImageView. Затем он будет нажат кнопку.
Я использую android:state_selected="true" для состояния imageView.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_enable" android:state_selected="true" />
<item android:drawable="@drawable/ic_disable" android:state_selected="false" />
<!--for default-->
<item android:drawable="@drawable/ic_enable" />
</selector>
используйте img_view.setSelected(true) ИЛИ img_view.setSelected(false) для изменения состояния изображения в коде java/kotlin.
Используйте selectableItemBackground в качестве фона:
android:background="?android:attr/selectableItemBackground"