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

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设置多两个属性,不然的话滑出去以后上内边距会一直保留:

  1. android:clipToPadding="false" 该控件的绘制范围是否不在Padding里面。false:绘制的时候范围会考虑padding即会往里面缩进。
  2. 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);
    }
}

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

公众号:Android开发进阶

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

你可能感兴趣的:(Android UI进阶之旅6--Material Design之Toolbar与SearchView)