Toolbar基本使用及Toolbar+ListView实现滑动变色

Toolbar是android5.0推出来的一个MaterialDesign风格的控件,用来替代之前的Actionbar,并规范导航栏,相对于Actionbar的话,Toolbar使用起来还是蛮便捷灵活的,可以进行导航栏标题,副标题,logo,menu等一系列操作和设置。

Toolbar extends ViewGroup 在使用的时候可以看作是一个布局容器使用,来自android.support.v7.widget包。

1、设置主题样式
将主题样式设置为:

同时activity最好继承自AppCompatActivity,这样兼容性更好些;

2、在xml布局文件中使用


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="主标题"
        app:titleTextColor="@color/colorAccent"
        app:subtitle="副标题"
        app:subtitleTextColor="@color/colorAccent"
        android:background="@color/colorPrimaryDark"
        app:navigationIcon="@mipmap/back_icon">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="中间标题"
            android:textColor="@color/colorAccent"
            android:gravity="center"
            android:textSize="15sp"/>
    android.support.v7.widget.Toolbar>
LinearLayout>

注意点:在Toolbar中添加其他控件的时候,控件的宽高不要设置为match_parent或fill_parent,会将Toolbar全部遮住导致没有效果

Toolbar可以设置的属性还是蛮多的,
Toolbar基本使用及Toolbar+ListView实现滑动变色_第1张图片
Toolbar基本使用及Toolbar+ListView实现滑动变色_第2张图片

可以根据自己的需要进行设置;这些属性也可以通过代码进行设置,效果是一样的;

//设置主标题
toolbar.setTitle("主标题");
//设置主标题字体颜色
toolbar.setTitleTextColor(Color.RED);
//设置副标题
toolbar.setSubtitle("副标题");
//设置副标题字体颜色
toolbar.setSubtitleTextColor(Color.RED);
//设置logo图片
toolbar.setLogo(R.mipmap.ic_launcher);
//设置Navigation图片
toolbar.setNavigationIcon(R.mipmap.ic_launcher);

3、设置Toolbar

toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//设置Navigation点击监听
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(ToolBarActivity.this, "back", Toast.LENGTH_LONG).show();
            }
        });

4、添加menu菜单

   @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

menu菜单布局:


<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        android:title="搜索"
        android:icon="@mipmap/search_icon"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="100"
        android:title="分享"
        android:icon="@mipmap/share_icon"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_add"
        android:orderInCategory="100"
        android:title="新增"
        android:icon="@mipmap/add_icon"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_setting"
        android:orderInCategory="100"
        android:title="设置"
        android:icon="@mipmap/setting_icon"
        app:showAsAction="ifRoom"/>
menu>

showAsAction属性共有五个值:ifRoom、never、always、withText、collapseActionView

ifRoom: 
会显示在Item中,但是如果已经有4个或者4个以上的Item时会隐藏在溢出列表中。当然个数并不仅仅局限于4个,依据屏幕的宽窄而定 
never:  
永远不会显示。只会在溢出列表中显示,而且只显示标题,所以在定义item的时候,最好把标题都带上。  
always:
无论是否溢出,总会显示 
withText:  
示意Action bar要显示文本标题。Action bar会尽可能的显示这个标题,但是,如果图标有效并且受到Action bar空间的限制,文本标题有可能显示不全。
collapseActionView:
声明了这个操作视窗应该被折叠到一个按钮中,当用户选择这个按钮时,这个操作视窗展开。否则,这个操作视窗在默认的情况下是可见的,并且即便在用于不适用的时候,也要占据操作栏的有效空间。

5、设置menu选择或点击item监听

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int itemId = item.getItemId();
        switch (itemId) {
            case R.id.action_search:
                Toast.makeText(ToolBarActivity.this, "搜索", Toast.LENGTH_LONG).show();
                break;
            case R.id.action_share:
                Toast.makeText(ToolBarActivity.this, "分享", Toast.LENGTH_LONG).show();
                break;
            case R.id.action_add:
                Toast.makeText(ToolBarActivity.this, "新增", Toast.LENGTH_LONG).show();
                break;
            case R.id.action_setting:
                Toast.makeText(ToolBarActivity.this, "设置", Toast.LENGTH_LONG).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

menu菜单的添加和选择监听还有通过下面的方式来实现:

添加menu菜单:

//添加menu菜单
toolbar.inflateMenu(R.menu.main);

不过inflateMenu的源码还是通过getMenuInflater().inflate(R.menu.main, menu);来实现的;

inflateMenu源码:

public void inflateMenu(@MenuRes int resId) {
        getMenuInflater().inflate(resId, getMenu());
    }

menu菜单选择监听

//menu菜单item点击监听
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                //根据选择的itemId来判断选择的是哪个item
                int itemId = item.getItemId();
                return false;
            }
        });

下面就是一个大致的效果:
Toolbar基本使用及Toolbar+ListView实现滑动变色_第3张图片

Toolbar列表悬停及滑动变色
先看下toolbar+listview滑动变色的一个效果:

1、xml布局


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.toolbartest.MyListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:dividerHeight="0.5dp"
        android:divider="@color/colorAccent"
        android:clipToPadding="false"
        android:clipChildren="false">
    com.toolbartest.MyListView>
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark">
    android.support.v7.widget.Toolbar>
RelativeLayout>

这里根据布局用的是RelativeLayout,用FrameLayout也可以的,这里需要注意的是,因为要给ListView设置一个paddingTop,所以要个ListView设置这两个属性;

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

2、自定义ListView并重写onScrollChanged方法进行滑动监听

@Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if(listener!=null){
            //获得y轴滑动距离
            float scaleY = getListViewY();
            Log.e("TAG","scaleY-->"+scaleY);
            //小于等于屏幕的三分之一
            if(scaleY<=screenHeight/3){
                //计算透明度
                float alaph=1-scaleY/(screenHeight/3f);
                if(alaph<0.3){
                    alaph=0.3f;
                }
                //将透明度回调回去
                listener.onTranlucent(alaph);
            }
        }
    }

这里需要注意,设置了listview各种滑动监听,并打印log发现listview并没有提供获取滑动中Y轴的值,就只能自己计算了;

2.1、计算ListView滑动中Y轴的值

private float getListViewY(){
        View view = this.getChildAt(0);
        if(view==null){
            return 0;
        }
        int firstVisiblePosition = this.getFirstVisiblePosition();
        int top = view.getTop();
        return -top + firstVisiblePosition * view.getHeight() ;
    }

3、获取控件并设置透明度

toolbar = (Toolbar) findViewById(R.id.toolbar);
//设置Toolbar
setSupportActionBar(toolbar);

//获取toolbar的高度
toolbar.post(new Runnable() {
     @Override
     public void run() {
        int measuredHeight = toolbar.getMeasuredHeight();
        //设置ListView 的paddingTop为toolbar的高度
        listview.setPadding(0,measuredHeight,0,0);
            }
        });
//回调监听透明度
listview.setTranslucentListener(new TranslucentListener() {
    @Override
     public void onTranlucent(float alpha) {
           //设置toolbar透明度
           toolbar.setAlpha(alpha);
            }
        });

这样就可以了,如果导航栏用的不是toolbar的话,将toolbar换成RelativeLayout或者LinearLayout并设置透明度就可以了。

源码地址:
http://download.csdn.net/detail/wangwo1991/9915012

你可能感兴趣的:(MaterialDesign)