【Android】安卓开发实战之通过visibility属性实现搜索框弹出效果

有时候我们可能会在APP顶部设置一个搜索图标，点击该图标，在顶部弹出一个搜索框，并将原标题栏覆盖，这个效果，我们可以通过使用visibility属性可简单实现。

先看一下效果图：

实现方法如下：

1、在大的布局里，再新建两个小的线性布局，第一个布局装着EditText搜索框、“取消”TextView，线性布局的visibility属性设置为gone，即不可见。

第二个线性布局里，装着“分类”ImageView、“联系人”TextView、搜索图标ImageView，线性布局2的visibility属性设置为visible，即可见。

这样就实现了，初始状态下，线性布局1不可见，线性布局2可见的效果。

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/rectangle_width"
        android:background="@color/theRed"
        android:gravity="center"
        android:visibility="gone"
        android:id="@+id/ll_of_search"
        >
        <EditText
            android:id="@+id/edit_of_search"
            android:layout_width="match_parent"
            android:layout_height="@dimen/rectangle_search_width"
            android:hint="@string/input_search_content"
            android:background="@drawable/round_white_box"
            android:layout_weight="1"
            android:layout_marginLeft="@dimen/search_margin_dimen"
            android:layout_marginRight="@dimen/search_margin_dimen"
            android:paddingLeft="@dimen/normal_padding_margin"
            android:textSize="16sp"
            android:imeOptions="actionDone"
            android:drawableLeft="@drawable/redsearch"
            android:singleLine="true"
            />
        <TextView
            android:id="@+id/textView_search_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/cancel"
            android:layout_marginLeft="@dimen/search_margin_dimen"
            android:layout_marginRight="@dimen/normal_padding_margin"
            android:textSize="18sp"
            android:textColor="@color/white"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/rectangle_width"
        android:background="@color/theRed"
        android:visibility="visible"
        android:id="@+id/ll_of_LinkMan"
        >
        <ImageView
            android:layout_width="@dimen/titleImage"
            android:layout_height="wrap_content"
            android:id="@+id/m_sortImageId"
            android:src="@drawable/sort"
            android:layout_marginLeft="@dimen/titleRetract"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/linkman"
            android:gravity="center"
            android:textColor="@color/white"
            android:textSize="@dimen/titleTextSize"
            android:layout_weight="1"
            />
        <ImageView
            android:layout_width="@dimen/titleImage"
            android:layout_height="wrap_content"
            android:src="@drawable/search"
            android:id="@+id/m_searchImageId"
            android:layout_marginRight="@dimen/titleRetract"
            />
    </LinearLayout>

2、在Java代码中监听搜素图标和“取消”文本的状态，通过setVisibility方法切换两个线性布局的可见状态即可。

@Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.m_searchImageId://点击“搜索”图标触发的事件
                ll_Linkman.setVisibility(View.GONE);
                ll_searchman.setVisibility(View.VISIBLE);
                //---------------------------设置引入图片的尺寸---------------------------------------------
                Drawable searchPic = getResources().getDrawable(R.drawable.redsearch);
                searchPic.setBounds(0, 0, 40, 40);
                searchEdit.setCompoundDrawables(searchPic, null, null, null);
                //------------------------------------------------------------------------------------------
                break;
            case R.id.m_sortImageId://点击“组别”图标触发的事件
                dialogOfGroup.show();//显式组别列表框
                break;
            case R.id.textView_search_cancel://点击“取消”字样触发的事件
                ll_Linkman.setVisibility(View.VISIBLE);
                ll_searchman.setVisibility(View.GONE);
                searchEdit.setText("");//清空输入框的内容
                break;
            default:
                break;
        }
    }