【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;        }    }