Android|Android UI进阶之旅6--Material Design之Toolbar与SearchView AndroidUI进阶之旅6--MaterialDesig

Toolbar的基本使用
当作简单的控件使用即可。

Toolbar是一个ViewGroup，里面可以放子控件。因此，如果你想标题居中的话，那么就放入一个TextView吧。
这里的?attr/colorPrimary是使用了系统的颜色值，当然我们也可以在主题中重写。
注意：Toolbar需要使用Appcompat的一套东西。返回监听：

toolbar.setNavigationOnClickListener(new OnClickListener() {@Override public void onClick(View v) { finish(); } });

自定义Toolbar Toolbar好用但是样式比较死板，一般来说我们会自定义一个Toolbar或者完全自己写一个，可以参考我的其他文章：Toolbar的使用
SearchView
SearchView也是V7包的控件，一般也是跟Toolbar中的菜单结合使用。

这里app:actionViewClass="android.support.v7.widget.SearchView"是指定了菜单的View是一个SearchView。因此我们就可以在代码中使用了：

@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); //SearchView在Menu里面，我们通过Item的getActionView就可以找到 MenuItem item = menu.findItem(R.id.action_search); SearchView searchView = (SearchView) MenuItemCompat.getActionView(item); //设置一出来就直接呈现搜索框---SearchView searchView.setIconified(false); //进来就呈现搜索框并且不能被隐藏 //searchView.setIconifiedByDefault(false); //有时候我们需要实现自定义扩展效果 //通过猜想，searchView用到了一个布局，去appcompat里面找到abc_search_view.xml,该里面的控件的属性 ImageView icon = (ImageView) searchView.findViewById(R.id.search_go_btn); icon.setImageResource(R.drawable.abc_ic_voice_search_api_mtrl_alpha); icon.setVisibility(View.VISIBLE); searchView.setMaxWidth(200); //输入提示 SearchView.SearchAutoComplete et = (SearchView.SearchAutoComplete) searchView.findViewById(R.id.search_src_text); et.setHint("输入商品名或首字母"); et.setHintTextColor(Color.WHITE); //设置提交按钮是否可用(可见) searchView.setSubmitButtonEnabled(true); //提交按钮监听 icon.setOnClickListener(new OnClickListener() {@Override public void onClick(View v) { Toast.makeText(MainActivity.this, "提交", 1).show(); } }); //像AutoCompleteTextView一样使用提示 //searchView.setSuggestionsAdapter(adapter); //监听焦点改变 searchView.setOnQueryTextFocusChangeListener(new OnFocusChangeListener() {@Override public void onFocusChange(View v, boolean hasFocus) { // TODO Auto-generated method stub} }); //searchView的关闭监听 searchView.setOnCloseListener(new OnCloseListener() {@Override public boolean onClose() { // TODO Auto-generated method stub return false; } }); searchView.setOnSearchClickListener(new OnClickListener() {@Override public void onClick(View v) { Toast.makeText(MainActivity.this, "提交", 0).show(); } }); //监听文本变化，调用查询 searchView.setOnQueryTextListener(new OnQueryTextListener() {@Override public boolean onQueryTextSubmit(String text) { //提交文本 Toast.makeText(MainActivity.this, "提交文本:"+text, 0).show(); return false; }@Override public boolean onQueryTextChange(String text) { // 文本改变的时候回调 System.out.println("文本变化~~~~~"+text); return false; } }); return true; }@Override public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); }

在这里，笔者还是觉得自己封装一个，一来适合自己的项目，二来扩展性比较强，因此就不详细介绍SearchView了。
实现Toolbar随着界面滑动透明度变化效果
首先我们需要一个布局，通过相对布局把Toolbar压在ScrollView（或者ListView、RecyclerView）的上面。Toolbar的高度与ScrollView上方内边距都使用系统的actionBarSize。

还需要注意给ScrollView设置多两个属性，不然的话滑出去以后上内边距会一直保留：

android:clipToPadding="false" 该控件的绘制范围是否不在Padding里面。false：绘制的时候范围会考虑padding即会往里面缩进。
android:clipChildren="false" 子控件是否能不超出padding的区域（比如ScrollView上滑动的时候，child可以滑出该区域）

然后监听滑动事件，这里如果是ScrollView的话，需要自定义重写方法才能监听：

public class MyScrollView extends ScrollView {private OnAlphaListener listener; public void setOnAlphaListener(OnAlphaListener listener) { this.listener = listener; }public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); }@Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); if (listener != null) { int scrollY = getScrollY(); int screen_height = getContext().getResources().getDisplayMetrics().heightPixels; if (scrollY <= screen_height / 3f) {//0~1f,而透明度应该是1~0f listener.onAlpha(1 - scrollY / (screen_height / 3f)); //alpha=滑出去的高度/(screen_height/3f) } } } }

透明度的计算需要根据实际情况来自定义一个接口回调，Activity（Fragment）实：

public interface OnAlphaListener {void onAlpha(float alpha); }

界面的逻辑如下：

public class ToolbarActivity extends AppCompatActivity implements OnAlphaListener {private Toolbar mToolbar; private MyScrollView mScrollview; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_toolbar); mToolbar = (Toolbar) findViewById(R.id.toolbar); mScrollview = (MyScrollView) findViewById(R.id.scrollView); mScrollview.setOnAlphaListener(this); }@Override public void onAlpha(float alpha) { mToolbar.setAlpha(alpha); } }

如果觉得我的文字对你有所帮助的话，欢迎关注我的公众号：