Xamarin Android：单击时更改GridView项的背景颜色

Question

I am searching how to change the background color of the clicked gridview item when it is clicked and then go back to normal color

I want that when I click, the background color of my gridview item is Orange and then after a short time, the background is white again.

Here is what I have found but "Device" is not known.

e.View.SetBackgroundColor(Color.White);
Device.StartTimer(TimeSpan.FromSeconds(0.25), () =>
{
    e.View.SetBackgroundColor(Color.Orange);
    return false;
});

I tried this :

1) Define Colors by creating colors.xml in values

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="pressed_color">#972234</color>
<color name="default_color">#000000</color>
</resources>

2) Create bg_key.xml in drawable

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
  android:state_selected="true"
  android:drawable="@color/pressed_color"/>
<item
  android:state_pressed="true"
  android:drawable="@color/pressed_color"/>
<item
  android:drawable="@color/default_color" />
</selector>

3) Set android:listSelector and listSelector to GridView

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/gridview"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:columnWidth="90dp"
      android:numColumns="auto_fit"
      android:verticalSpacing="10dp"
      android:horizontalSpacing="10dp"
      android:stretchMode="columnWidth"
      android:gravity="center" 

      android:listSelector="@drawable/bg_key"
      android:background="@color/default_color"

      />

And it is working on my side menu but not on my gridview... My grid view is composed by an ImageView and a TextView is it the problem?

Also, what should I change (for my side menu) to change the Font color and not the background color?

Answer 1

You can't use the Device -Class because it is only available in Xamarin.Forms and not native Xamarin.

But you can use the System.Timers.Timer class to change the color back after some time:

var t = new System.Timers.Timer();
t.Interval = 250;   // In miliseconds
t.Elapsed += (sender, args) =>
{
    // Change color back on the UI-Thread
    RunOnUiThread(() =>
    {
        e.View.SetBackgroundColor(Color.Orange);        
    });

};
t.Start();

Important: The Elapsed -Event is NOT invoked on the UI-Thread . So to change something on the UI (just like your background color) you need to do this on the UI-Thread.

Answer 2

Device.StartTimer is used in Xamarin.Forms to start a recurring timer using the device clock capabilities. It's not available in native.

I prefer you can just make a custom style.

---

Try this :

1) Define Colors by creating colors.xml in values

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="pressed_color">#972234</color>
  <color name="default_color">#000000</color>
</resources>

2) Create bg_key.xml in drawable

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:state_selected="true"
      android:drawable="@color/pressed_color"/>
  <item
      android:state_pressed="true"
      android:drawable="@color/pressed_color"/>
  <item
      android:drawable="@color/default_color" />
</selector>

3) Set android:listSelector and listSelector to GridView

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/gridview"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:columnWidth="90dp"
          android:numColumns="auto_fit"
          android:verticalSpacing="10dp"
          android:horizontalSpacing="10dp"
          android:stretchMode="columnWidth"
          android:gravity="center" 

          android:listSelector="@drawable/bg_key"
          android:background="@color/default_color"

          />

Answer 3

Here is my code :

Main.axml :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#EBEAEF">
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:paddingLeft="5dp"
    android:background="#282059"
    android:title="test"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
<!-- The Main Content View -->
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/logoBackgroud"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:src="@drawable/icon_background" />
        <GridView
            android:id="@+id/grid_view_image_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:columnWidth="350dp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:numColumns="auto_fit" />
    </RelativeLayout>

gridview.axml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EBEAEF">
<RelativeLayout
    android:layout_height="90dp"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_margin="25dp"
    android:listSelector="@drawable/bg_key"
    android:background="#F4F4F6">
<!-- Letter yellow color = #FAB322  -->
    <TextView
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="95dp"
        android:layout_height="fill_parent"
        android:textSize="66sp"
        android:textColor="#0071CF"
        android:background="@color/white"
        android:layout_centerVertical="true"
        android:layout_gravity="left"
        android:gravity="center_vertical|center_horizontal"
        android:text="A"
        android:paddingBottom="5dp"
        android:id="@+id/textViewLetter" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:paddingLeft="15dp"
        android:layout_toRightOf="@+id/textViewLetter"
        android:layout_centerVertical="true"
        android:layout_marginRight="35dp"
        android:textSize="22sp"
        android:gravity="center_vertical"
        android:background="#F4F4F6"
        android:textColor="#262057"
        android:textStyle="bold"
        android:listSelector="@drawable/bg_key"
        android:id="@+id/textViewFileName" />
    <ImageView
        android:layout_width="35dp"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        android:layout_alignParentRight="true"
        android:id="@+id/imageViewIcon" />
</RelativeLayout>
</LinearLayout>