Arama görünümü widget'ının arka plan çekilebilirliğini değiştirme

Android eylem çubuğu arama görünümü widget'ında bulunan çekmeceyi değiştirmeye çalışıyorum.

Şu anda şuna benziyor:

ancak mavi arka planı kırmızı renge çevirmem gerekiyor.

Kendi arama widget'ımı yuvarlamak dışında pek çok şey denedim, ancak hiçbir şey işe yaramıyor.

Bunu değiştirmek için biri beni doğru yönü gösterebilir mi?

giriş

Ne yazık ki , ActionBar açılır listesindeki öğelerin arka planında yapabildiğinizSearchView gibi, XML'de temaları, stilleri ve kalıtımı kullanarak metin alanı stilini ayarlamanın bir yolu yoktur . Bunun nedeni styleable olarak listelenen in ise (biz ilgilenen olduğunuzu tema nitelik) değildir. Bu nedenle, XML kaynaklarından kolayca erişemiyoruz (bir hata alırsınız ).selectableItemBackground R.stylablesearchViewTextFieldNo resource found that matches the given name: attr 'android:searchViewTextField'

SearchView metin alanı arka planını koddan ayarlama

Bu nedenle, SearchViewmetin alanının arka planını uygun şekilde değiştirmenin tek yolu, iç kısımlarına girmek, arka planı temel alan görünüme erişim elde etmek searchViewTextFieldve kendimizi ayarlamaktır.

NOT: Aşağıdaki çözüm yalnızca android:id/search_plateiçindeki öğenin id ( ) 'sine bağlıdır SearchView, bu nedenle alt geçişten daha çok SDK sürümü bağımsızdır (örneğin, içerideki searchView.getChildAt(0)doğru görünüme ulaşmak için kullanma SearchView), ancak kurşun geçirmez değildir. Özellikle bazı üreticiler SearchView, yukarıda belirtilen kimliğe sahip ve öğesinin dahili bileşenlerini yeniden uygulamaya karar verirse , kod çalışmayacaktır.

SDK'da, metin alanının arka planı dokuz yamaSearchView ile bildirilir , bu yüzden biz de aynı şekilde yapacağız. Orijinal png resimlerini Android git deposunun drawable-mdpi dizininde bulabilirsiniz . İki resimle ilgileniyoruz. Metin alanı seçildiğinde durum için ( textfield_search_selected_holo_light.9.png olarak adlandırılır ) ve olmadığı yer için ( textfield_search_default_holo_light.9.png olarak adlandırılır ) bir durum içindir.

Ne yazık ki, yalnızca odaklanmış durumu özelleştirmek isteseniz bile, her iki görüntünün yerel kopyalarını oluşturmanız gerekecektir . Bunun nedeni R.drawable'datextfield_search_default_holo_light mevcut olmamasıdır . Bu nedenle @android:drawable/textfield_search_default_holo_light, yerel çizilebilirliğe atıfta bulunmak yerine, aşağıda gösterilen seçicide kullanılabilen aracılığıyla kolayca erişilebilir değildir .

NOT: Temel olarak Holo Light temasını kullanıyordum , ancak aynısını Holo Dark ile de yapabilirsiniz . Görünüşe göre, Açık ve Koyu temalar arasında seçilen durum 9 yamalarında gerçek bir fark yok . Ancak, varsayılan durum için 9 yamada bir fark vardır (bkz. Açık ve Koyu ). Yani, muhtemelen 9-yamalar yerel kopyalarını yapmak gerek yoktur seçilen devlet hem, Karanlık ve Işık temalar (her iki işlemek istiyorum varsayarak ve onlara hem göz ile aynı hale Holo Theme ). Sadece bir yerel kopya oluşturun veher iki tema için çekilebilir seçici .

Şimdi, indirdiğiniz dokuz yamayı ihtiyacınıza göre düzenlemeniz gerekecek (yani mavi rengi kırmızıya çevirmeniz). Düzenlemenizden sonra doğru şekilde tanımlanıp tanımlanmadığını kontrol etmek için 9 yama çizme aracını kullanarak dosyaya göz atabilirsiniz .

Tek piksel kalem aracıyla (oldukça kolay) GIMP kullanarak dosyaları düzenledim, ancak muhtemelen kendi aracınızı kullanacaksınız. İşte odaklanmış durum için özelleştirilmiş 9 yamam :

NOT: Basit olması için, yalnızca mdpi yoğunluğu için resimler kullandım . Herhangi bir cihazda en iyi sonucu almak istiyorsanız, birden fazla ekran yoğunluğu için 9 yama oluşturmanız gerekir . İçin Görüntüler Holo SearchView bulunabilir mdpi , hdpi ve xhdpi çekilebilir.

Şimdi, görüntü durumuna göre uygun görüntünün görüntülenmesi için çekilebilir seçici oluşturmamız gerekecek. res/drawable/texfield_searchview_holo_light.xmlAşağıdaki içeriğe sahip dosya oluşturun :

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"
        android:drawable="@drawable/textfield_search_selected_holo_light" />
    <item android:drawable="@drawable/textfield_search_default_holo_light" />
</selector>

LinearLayoutMetin alanını içinde tutan görünüm için arka planı ayarlamak için yukarıda oluşturulmuş çekmeceyi kullanacağız SearchView- kimliği android:id/search_plate. Öyleyse, seçenekler menüsünü oluştururken bunu kodda hızlı bir şekilde nasıl yapacağınız aşağıda açıklanmıştır:

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }       

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);

        // Getting SearchView from XML layout by id defined there - my_search_view in this case
        SearchView searchView = (SearchView) menu.findItem(R.id.my_search_view).getActionView();
        // Getting id for 'search_plate' - the id is part of generate R file,
        // so we have to get id on runtime.
        int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
        // Getting the 'search_plate' LinearLayout.
        View searchPlate = searchView.findViewById(searchPlateId);
        // Setting background of 'search_plate' to earlier defined drawable.            
        searchPlate.setBackgroundResource(R.drawable.textfield_searchview_holo_light);          

        return super.onCreateOptionsMenu(menu);
    }

}

Nihai etki

İşte nihai sonucun ekran görüntüsü:

Buna nasıl ulaştım

Buna nasıl ulaştığımı ölçmeye değer olduğunu düşünüyorum, böylece bu yaklaşım diğer görünümleri özelleştirirken kullanılabilir.

Görünüm düzenine bakılıyor

SearchViewDüzenin nasıl göründüğünü kontrol ettim . In SearchView contructor biri açılırsa düzeni bir çizgi bulabilirsiniz:

inflater.inflate(R.layout.search_view, this, true);

Artık SearchViewlayout un isimli dosyada olduğunu biliyoruz res/layout/search_view.xml. Search_view.xml'ye bakarak , içinde bulunan (bizim arama görünümü metin alanına benzeyen ) bir iç LinearLayoutöğe (id ile search_plate) bulabiliriz android.widget.SearchView$SearchAutoComplete:

    <LinearLayout
        android:id="@+id/search_plate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:background="?android:attr/searchViewTextField">

Şimdi, arka plan mevcut temanın searchViewTextFieldniteliğine göre ayarlandığına göre .

Özniteliğin incelenmesi (kolayca ayarlanabilir mi?)

Özelliğin nasıl searchViewTextFieldayarlandığını kontrol etmek için res / values ​​/ themes.xml'yi araştırıyoruz . SearchViewVarsayılan olarak ilgili bir grup öznitelik vardır Theme:

<style name="Theme">
    <!-- (...other attributes present here...) -->

    <!-- SearchView attributes -->
    <item name="searchDropdownBackground">@android:drawable/spinner_dropdown_background</item>
    <item name="searchViewTextField">@drawable/textfield_searchview_holo_dark</item>
    <item name="searchViewTextFieldRight">@drawable/textfield_searchview_right_holo_dark</item>
    <item name="searchViewCloseIcon">@android:drawable/ic_clear</item>
    <item name="searchViewSearchIcon">@android:drawable/ic_search</item>
    <item name="searchViewGoIcon">@android:drawable/ic_go</item>
    <item name="searchViewVoiceIcon">@android:drawable/ic_voice_search</item>
    <item name="searchViewEditQuery">@android:drawable/ic_commit_search_api_holo_dark</item>
    <item name="searchViewEditQueryBackground">?attr/selectableItemBackground</item>

Varsayılan tema için değerin olduğunu görüyoruz @drawable/textfield_searchview_holo_dark. İçin Theme.Lightdeğer de bu dosyada yer almaktadır .

Şimdi, bu niteliğe R.styleable aracılığıyla erişilebilseydi harika olurdu , ama maalesef öyle değil. Karşılaştırma için, diğer bakınız tema içinde hem de özelliklerini themes.xml ve R.attr gibi textAppearance veya selectableItemBackground . (Ve ) ' searchViewTextFieldde mevcut olsaydı , XML'deki uygulamamızın tamamı için tema tanımlarken basitçe çekilebilir seçicimizi kullanabilirdik. Örneğin:R.attrR.stylable

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="AppTheme" parent="android:Theme.Light">
        <item name="android:searchViewTextField">@drawable/textfield_searchview_holo_light</item>
    </style>
</resources>

Neler değiştirilmeli?

Artık search_platekod aracılığıyla erişmemiz gerekeceğini biliyoruz . Ancak yine de nasıl görünmesi gerektiğini bilmiyoruz. Kısacası, varsayılan temalarda değerler olarak kullanılan çekilebilir öğeleri arıyoruz: textfield_searchview_holo_dark.xml ve textfield_searchview_holo_light.xml . İçeriğe baktığımızda, selectorgörüntü durumuna bağlı olarak diğer iki çekilebilir öğeye (daha sonra 9 yamalı olacak) referans veren çekilebilirin olduğunu görüyoruz . Android'in tüm sürümlerinden (neredeyse) toplu 9 yama çekmecelerini androiddrawables.com'da bulabilirsiniz.

Özelleştirme

Mavi çizgiyi 9 yamadan birinde tanıyoruz , bu yüzden onun yerel kopyasını oluşturuyoruz ve arzu edildiği gibi renkleri değiştiriyoruz.

Appcompat kitaplığı kullanıyorsanız, yukarıdaki çözümler çalışmayabilir. Appcompat kitaplığında çalışmasını sağlamak için kodu değiştirmeniz gerekebilir.

İşte appcompat kitaplığı için çalışma çözümü.

  @Override
  public boolean onCreateOptionsMenu(Menu menu)
  {

    getMenuInflater().inflate(R.menu.main_menu, menu); 

    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
    MenuItem searchMenuItem = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchMenuItem);
    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));

    SearchView.SearchAutoComplete searchAutoComplete = (SearchView.SearchAutoComplete)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    searchAutoComplete.setHintTextColor(Color.WHITE);
    searchAutoComplete.setTextColor(Color.WHITE);

    View searchplate = (View)searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
    searchplate.setBackgroundResource(R.drawable.texfield_searchview_holo_light);

    ImageView searchCloseIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
    searchCloseIcon.setImageResource(R.drawable.abc_ic_clear_normal);

    ImageView voiceIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_voice_btn);
    voiceIcon.setImageResource(R.drawable.abc_ic_voice_search);

    ImageView searchIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
    searchIcon.setImageResource(R.drawable.abc_ic_search);


    return super.onCreateOptionsMenu(menu);
}

Kişisel onCreateOptionsMenuyöntem olmalıdır:

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.option, menu);
        SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
        int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
        ViewGroup v = (ViewGroup) searchView.findViewById(linlayId);
        v.setBackgroundResource(R.drawable.searchviewredversion);
        return super.onCreateOptionsMenu(menu);
    }

arama öğenizin menu_searchkurs dışında olduğu yer

ve işte searchviewredversion(bu xhdpi sürümü): http://img836.imageshack.us/img836/5964/searchviewredversion.png

Yukarıdaki çözüm ActionBarSherlock 4.2 ile çalışmaz ve bu nedenle Android 2.x ile geriye dönük olarak uyumlu değildir. ActionBarSherlock 4.2'de SearchView arka planını ve ipucu metnini kuran çalışma kodu:

public static void styleSearchView(SearchView searchView, Context context) {
    View searchPlate = searchView.findViewById(R.id.abs__search_plate);
    searchPlate.setBackgroundResource(R.drawable.your_custom_drawable);
    AutoCompleteTextView searchText = (AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
    searchText.setHintTextColor(context.getResources().getColor(R.color.your_custom_color));
}

Bunu yapmaktan da yoruldum ve v7 kullanıyorum. Üzerinden kapmaya çalıştığımda uygulama çöktü searchPlate, getIdentifier()bu yüzden şu şekilde yaptım:

View searchPlate = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);

Güncelleme

AndroidX kullanıyorsanız, bunu şu şekilde yapabilirsiniz

    View searchPlate = svSearch. findViewById(androidx.appcompat.R.id.search_plate);
    if (searchPlate != null) {
        AutoCompleteTextView searchText = searchPlate.findViewById(androidx.appcompat.R.id.search_src_text);
        if (searchText != null){
            searchText.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources().getDimension(R.dimen.edittext_text_size));
            searchText.setMaxLines(1);
            searchText.setSingleLine(true);
            searchText.setTextColor(getResources().getColor(R.color.etTextColor));
            searchText.setHintTextColor(getResources().getColor(R.color.etHintColor));
            searchText.setBackground(null);
        }
    }

Ben de aynı problemle karşılaştım. Appcompat v7 kütüphanesi kullandım ve bunun için özel stil belirledim. Çekilebilir klasörde, aşağıdaki gibi görünen bottom_border.xml dosyasını koyun:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
  <shape >
      <solid android:color="@color/blue_color" />
  </shape>
</item>
<item android:bottom="0.8dp"
  android:left="0.8dp"
  android:right="0.8dp">
  <shape >
      <solid android:color="@color/background_color" />
  </shape>
</item>

<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="2.0dp">
  <shape >
      <solid android:color="@color/main_accent" />
  </shape>
 </item>
</layer-list>

Styles_myactionbartheme.xml değerler klasöründe:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="AppnewTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowBackground">@color/background</item>
    <item name="android:actionBarStyle">@style/ActionBar</item>
    <item name="android:actionBarWidgetTheme">@style/ActionBarWidget</item>
</style> 
<!-- Actionbar Theme -->
<style name="ActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@color/main_accent</item>
    <!-- <item name="android:icon">@drawable/abc_ic_ab_back_holo_light</item> -->
</style> 
<style name="ActionBarWidget" parent="Theme.AppCompat.Light">
    <!-- SearchView customization-->
     <!-- Changing the small search icon when the view is expanded -->
    <!-- <item name="searchViewSearchIcon">@drawable/ic_action_search</item> -->
     <!-- Changing the cross icon to erase typed text -->
  <!--   <item name="searchViewCloseIcon">@drawable/ic_action_remove</item> -->
     <!-- Styling the background of the text field, i.e. blue bracket -->
    <item name="searchViewTextField">@drawable/bottom_border</item>
     <!-- Styling the text view that displays the typed text query -->
    <item name="searchViewAutoCompleteTextView">@style/AutoCompleteTextView</item>        
</style>

  <style name="AutoCompleteTextView" parent="Widget.AppCompat.Light.AutoCompleteTextView">
    <item name="android:textColor">@color/text_color</item>
  <!--   <item name="android:textCursorDrawable">@null</item> -->
    <!-- <item name="android:textColorHighlight">@color/search_view_selected_text</item> -->
</style>
</resources>

Menüyü görüntülemek için custommenu.xml dosyasını tanımladım:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:com.example.actionbartheme="http://schemas.android.com/apk/res-auto" >  

<item android:id="@+id/search"
      android:title="@string/search_title"
      android:icon="@drawable/search_buttonn" 
     com.example.actionbartheme:showAsAction="ifRoom|collapseActionView"   
                 com.example.actionbartheme:actionViewClass="android.support.v7.widget.SearchView"/>

Aktiviteniz, Activity yerine ActionBarActivity'yi genişletmelidir.

@Override
public boolean onCreateOptionsMenu(Menu menu) 
{
    // Inflate the menu; this adds items to the action bar if it is present.
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.custommenu, menu);
}

Manifest dosyasında:

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppnewTheme" >

Daha fazla bilgi için buraya bakın:
Burada http://www.jayway.com/2014/06/02/android-theming-the-actionbar/

Öncelikle çekilebilir, yani çekilebilir dizin altında kullanılmak üzere search_widget_background.xml adında bir XML dosyası oluşturalım.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="@color/red" />

</shape>

Bu çizim, arama widget'ımızın arka planı olarak kullanılacaktır. Rengi kırmızı olarak ayarlıyorum çünkü istediğiniz buydu, ancak bunu @color etiketiyle tanımlanan herhangi bir renge ayarlayabilirsiniz. Şekil etiketi için tanımlanan nitelikleri kullanarak bunu daha da değiştirebilirsiniz (yuvarlatılmış köşeler yapın, oval bir arka plan yapın, vb.).

Sonraki adım, arama widget'ımızın arka planını buna ayarlamaktır. Bu, aşağıdaki şekilde gerçekleştirilebilir:

    public boolean onCreateOptionsMenu(Menu menu) {

        SearchView searchView = (SearchView)menu.findItem(R.id.my_search_view).getActionView();
        Drawable d = getResources().getDrawable(R.drawable.search_widget_background);
        searchView.setBackground(d);
...
    }

public boolean onCreateOptionsMenu(Menu menu) {
........

        // Set the search plate color
        int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
        View view = searchView.findViewById(linlayId);
        Drawable drawColor = getResources().getDrawable(R.drawable.searchcolor);
        view.setBackground( drawColor );
........
    }

ve bu aranabilircolor.xml dosyasıdır

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
      <shape >
          <solid android:color="#ffffff" />
      </shape>
  </item>

  <!-- main color -->
  <item android:bottom="1.5dp"
      android:left="1.5dp"
      android:right="1.5dp">
      <shape >
          <solid android:color="#2c4d8e" />
      </shape>
  </item>

  <!-- draw another block to cut-off the left and right bars -->
  <item android:bottom="18.0dp">
      <shape >
          <solid android:color="#2c4d8e" />
      </shape>
  </item>
</layer-list>

Bu yazının sonunda bunun xamarin formları için geçerli olduğunu anlattım. Ancak bunu anlayabileceğinizi düşünüyorum, çünkü android'in arama görünümünün kaynak koduna dayanıyor

Xamarin formlarında arama çubuğu iptal düğmesi görüntüsü nasıl değiştirilir

Searchview'i bu şekilde şişiriyorsanız "getMenuInflater (). Şişirmek (R.menu.search_menu, menu);". Daha sonra bu arama görünümünü aşağıdaki gibi style.xml aracılığıyla özelleştirebilirsiniz.

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
      <item name="searchViewStyle">@style/SearchView.ActionBar</item>
</style>

<style name="SearchView.ActionBar" parent="Widget.AppCompat.SearchView.ActionBar">
      <item name="queryBackground">@drawable/drw_search_view_bg</item>
      <item name="searchHintIcon">@null</item>
      <item name="submitBackground">@null</item>
      <item name="closeIcon">@drawable/vd_cancel</item>
      <item name="searchIcon">@drawable/vd_search</item>
</style>

Bunu çok araştırıyordum ve sonunda bu çözümü buldum ve benim için çalışıyor!
Bunu kullanabilirsin

Appcompat kullanıyorsanız şunu deneyin:

ImageView searchIconView = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
searchIconView.setImageResource(R.drawable.yourIcon);

Androidx kullanıyorsanız şunu deneyin:

ImageView searchIconView = (ImageView) searchView.findViewById(androidx.appcompat.R.id.search_button);
    searchIconView.setImageResource(R.drawable.yourIcon);

Varsayılan serchview simgesini değiştirecektir.

Umarım yardımcı olur!