Установить эффект ряби на представлении изображения
Получил следующее изображение:
<ImageView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"/>
Ripple прекрасно работает, если я не установил растровое изображение для изображения. Но как только я установил растровое изображение следующим образом, волновой эффект пропал:
ImageView iv=((ImageView)rootView.findViewById(R.id.header));
iv.setImageBitmap(myBitmap);
Это мой ripple.xml:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="@android:id/mask">
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>
Я думаю, что растровое изображение скрывает волновой эффект, как я могу сделать его видимым? Уже попробовал:
- Изменение андроида: фон на андроид: передний план, который не работал.
- Конфигурирование другого прозрачного ImageView поверх этого, но так как оно было прозрачным, не показывалось.
Есть идеи? Я видел, что Lollipop Contacts сделал это тоже.
4 ответа
У меня есть галерея изображений (построена с RecyclerView
и GridLayoutManager
). Изображение установлено с помощью Пикассо. Чтобы добавить рябь к изображению, я обернул ImageView
сFrameLayout
, Макет элемента:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="120dp"
android:foreground="@drawable/ripple"
android:clickable="true"
android:focusable="true"
>
<ImageView
android:id="@+id/grid_item_imageView"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_gravity="center"
android:scaleType="centerInside"
/>
</FrameLayout>
Обратите вниманиеandroid:foreground
, Это не то же самое, что android:background
, Я пробовал без android:clickable="true"
а также android:focusable="true"
и это тоже работает, но это не больно.
Затем добавьте ripple.xml
втягивается в res/drawable
:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#7FF5AC8E" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="@android:color/transparent" />
</shape>
</item>
</selector>
Обратите внимание, что это показывает полупрозрачный цвет в верхней части изображения при выборе элемента (для устройств с версией более ранней, чем Android 5.0). Вы можете удалить его, если не хотите.
Затем добавьте ripple.xml
рисовать с рябью в res/drawable-v21
:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/coral">
</ripple>
Вы можете использовать эффект ряби по умолчанию вместо пользовательских ripple.xml
, но это действительно трудно увидеть поверх изображения, потому что оно серое:
android:foreground="?android:attr/selectableItemBackground"
Вы можете достичь этого, оборачивая рисованный объект в RippleDrawable.
ImageView iv=((ImageView)rootView.findViewById(R.id.header));
Drawable image = .... // your image.
RippleDrawable rippledImage = new
RippleDrawable(ColorStateList.valueOf(rippleColor), image, null);
iv.setImageDrawable(rippledImage)
;
Для ленивых людей, как я:
android:foreground="?android:attr/selectableItemBackground"
И настроить цвет пульсации в вашем стиле.
в values /styles.xml
<style name="colorControlHighlight_blue">
<item name="colorControlHighlight">@color/main_blue_alpha26</item>
</style>
Затем в вашем фрагменте перед инфляцией в onCreateView():
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
getContext().getTheme().applyStyle(R.style.colorControlHighlight_blue, true); //blue ripple color
View view = inflater.inflate(R.layout.my_fragment_layout, container, false);
return view;
}
С круговым эффектом попробуйте это:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/colorTema3"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="@color/colorPurpleBarra" />
</shape>
</item>
<item
android:id="@android:id/background"
android:drawable="@android:color/transparent" />
Я немного опоздал на вечеринку, но то, что я нашел, работает в каждой версии Android для TextView
Просто добавьте это в текстовое представление
android:theme="@style/ClickableView"
и в свой файл стиля добавьте это:
<style name="ClickableView">
<item name="colorControlHighlight">@android:color/white</item>
<item name="android:background">?selectableItemBackground</item>
</style>