ToolBar使用心得(如何改变item的位置)

薛定谔的喵 / 文 发表于2017-03-12 22:09 次阅读 menu,toolbar,android

本萌新第一次使用toolbar还是颇多问题。查阅的网上的一些资料,发现很多教程都是用menu来创建toolbar上的item的,然而使用menu的时候,item默认却在toolbar的最右边真是莫名其妙。怎么就不能自己定义位置呢,像网易云,toolbar里的图标都是在中间的,于是萌新又找啊找,后面发现有2种方法可以解决。

第一种:依旧使用menu,当时在toolbar布局中,使用ActionMenuView。第二种:直接在actionbar里编写标签。

ActionMenuView是什么东西,是我在想能不能有类似menu一样的xml标签,如果有,就可以用gravity控制他在父视图的位置了嘛,没想到敲了menu,伟大的android studio就提示出了这个标签。后来百度了一下;发现了一篇文章。

链接:http://blog.csdn.net/u011277123/article/details/53330850

文章大概是说ActionMenuView可以讲menu打包变成view视图。后来我再看了一下官方文档

ActionMenuView is a presentation of a series of menu options as a View. It provides several top level options as action buttons while spilling remaining options over as items in an overflow menu. This allows applications to present packs of actions inline with specific or repeating content.

好吧,萌新不太懂英语,求翻译。。

按照文章的做法,我也试了一下。

步骤1:定义menu文件。

类似这样:在res新建menu文件夹并创建menu的xml

PS:图片可以右键你相应的module 创建 Image Asset,这也是我今天才发现的android stuido 的伟大之处。

<?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/name"
        android:icon="@drawable/ic_bar_person"
        app:showAsAction="ifRoom"
        android:title="person" />
    <item android:id="@+id/music"
        android:icon="@drawable/ic_bar_music"
        android:title="music"
        app:showAsAction="ifRoom"/>
    <item android:id="@+id/search"
        android:icon="@drawable/ic_bar_search"
        android:title="search"
        app:showAsAction="ifRoom"/>
</menu>

步骤二:定义好你的toolbar和ActionMenuView

类似这样:

PS:app属性为自定义的空间,toolbar一些属性要用自定义空间设置(title,subtitle,navigationicon等)当然也可以在代码设置。在ActionMenuView里的layout_gravity,我定义了center,让在menu里的item居中

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <android.support.v7.widget.Toolbar
        android:id="@+id/mytoolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:navigationIcon="@drawable/ic_bar_menu"
        android:background="?attr/colorPrimary">
        <android.support.v7.widget.ActionMenuView
            android:id="@+id/actionMV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity = "center">
        </android.support.v7.widget.ActionMenuView>
    </android.support.v7.widget.Toolbar>
</FrameLayout>

步骤三:初始化ActionMenuView,并且将menu载入

public class mToolbarActivity extends AppCompatActivity {
    private Toolbar mtoolbar;
    private ActionMenuView mAcitionMenuView;

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu , mAcitionMenuView.getMenu()); //将menu关联
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.toolbar_layout);
        mtoolbar = (Toolbar) findViewById(R.id.mytoolbar);
        setSupportActionBar(mtoolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        mAcitionMenuView = (ActionMenuView) findViewById(R.id.actionMV);
    }
}

运行结果如图:

blob.png

ps:其实我只是将我查到的那篇文章详细的操作一遍而已。

缺点:个人感觉这个ActionMenuView只能将一组的item位置自定义,如果这个时候我想在最右边加多个图标怎么办?在开多个menu?明显很麻烦,所以这里我发现了第二种方法。

方法二:在toolbar里编写视图标签。

原理:在官网可以明显看到toolbar是继承ViewGroup,当然可以包含自视图啦。

blob.png

于是乎:就不用那么麻烦了,直接添加图标,即可,并且为其设上layout_gravity属性

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <android.support.v7.widget.Toolbar
        android:id="@+id/mytoolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:navigationIcon="@drawable/ic_bar_menu"
        android:background="?attr/colorPrimary">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity = "center">
            <ImageView
                android:id="@+id/music"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_bar_music" />
            <ImageView
                android:id="@+id/person"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_bar_person"
                android:layout_marginLeft="30dp"/>
        </LinearLayout>
        <ImageView
            android:id="@+id/search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_bar_search"
            android:layout_gravity = "right"/>
    </android.support.v7.widget.Toolbar>
</FrameLayout>

结果:

blob.png

ps:在设置toolbar的时候即便不设置title,或者将title设为"",title也会自动显示,挡住我们的图标,因此我们需要在代码设置隐藏标题:

getSupportActionBar().setDisplayShowTitleEnabled(false);


以上:今天学习的笔记。

收藏 赞 (7) 踩 (1)