Android UI进阶之旅6 Material Design之Toolbar与SearchView-CSDN博客

###Toolbar的基本使用

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

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    app:logo="@drawable/ic_launcher"
    app:subtitle="子标题"
	app:navigationIcon="@drawable/abc_ic_ab_back_mtrl_am_alpha"
    app:subtitleTextColor="#fff"
    app:title="我是标题"
    app:titleTextColor="#fff"></android.support.v7.widget.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中的菜单结合使用。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.ricky.materialdesign.toolbar.MainActivity"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always"
        android:title="查找"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never"
        android:title="设置"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="100"
        app:showAsAction="always"
        android:title="分享"
        android:icon="@android:drawable/ic_menu_share"/>
    <item
        android:id="@+id/action_edit"
        android:orderInCategory="100"
        app:showAsAction="ifRoom"
        android:title="编辑"
        android:icon="@android:drawable/ic_menu_edit"/>

</menu>
复制代码

这里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。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.nan.advancedui.toolbar.MyScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:paddingTop="?attr/actionBarSize">

		<!--这里是我们的内容布局-->

    </com.nan.advancedui.toolbar.MyScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:title="标题"
        >
    </android.support.v7.widget.Toolbar>

</RelativeLayout>
复制代码

还需要注意给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);
    }
}
复制代码

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

我的群欢迎大家进来探讨各种技术与非技术的话题，有兴趣的朋友们加我私人微信huannan88，我拉你进群交（♂）流（♀）。