Question

我正在尝试在标签活动上实现searchview，就像我们在WhatsApp中一样。一旦点击搜索栏，文字颜色就不会改变。当我点击搜索栏时，工具栏应该像WhatsApp中一样出现。怎么做？

我的xml如下

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.bodaty.samyata.samyata.orders.Check_Your_Orders">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:clickable="true"
            app:collapseIcon="@drawable/ic_action_searchback"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>



        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            app:tabTextColor="#74889F"
            app:tabSelectedTextColor="#000000"
            app:tabIndicatorColor="#ff00ff"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="50dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <!--<android.support.design.widget.FloatingActionButton-->
        <!--android:id="@+id/fab"-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:layout_gravity="end|bottom"-->
        <!--android:layout_margin="@dimen/fab_margin"-->
        <!--app:srcCompat="@android:drawable/ic_dialog_email" />-->

</android.support.design.widget.CoordinatorLayout>

提前致谢

Answer 1

1）创建search_menu.xml文件

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_launcher_background"
        android:title="Поиск"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always"/>
</menu>

2）在活动覆盖方法onCreateOptionsMenu中

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.search_menu, menu);

        final SearchView searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.action_search));
        searchView.setOnQueryTextListener(this);
        return true;
    }

3）在您的活动中实现接口SearchView.OnQueryTextListener

public class MainActivity extends AppCompatActivity implements SearchView.OnQueryTextListener {
     @Override
        public boolean onQueryTextSubmit(String query) {
            return false;
        }

        @Override
        public boolean onQueryTextChange(String newText) {
            return false;
        }
}

Answer 2

要使用Circular Reveal实现WhatsApp Material SearchView，您可以通过两种方式实现：

使用库

LibSearchToolbar

MaterialSearchView
在代码中完成实施：

首先创建一个具有SearchView设计的xml。

<强> search.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar android:id="@+id/searchtoolbar"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:collapseIcon="@drawable/ic_arrow_back"
    app:titleTextColor="@color/colorPrimary"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorTextPrimary"/>

接下来，另一个用于工具栏设计的xml。

<强> toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar android:id="@+id/toolbar"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:titleTextColor="@color/colorTextPrimary"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"/>

使用以下方法将其包含在您的活动中：

<include layout="@layout/toolbar"/>
    <include layout="@layout/search"
        android:visibility="gone"/>

Java代码：

public class SearchViewActivity extends AppCompatActivity {

Toolbar toolbar, searchtollbar;
Menu search_menu;
MenuItem item_search;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    setSearchtollbar();

}

@Override
public boolean onCreateOptionsMenu(final Menu menu) {
    getMenuInflater().inflate(R.menu.menu_home, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle item selection
    switch (item.getItemId()) {
        case R.id.action_status:
            Toast.makeText(this, "Something", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.action_search:
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
                circleReveal(R.id.searchtoolbar,1,true,true);
            else
                searchtollbar.setVisibility(View.VISIBLE);

            item_search.expandActionView();
            return true;
        case R.id.action_settings:
            Toast.makeText(this, "Home Settings Click", Toast.LENGTH_SHORT).show();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

public void setSearchtollbar()
{
    searchtollbar = (Toolbar) findViewById(R.id.searchtoolbar);
    if (searchtollbar != null) {
        searchtollbar.inflateMenu(R.menu.menu_search);
        search_menu=searchtollbar.getMenu();

        searchtollbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
                    circleReveal(R.id.searchtoolbar,1,true,false);
                else
                    searchtollbar.setVisibility(View.GONE);
            }
        });

        item_search = search_menu.findItem(R.id.action_filter_search);

        MenuItemCompat.setOnActionExpandListener(item_search, new MenuItemCompat.OnActionExpandListener() {
            @Override
            public boolean onMenuItemActionCollapse(MenuItem item) {
                // Do something when collapsed
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    circleReveal(R.id.searchtoolbar,1,true,false);
                }
                else
                    searchtollbar.setVisibility(View.GONE);
                return true;
            }

            @Override
            public boolean onMenuItemActionExpand(MenuItem item) {
                // Do something when expanded
                return true;
            }
        });

        initSearchView();


    } else
        Log.d("toolbar", "setSearchtollbar: NULL");
}

public void initSearchView()
{
    final SearchView searchView =
            (SearchView) search_menu.findItem(R.id.action_filter_search).getActionView();

    // Enable/Disable Submit button in the keyboard

    searchView.setSubmitButtonEnabled(false);

    // Change search close button image

    ImageView closeButton = (ImageView) searchView.findViewById(R.id.search_close_btn);
    closeButton.setImageResource(R.drawable.ic_close);


    // set hint and the text colors

    EditText txtSearch = ((EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text));
    txtSearch.setHint("Search..");
    txtSearch.setHintTextColor(Color.DKGRAY);
    txtSearch.setTextColor(getResources().getColor(R.color.colorPrimary));


    // set the cursor

    AutoCompleteTextView searchTextView = (AutoCompleteTextView) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    try {
        Field mCursorDrawableRes = TextView.class.getDeclaredField("mCursorDrawableRes");
        mCursorDrawableRes.setAccessible(true);
        mCursorDrawableRes.set(searchTextView, R.drawable.search_cursor);
    } catch (Exception e) {
        e.printStackTrace();
    }    
}


 //  This sets the Circular Reveal Animation in the Search Bar

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void circleReveal(int viewID, int posFromRight, boolean containsOverflow, final boolean isShow)
{
    final View myView = findViewById(viewID);

    int width=myView.getWidth();

    if(posFromRight>0)
        width-=(posFromRight*getResources().getDimensionPixelSize(R.dimen.abc_action_button_min_width_material))-(getResources().getDimensionPixelSize(R.dimen.abc_action_button_min_width_material)/ 2);
    if(containsOverflow)
        width-=getResources().getDimensionPixelSize(R.dimen.abc_action_button_min_width_overflow_material);

    int cx=width;
    int cy=myView.getHeight()/2;

    Animator anim;
    if(isShow)
        anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0,(float)width);
    else
        anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, (float)width, 0);

    anim.setDuration((long)220);

    // make the view invisible when the animation is done
    anim.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            if(!isShow)
            {
                super.onAnimationEnd(animation);
                myView.setVisibility(View.INVISIBLE);
            }
        }
    });

    // make the view visible and start the animation
    if(isShow)
        myView.setVisibility(View.VISIBLE);

    // start the animation
    anim.start();
}
}

如何在标签活动中实施搜索视图

2 个答案: