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

最新推荐文章于 2024-05-01 06:50:11 发布

老胡杨

最新推荐文章于 2024-05-01 06:50:11 发布

阅读量1.4k

点赞数

分类专栏： MaterialDesign 文章标签： listview 导航 toolbar

本文链接：https://blog.csdn.net/wangwo1991/article/details/76358658

版权

MaterialDesign 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

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

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

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

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

2、在xml布局文件中使用

<?xml version="1.0" encoding="utf-8"?>
<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.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菜单布局:

<?xml version="1.0" encoding="utf-8"?>
<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滑动变色的一个效果：
这里写图片描述

1、xml布局

<?xml version="1.0" encoding="utf-8"?>
<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

老胡杨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Toolbar基本使用及Toolbar+ListView实现滑动变色

Toolbar是android5.0推出来的一个MaterialDesign风格的控件，用来替代之前的Actionbar,并规范导航栏，相对于Actionbar的话，Toolbar使用起来还是蛮便捷灵活的，可以进行导航栏标题，副标题，logo，menu等一系列操作和设置。Toolbar extends ViewGroup 在使用的时候可以看作是一个布局容器使用，来自android.support.v
复制链接

扫一扫

专栏目录