精华内容
下载资源
问答
  • ToolBartitle居中以及一些注意事项

    万次阅读 2017-06-06 09:48:04
    ToolBartitle居中以及一些注意事项 标签: androidToolBartitle居中注意事项 2015-12-03 12:39 18414人阅读 评论(5) 收藏 举报  分类: 【Android常用知识点】(61)  版权声明:...
     

    ToolBar的title居中以及一些注意事项

    标签: androidToolBartitle居中注意事项
      18414人阅读  评论(5)  收藏  举报
      分类:

    目录(?)[+]

    一、居中方法

    Android自带的toolbar有设置title的功能,但是设置的title都是居左的,但是很多需求都是要title居中,主要的方法就是:不使用setTitle,而是在toolBar的xml定义中插入一个TextView,然后设置其layout_gravity为center,它就在正中间了。。

    1、定义toolbar的xml文件

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/primary">
    
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:singleLine="true"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </android.support.v7.widget.Toolbar>
    
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    具体代码中使用toolbar

    public Toolbar initToolbar(int id, int titleId, int titleString) {
            Toolbar toolbar = (Toolbar) findViewById(id);
    //        toolbar.setTitle("");
            TextView textView = (TextView) findViewById(titleId);
            textView.setText(titleString);
            setSupportActionBar(toolbar);
            android.support.v7.app.ActionBar actionBar = getSupportActionBar();
            if (actionBar != null){
                actionBar.setDisplayHomeAsUpEnabled(true);
                actionBar.setDisplayShowTitleEnabled(false);
            }
            return toolbar;
        }
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    3、修改toolbar的返回按钮图标

    在toolbar里面添加如下几句话,

        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:navigationIcon="@drawable/navigationIcon"
        android:navigationIcon="@drawable/navigationIcon"
       
    • 1
    • 2
    • 3
    • 1
    • 2
    • 3

    全部xml

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:navigationIcon="@drawable/navigationIcon"
        android:navigationIcon="@drawable/navigationIcon"
        android:background="@color/primary">
    
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:singleLine="true"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </android.support.v7.widget.Toolbar>
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    效果 
    这里写图片描述 
    4、修改一些属性

    <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/primary</item>
            <item name="colorPrimaryDark">@color/primary_dark</item>
            <item name="android:textColorPrimary">@color/white</item>
            <item name="colorAccent">@color/primary</item>
            <!-- Toolbar Theme / Apply white arrow -->
            <item name="colorControlNormal">@android:color/white</item>
            <!--Navigation icon颜色设置-->
            <item name="drawerArrowStyle">@style/AppTheme.MyDrawerArrowStyle</item>
        </style>
    
        <!--加入一個新的 navigation drarwer 的風格-->
        <style name="AppTheme.MyDrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
            <!--將 spinBars 屬性設定為 false-->
            <item name="spinBars">false</item>
            <!--設定 drawer arrow 的顏色-->
            <item name="color">@android:color/white</item>
        </style>
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    效果如下: 
    这里写图片描述

    二、注意事项

    这些方法很简单,网上的处理一大推,这边主要讲解的是一些注意事项。 
    1、定义toolbar的时候,尽量使用

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
       
    • 1
    • 2
    • 3
    • 1
    • 2
    • 3

    而不是

        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
       
    • 1
    • 2
    • 1
    • 2

    因为当toolbar里面的textView的字体太大的时候,第一种方法能够包裹住,而第二种方法字体就会显示不全。如下图所示

    这是使用第一种方法的: 
    这里写图片描述 
    这是使用第二种方法的: 
    这里写图片描述

    2、textview尽量使用android:singleLine="true"这个不解释了。

    3、让原始的toolbar的title不显示,可以使用

    actionBar.setDisplayShowTitleEnabled(false);
       
    • 1
    • 1

    或者

    toolbar.setTitle("");
       
    • 1
    • 1

    4、TextView尽量直接包在ToolBar下面,布局使用android:layout_gravity="center"

    如果TextView还在另外一个布局里面,例如:

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/primary">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_gravity="center"
                android:singleLine="true"
                android:textColor="@color/white"
                android:textSize="20sp" />
        </RelativeLayout>
    
    </android.support.v7.widget.Toolbar>
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    则title会减去toolbar那个返回按钮的宽度再让title居中,效果会是这样的: 
    这里写图片描述 
    就是不居中了。

    展开全文
  • 引言原生的Toolbartitle是居右显示的,而大多数情况下UI设计的图title是居中。另外默认的返回按钮间隙是16dp,而设计图上面是按照 iOS 来设计,所以返回按钮是8dp,本篇就此进行适配。正文NavigationIcon间隙先看...

    引言

    原生的Toolbar的title是居右显示的,而大多数情况下UI设计的图title是居中。另外默认的返回按钮间隙是16dp,而设计图上面是按照 iOS 来设计,所以返回按钮是8dp,本篇就此进行适配。

    正文

    NavigationIcon间隙

    先看看原来的样式,我这里为了演示,特地换了一个返回箭头。

    3700a3f2ca9a361603a31393267d3cf9.png

    修改BaseToolbarStyle

    然后我们在原本定义号的BaseToolbarStyle中在增加一些样式配置:

    8dp

    8dp

    8dp

    0dp

    ?actionBarSize

    ?actionBarSize

    @id/base_toolbar

    match_parent

    #000

    新增ToolbarNavigationButtonStyle

    再新增一个 ToolbarNavigationButtonStyle 作为返回按钮的样式:

    16dp

    AppTheme.ToolbarHeight

    新建一个 AppTheme.ToolbarHeight 作为Activity的样式:

    false

    true

    @style/ToolbarNavigationButtonStyle

    @style/BaseToolbarStyle

    修改AndroidManifest

    最后将 AndroidManifest 中Activity的 them 替换成 AppTheme.ToolbarHeight 。

    android:name=".module.example.DialogExampleActivity"

    android:label="@string/title_activity_dialog_example"

    android:theme="@style/AppTheme.ToolbarHeight" />

    看看改进后的效果:

    00abced68b4d160d7cbbcfd7d7815cff.png

    Title居中、BackText

    清除默认Title

    Toolbar在不设置Title的情况下默认是以 label 作为Title 的,所以第一步需要将Title设置为"",刚好前面我们封装了 initToolbar这个方法,我们在里面加上就行。

    /**

    * 初始化toolbar

    */

    private void initToolbar() {

    Toolbar mToolbar = findViewById(R.id.base_toolbar);

    if (null != mToolbar) {

    // 清除标题

    mToolbar.setTitle("");

    setSupportActionBar(mToolbar);

    mToolbar.setBackgroundColor(getToolbarBackground());

    //设置返回按钮

    mToolbar.setNavigationIcon(getNavigationIcon());

    mToolbar.setNavigationOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

    onNavigationOnClickListener();

    }

    });

    isInitToolbar = true;

    }

    }

    需要注意的是setTitle必需要在setSupportActionBar之前调用,否则将不起作用。

    看看效果:

    ed083bfc8629c3eeaab0caab41c15c2b.png

    可以看到,原本的默认标题已经没有了。

    新增Title和BackText

    其实这一步比较简单,现在的Toolbar是继承至ViewGroup,这就意味着Toolbar能放子View,所以我们像以下这样写就行,为了后面方便,我已经将样式抽取出来了。

    style="@style/BaseToolbarStyle"

    app:popupTheme="@style/AppTheme.PopupOverlay">

    style="@style/ToolBarNavTextStyle"

    android:text="返回" />

    style="@style/ToolBarTitleStyle"

    android:text="Toast示例" />

    另外两个样式:

    wrap_content

    match_parent

    2dp

    center

    true

    @color/ToolbarNavTextColor

    @dimen/ToolbarNavTextSize

    @id/toolbar_nav_text

    wrap_content

    wrap_content

    @color/white

    center

    @null

    18sp

    true

    @id/tv_toolbar_title

    值得注意的是,BackText也是需要做点击事件的,所以我给他加了个id,然后再initToolbar中进行事件监听:

    /**

    * 初始化toolbar

    */

    private void initToolbar() {

    ...

    if (null != mToolbar) {

    ...

    //返回文字按钮

    View navText = findViewById(R.id.toolbar_nav_text);

    if (null != navText) {

    navText.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

    onNavigationOnClickListener();

    }

    });

    }

    }

    }

    来看看效果吧:

    6bb415dd56f6ab00d3a476874a3f274c.gif

    结束

    总结

    本章的东西很少,基本上都是从style中进行配置,涉及的代码量并不是很多,起码初步达到了我们想要的效果。

    问题

    这种在 xml 中修改style的情况来适配会有一点问题,那就是每次我们新建Activity的时候都需要手动的更改 them、style,这比较繁琐、也没什么意义,所以下章我们就着手解决这个问题。

    软广

    一个痴心妄想想成为一个全屏(栈)工程师的程序猿。

    来来,关注一下吧!

    展开全文
  • 原生的Toolbartitle是居右显示的,而大多数情况下UI设计的图title是居中。另外默认的返回按钮间隙是16dp,而设计图上面是按照iOS来设计,所以返回按钮是8dp,本篇就此进行适配。 正文 NavigationIcon间隙 先看看...

    引言

    原生的Toolbar的title是居右显示的,而大多数情况下UI设计的图title是居中。另外默认的返回按钮间隙是16dp,而设计图上面是按照iOS来设计,所以返回按钮是8dp,本篇就此进行适配。

    正文

    NavigationIcon间隙

    先看看原来的样式,我这里为了演示,特地换了一个返回箭头。

    返回原始样式

    修改BaseToolbarStyle

    然后我们在原本定义号的BaseToolbarStyle中在增加一些样式配置:

    <!--标题栏的样式-->
        <style name="BaseToolbarStyle" parent="Widget.AppCompat.Toolbar">
            <!--内容距离开始 边距-->
            <item name="contentInsetStart">8dp</item>
            <!--内容距离 导航按钮 边距-->
            <item name="contentInsetStartWithNavigation">8dp</item>
            <!--使自定义view可以贴左右的边,多数版本的系统不要下面两句也可以,但少量版本必须加下面的两句-->
            <item name="android:paddingLeft">8dp</item>
            <!--右内边距-->
            <item name="android:paddingRight">0dp</item>
            <!--最小高度-->
            <item name="android:minHeight">?actionBarSize</item> 
            <!--高度-->
            <item name="android:layout_height">?actionBarSize</item>
            <!--id-->
            <item name="android:id">@id/base_toolbar</item>
            <!--宽度-->
            <item name="android:layout_width">match_parent</item>
            <item name="actionMenuTextColor">#000</item>
        </style>
    

    新增ToolbarNavigationButtonStyle

    再新增一个ToolbarNavigationButtonStyle作为返回按钮的样式:

     <!--标题栏返回按钮样式-->
    <style name="ToolbarNavigationButtonStyle" parent="Widget.AppCompat.Toolbar.Button.Navigation">
    	<item name="android:minWidth">16dp</item>
    </style>
    

    AppTheme.ToolbarHeight

    新建一个AppTheme.ToolbarHeight作为Activity的样式:

    <style name="AppTheme.ToolbarHeight">
            <!--修改了标题栏默认样式的样式
            修改了返回按钮的边距
            -->
            <item name="windowActionBar">false</item>
            <item name="windowNoTitle">true</item>
            <item name="toolbarNavigationButtonStyle">@style/ToolbarNavigationButtonStyle</item>
            <!--NavigationIcon的宽度-->
            <item name="toolbarStyle">@style/BaseToolbarStyle</item>
        </style>
    

    修改AndroidManifest

    最后将AndroidManifest中Activity的them替换成AppTheme.ToolbarHeight

    <activity
                android:name=".module.example.DialogExampleActivity"
                android:label="@string/title_activity_dialog_example"
                android:theme="@style/AppTheme.ToolbarHeight" />
    

    看看改进后的效果:

    改进后的返回按钮

    Title居中、BackText

    清除默认Title

    Toolbar在不设置Title的情况下默认是以 label 作为Title 的,所以第一步需要将Title设置为"",刚好前面我们封装了 initToolbar这个方法,我们在里面加上就行。

    /**
     * 初始化toolbar
     */
    private void initToolbar() {
    	Toolbar mToolbar = findViewById(R.id.base_toolbar);
    	if (null != mToolbar) {
    		// 清除标题 
    		mToolbar.setTitle("");
    		setSupportActionBar(mToolbar);
    		mToolbar.setBackgroundColor(getToolbarBackground());
    		//设置返回按钮
    		mToolbar.setNavigationIcon(getNavigationIcon());
    		mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
    			@Override
    			public void onClick(View v) {
    				onNavigationOnClickListener();
    			}
    		});
    		isInitToolbar = true;
    	}
    }
    

    需要注意的是setTitle必需要在setSupportActionBar之前调用,否则将不起作用。

    看看效果:

    清除Title

    可以看到,原本的默认标题已经没有了。

    新增Title和BackText

    其实这一步比较简单,现在的Toolbar是继承至ViewGroup,这就意味着Toolbar能放子View,所以我们像以下这样写就行,为了后面方便,我已经将样式抽取出来了。

    <android.support.design.widget.AppBarLayout style="@style/BaseAppBarLayoutStyle">
            <android.support.v7.widget.Toolbar
                style="@style/BaseToolbarStyle"
                app:popupTheme="@style/AppTheme.PopupOverlay">
    
                <TextView
                    style="@style/ToolBarNavTextStyle"
                    android:text="返回" />
    
                <TextView
                    style="@style/ToolBarTitleStyle"
                    android:text="Toast示例" />
            </android.support.v7.widget.Toolbar>
    
        </android.support.design.widget.AppBarLayout>
    

    另外两个样式:

    <style name="ToolBarNavTextStyle">
            <!--标题栏返回文字样式-->
            <item name="android:layout_width">wrap_content</item>
            <item name="android:layout_height">match_parent</item>
            <!--返回按钮和返回文字之间的间隔-->
            <item name="android:layout_marginLeft">2dp</item>
            <item name="android:gravity">center</item>
            <item name="android:layout_alignParentBottom">true</item>
            <item name="android:textColor">@color/ToolbarNavTextColor</item>
            <item name="android:textSize">@dimen/ToolbarNavTextSize</item>
            <item name="android:id">@id/toolbar_nav_text</item>
        </style>
     <style name="ToolBarTitleStyle">
            <!--标题栏 标题样式-->
            <item name="android:layout_width">wrap_content</item>
            <item name="android:layout_height">wrap_content</item>
            <item name="android:textColor">@color/white</item>
            <item name="android:layout_gravity">center</item>
            <item name="android:background">@null</item>
            <item name="android:textSize">18sp</item>
            <item name="android:layout_centerInParent">true</item>
            <item name="android:id">@id/tv_toolbar_title</item>
        </style>
    

    值得注意的是,BackText也是需要做点击事件的,所以我给他加了个id,然后再initToolbar中进行事件监听:

     /**
         * 初始化toolbar
         */
        private void initToolbar() {
           ...
            if (null != mToolbar) {
              ...
                //返回文字按钮
                View navText = findViewById(R.id.toolbar_nav_text);
                if (null != navText) {
                    navText.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            onNavigationOnClickListener();
                        }
                    });
                }
            }
        }
    

    来看看效果吧:

    成品演示

    结束

    总结

    本章的东西很少,基本上都是从style中进行配置,涉及的代码量并不是很多,起码初步达到了我们想要的效果。

    源码-tag-v0.08

    问题

    这种在xml中修改style的情况来适配会有一点问题,那就是每次我们新建Activity的时候都需要手动的更改 them、style,这比较繁琐、也没什么意义,所以下章我们就着手解决这个问题。

    微信公众号

    来都来了,就给个关注吧,时不时会悄悄的推送一些小技巧的文章~~
    AndroidRookie

    展开全文
  • Android--ToolBar使用

    千次阅读 2018-07-13 11:07:39
    使用ToolBar 使用的文件: 1、MainActivity.java 2、activity_main.xml 3、style.xml 4、menu_main.xml 1、基本设置 style中配置 &amp;amp;amp;amp;lt;!-- Base application theme. --&amp;amp;...

    使用ToolBar

    使用的文件:
    1、MainActivity.java
    2、activity_main.xml
    3、style.xml
    4、menu_main.xml

    1、基本设置

    style中配置,必须设置为:Theme.AppCompat.Light.NoActionBar 这个主题。

        <!-- Base application theme. -->
        <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_main.xml中添加

        <android.support.v7.widget.Toolbar
            android:id="@+id/activity_main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="?attr/colorPrimaryDark"
            android:minHeight="?attr/actionBarSize"/>

    menu_main.xml中设置(即当点击menu按钮时会跳出两个选项item)

    <?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_item1"
            android:title="item1"
            android:orderInCategory="2"
            android:icon="@mipmap/ic_launcher"
            app:showAsAction="never"/>
    
        <item android:id="@+id/action_item2"
            android:title="item2"
            android:orderInCategory="3"
            android:icon="@mipmap/ic_launcher"
            app:showAsAction="never"/>
    </menu>

    MainActivity中设置

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Toolbar toolbar = findViewById(R.id.activity_main_toolbar);
    
            toolbar.setTitle("标题");
    
            setSupportActionBar(toolbar);
        }

    这里写图片描述
    这时,左边NvagitionIcon和右边的MenuIcon都没有出来,所以还要在Java中配置。
    设置左边

     //设置是否有NvagitionIcon(返回图标)
     getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    设置右边

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

    总的:

    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Toolbar toolbar = findViewById(R.id.activity_main_toolbar);
    
            toolbar.setTitle("标题");
    
            setSupportActionBar(toolbar);
    
            //设置是否有NvagitionIcon(返回图标)
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.menu_main, menu);
            return true;
    
        }
    }

    现在就有了左边和右边的图标了,但是它们都是黑色的图标连标题都是黑的。那是因为我们在style.xml文件中设置了<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    这里写图片描述

    可以将其改成:<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">字体就变白了,但是整个页面变黑了。

    这里写图片描述

    问题一:跳出的那个选项区,覆盖了ToolBar

    这里写图片描述
    解决方法:
    1、在style.xml文件中创建一个主题

        <!-- ToolBar菜单样式.-->
        <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
            <!--设置背景-->
            <item name="android:background">@color/colorPrimaryDark</item>
            <!--设置字体颜色-->
            <item name="android:textColor">@android:color/white</item>
            <!--设置不覆盖锚点-->
            <item name="overlapAnchor">false</item>
        </style>

    2、在MainActivity中使用这个主题

    // 使用主题修改Menu选项的问题
    toolbar.setPopupTheme(R.style.popup_theme);

    整个的代码:

    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Toolbar toolbar = findViewById(R.id.activity_main_toolbar);
    
            toolbar.setTitle("标题");
            // 使用主题修改Menu选项的问题
            toolbar.setPopupTheme(R.style.popup_theme);
    
            setSupportActionBar(toolbar);
    
            //设置是否有NvagitionIcon(返回图标)
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.menu_main, menu);
            return true;
    
        }
    }
    

    问题解决,如下图:
    这里写图片描述

    问题二:Menu的选项栏里面没有图标,如上图

    解决方法:
    在MainActivity中加入这个重写函数,注意这段代码有红色下划线return super.onPrepareOptionsPanel(view, menu);没关系的。

        @Override
        protected boolean onPrepareOptionsPanel(View view, Menu menu){
            if (menu != null) {
                if (menu.getClass() == MenuBuilder.class) {
                    try {
                        Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                        m.setAccessible(true);
                        m.invoke(menu, true);
                    } catch (Exception e) {
    
                    }
                }
            }
            return super.onPrepareOptionsPanel(view, menu);
        }

    整个的代码:

    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Toolbar toolbar = findViewById(R.id.activity_main_toolbar);
    
            toolbar.setTitle("标题");
            // 使用主题修改Menu选项的问题
            toolbar.setPopupTheme(R.style.popup_theme);
    
            setSupportActionBar(toolbar);
    
            //设置是否有NvagitionIcon(返回图标)
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }
        // 创建 Menu图标
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.menu_main, menu);
            return true;
    
        }
        // 让Menu选项中的选项有图标
        @Override
        protected boolean onPrepareOptionsPanel(View view, Menu menu){
            if (menu != null) {
                if (menu.getClass() == MenuBuilder.class) {
                    try {
                        Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                        m.setAccessible(true);
                        m.invoke(menu, true);
                    } catch (Exception e) {
    
                    }
                }
            }
            return super.onPrepareOptionsPanel(view, menu);
        }
    }
    

    问题解决如下图:
    这里写图片描述


    ToolBar中的各种点击监听

    1、NavigationIcon的点击事件监听:
    在MainActivity中添加代码:点击之后直接关闭

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

    整个的代码:

       @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Toolbar toolbar = findViewById(R.id.activity_main_toolbar);
    
            toolbar.setTitle("标题");
            // 使用主题修改Menu选项的问题
            toolbar.setPopupTheme(R.style.popup_theme);
    
            setSupportActionBar(toolbar);
    
            //设置是否有NvagitionIcon(返回图标)
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            // 设置Navigation的点击事件
            toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    finish();
                }
            });
        }

    2、Menu中的监听

    // Menu点击事件监听
    toolbar.setOnMenuItemClickListener(onMenuItemClick);

    实现

    private Toolbar.OnMenuItemClickListener onMenuItemClick=new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                String msg = "";
                switch (item.getItemId()) {
                    case R.id.action_item1:
                        msg += "Click item1";
                        break;
                    case R.id.action_item2:
                        msg += "Click item2";
                        break;
                }
                if (!msg.equals("")) {
                    Toast.makeText(getApplicationContext(), msg, Toast.LENGTH_SHORT).show();
                }
                return true;
            }
        };

    全部代码如下:

    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Toolbar toolbar = findViewById(R.id.activity_main_toolbar);
    
            toolbar.setTitle("标题");
            // 使用主题修改Menu选项的问题
            toolbar.setPopupTheme(R.style.popup_theme);
    
            setSupportActionBar(toolbar);
    
            //设置是否有NvagitionIcon(返回图标)
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            // 设置Navigation的点击事件
            toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    finish();
                }
            });
    
            // Menu点击事件监听
            toolbar.setOnMenuItemClickListener(onMenuItemClick);
        }
        // 创建Menu图标
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.menu_main, menu);
            return true;
    
        }
        // Menu选项中显示Icon
        @Override
        protected boolean onPrepareOptionsPanel(View view, Menu menu){
            if (menu != null) {
                if (menu.getClass() == MenuBuilder.class) {
                    try {
                        Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                        m.setAccessible(true);
                        m.invoke(menu, true);
                    } catch (Exception e) {
    
                    }
                }
            }
            return super.onPrepareOptionsPanel(view, menu);
        }
    
        // Menu选项点击处理
        private Toolbar.OnMenuItemClickListener onMenuItemClick=new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                String msg = "";
                switch (item.getItemId()) {
                    case R.id.action_item1:
                        msg += "Click item1";
                        break;
                    case R.id.action_item2:
                        msg += "Click item2";
                        break;
                }
                if (!msg.equals("")) {
                    Toast.makeText(getApplicationContext(), msg, Toast.LENGTH_SHORT).show();
                }
                return true;
            }
        };
    }
    

    这里写图片描述

    修改NavigationIcon 和 MenuIcon

    1、创建vector资源(下载一个SVG图片使用AndroidStudio来生成XML文件),也可以直接使用.png文件

    2、在Java代码中修改

    Toolbar toolbar = findViewById(R.id.activity_main_toolbar);
    // 修改NavigationIcon
    toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_toolbar_left_45dp)); 
    // 修改MenuIcon
    toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_toolbar_menu_45dp));
    setSupportActionBar(toolbar);

    如何在ToolBar上面显示按钮/图标

    在menu_main.xml中

    <?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_item1"
            android:title="item1"
            android:orderInCategory="2"
            android:icon="@mipmap/ic_launcher"
            app:showAsAction="always"/>
    
        <item android:id="@+id/action_item2"
            android:title="item2"
            android:orderInCategory="3"
            android:icon="@mipmap/ic_launcher"
            app:showAsAction="never"/>
    </menu>

    注意这一个属性:app:showAsAction=""

    • app:showAsAction="always" :always:总是显示在界面上
    • app:showAsAction="never" :never:不显示在界面上,只让出现在右边的三个点中
    • app:showAsAction="ifRoom" :ifRoom:如果有位置才显示,不然就出现在右边的三个点中
    展开全文
  • 1.修改title 边距修改边距使用系统的app属性来引入使用,即: xmlns:app="http://schemas.android.com/apk/res-auto"比如:<android.support.v7.widget.Toolbar xmlns:app=...
  • Android--Toolbar实现标题栏

    千次阅读 2019-02-08 15:51:03
    Android自带的那个Actionbar是不是感觉有点low,2014年Google推出了Material这种精美界面设计,而Toolbar便是其中的一个控件,用于制作自己的标题。 Toolbar还可以做出更好的效果但这里至介绍其中其中几种。 制作...
  • android.support.v7.widget.Toolbar android:id="@+id/detail_toolbar" android:layout_width="match_parent" android:layout_height="@dimen/distance_48_size" android:minHe.....
  • 在开发中我们会经常用到查看图片、放大、缩小、旋转等操作这个时候就可以用到v-viewer,这一是一款很好用的插件 1、安装依赖 npm install v-viewer --save 2、在main.js中引入注册 import Viewer from 'v-...
  • Android--Toolbar基本使用

    2021-06-11 01:03:39
    谷歌最初推出Actionbar想用于安卓app统一导航行样式,但由于Actionbar自定义性不高,又不是很好看(很丑),民间开发出了另一种控件并被谷歌收入v7包下,它就是Toolbar使用Toolbar有几点要注意的(这边使用的v7包的...
  • Toolbar使用与自定义Toolbar

    千次阅读 2018-06-23 13:50:54
    "@+id/toolbar_title" android :layout_width= "wrap_content" android :layout_height= "wrap_content" android :layout_centerInParent= "true" android :gravity= "center" android :layout_...
  • Android--ToolBar基本介绍

    2017-09-25 13:26:02
    1、简介ToolBar 是 Android5.0 推出的导航控件,官方在某些程度上认为 ActionBar 限制了 android app 的开发与设计的弹性,所以 ToolBar 的出现可以说是用来代替 Action_Bar。的确对比 Action_Bar,ToolBar 的使用...
  • npm install 1.安装插件 npm/cnpm i v-viewer -S main.js 粘贴到main.js 里面就可以了。 import Viewer from ‘v-viewer’ import ‘viewerjs/dist/viewer.css’ Vue.use(Viewer, { ...toolbar: true,
  • Android5.0--- Toolbar

    2016-08-10 21:13:10
    原博地址:Android开发:最详细的 ... toolbar是Android5.0时代替actionbar的控件(兼容5.0以下的使用V7中的toolbar),可以设置:导航图标 + App Logo + Title + SubTitle + customView + action menu 导包: com
  • Android-toolbar-详解

    2017-03-27 19:02:47
    toolbar.setSubtitle("Sub title"); setSupportActionBar(toolbar); // Navigation Icon 要設定在 setSupoortActionBar 才有作用 // 否則會出現 back button toolbar.setNavigationIcon(R.drawable.ab_android);...
  • CollapsingToolbarLayout和加上一个ImageView可以给Toolbar提供酷炫的可折叠的效果。 AppBarLayout嵌套CollapsingToolbarLayout,里面又嵌套ImageView和Toolbar。 1、在CollapsingToolbarLayout中: 我们设置了...
  • Toolbar的简单介绍和如何简单自定义toolbar

    万次阅读 热门讨论 2015-11-29 20:43:10
    通过本篇可以了解到: 1.什么是ToolBar 2.ToolBar 的一些重要属性 3.如何自定义ToolBar
  • Material Design - Toolbar 使用总结
  • 今天我们封装ToolBar来进行开发,ToolBar是一个高度可独立定制的标题栏,每个项目都必不可少。源码地址使用前的准备首先、我们需要用到ToolBar,高版本Activity必须继承AppCompatActivity,以前还有一个...
  • npm install v-viewer 3.配置main.js import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewer' import Vue from 'vue' Vue.use(Viewer) 4.代码实现 <template> <div style="height: 500...
  • ToolBar标题文字居中的方法

    万次阅读 2016-03-10 16:15:00
    在项目的开发中,使用苹果手机的产品,出的界面效果图极有可能(我这里是一定)完全是按照苹果的界面风格来出的,例如界面顶部的title文字位置是水平居中 如图: 那么问题来了,当我们使用ToolBar控件进行开发时,...
  • Android-Toolbar标题居中与字体大小和颜色 在安卓APP开发一直以来习惯性地都是自己写标题栏的布局。为了及时跟上时代的步伐,在现在的项目中引入了Toolbar. 1、返回的箭头 设置图标: toolbar:...
  • 第一步下载 npm install v-viewer 第二步在main.js引入 ...这里的title,因为默认一串英文字符,我想显示为图片的名称,在页面的img设置了alt为图片的名称,然后返回 img.alt。 可以把img打印出来看看里面有什么。 Vu
  • v-viewer可随意放大及缩小图片,另外还有旋转、翻转等功能,是一款不错的前端图片显示插件 第一步:安装依赖 npm install v-viewer --save 第二步:在main.js引用并配置 import Viewer from 'v-viewer' import '...
  • 1.布局文件 <androidx.appcompat.widget.Toolbar android:id="@+id/title_tool_bar" android:layout_width="match_parent" android:layout_height="wrap_content" a...
  • npm install v-viewer --save 第二步、在项目中引用 // 在main.js中全局引用 import Viewer from "v-viewer"// 图片预览 import "viewerjs/dist/viewer.css"// 图片预览 Vue.use(Viewer) Viewer.set...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,687
精华内容 5,074
关键字:

v-toolbar-title

友情链接: if-else.rar