安卓自定义搜索框圆角化

Question

我想创建一个带有SearchView的Activity，该SearchView不在ActionBar中（实际上，我正在使用NoActionBar主题）。现在我希望这个SearchView具有圆角（不是实际SearchView内部的EditText，而是SearchView本身），就像这样：Mockup。

我能够做到的只有这个：actual SearchView。

有人可以给我提示，告诉我需要改变什么吗？ 这是Activity的XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:background="@color/theBlue">

    <SearchView
        android:id="@+id/search_view"
        android:layout_width="1000dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="@drawable/bg_white_rounded"
        android:clickable="true"/>
</RelativeLayout>

drawable/bg_white_rounded.xml的代码:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff"/>
<corners android:radius="10dp"/>
<padding android:left="0dp"
    android:bottom="0dp"
    android:right="0dp"
    android:top="0dp"/>
</shape>

活动代码：

public class MainActivity extends AppCompatActivity {

SearchView searchView;

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

    // Get search view and modify it to our needs
    searchView = (SearchView) findViewById(R.id.search_view);
    searchView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            searchView.onActionViewExpanded();
        }
    });
    //int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
    //int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
    int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_badge", null, null);
    View searchPlate = searchView.findViewById(searchPlateId);
    //View searchPlate = searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    searchPlate.setBackgroundResource(R.drawable.bg_white_rounded);
}
}

注释掉的行是我已经尝试过但没有成功的方法。 谢谢！

- N4zroth

Answer 1

只需将padding = corner radius赋值，因为实际的SearchView背景会隐藏角落，将其设置回来，所以填充就可以解决问题。

drawable/bg_white_rounded.xml：

  <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff"/>
    <corners android:radius="8dp"/>
    <padding android:left="8dp"
        android:bottom="8dp"
        android:right="8dp"
        android:top="8dp"/>
    </shape>

- Rajan Kali

Answer 2

虽然 rajan ks 的回答是可行的，但它并不完全符合设计模型（填充自然会增加 SearchView 的大小，而不会增加包含的 EditText 的大小）。

我发现的解决方案是：

在 MainActivity.java 中，更改 search_edit_frame、search_plate 和 search_bar：

    int searchFrameId = searchView.getContext().getResources().getIdentifier("android:id/search_edit_frame", null, null);
    View searchFrame = searchView.findViewById(searchFrameId);
    searchFrame.setBackgroundResource(R.drawable.bg_white_rounded);

    int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
    View searchPlate = findViewById(searchPlateId);
    searchPlate.setBackgroundResource(R.drawable.bg_white_rounded);

    int searchBarId = searchView.getContext().getResources().getIdentifier("android:id/search_bar", null, null);
    View searchBar = findViewById(searchBarId);
    searchBar.setBackgroundResource(R.drawable.bg_white_rounded);

这导致SearchView的外观与模型完全相同。

- N4zroth

Answer 3

我能够使用仅使用androidx SearchView的xml实现所需的结果。

<androidx.appcompat.widget.SearchView
    ...
    app:queryBackground="@drawable/bg_white_rounded"
    app:submitBackground="@drawable/bg_white_rounded"
    android:background="@drawable/bg_white_rounded"/>

- A. Kazarovets

Answer 4

drawable/bg_white_rounded.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff"/>
<corners android:radius="20dp"/>
<padding android:left="15dp"
    android:bottom="15dp"
    android:right="15dp"
    android:top="15dp"/>
</shape>

并且在 .xml 文件中

<SearchView
    ...
    android:submitBackground="@drawable/bg_white_rounded"
    android:background="@drawable/bg_white_rounded"

注意: 在我的情况下，解决方案结合了以上答案。感谢@rajan.kali和@A.Kazarovets。

- necip