系统默认下的Android自定义应用栏 [英] Android custom app bar underneath system default
问题描述
我的MainActivity.xml如下:
<?xml version ="1.0" encoding ="utf-8"?>< android.support.v4.widget.DrawerLayoutxmlns:android ="http://schemas.android.com/apk/res/android"xmlns:app ="http://schemas.android.com/apk/res-auto"xmlns:tools ="http://schemas.android.com/tools"android:id ="@ + id/drawer_layout"android:layout_width ="match_parent"android:layout_height ="match_parent"android:fitsSystemWindows ="true"工具:openDrawer ="start"><包括layout ="@ layout/app_bar_appbar"android:layout_width ="match_parent"android:layout_height ="match_parent"/>< android.support.design.widget.NavigationViewandroid:id ="@ + id/nav_view"android:layout_width ="wrap_content"android:layout_height ="match_parent"android:layout_gravity ="start"android:fitsSystemWindows ="true"app:headerLayout ="@ layout/nav_header_appbar"app:menu ="@ menu/activity_appbar_drawer"/>< android.support.design.widget.CoordinatorLayoutxmlns:app ="http://schemas.android.com/apk/res-auto"android:layout_width ="match_parent"android:layout_height ="match_parent">< android.support.design.widget.AppBarLayoutandroid:layout_width ="match_parent"android:layout_height ="wrap_content"android:paddingTop ="@ dimen/appbar_padding_top"android:theme ="@ style/AppTheme.AppBarOverlay">< android.support.v7.widget.Toolbarandroid:id ="@ + id/toolbar"android:layout_width ="match_parent"android:layout_height =?attr/actionBarSize"android:layout_weight ="1"android:background =?attr/colorPrimary"app:layout_scrollFlags ="scroll | enterAlways"app:popupTheme ="@ style/AppTheme.PopupOverlay"app:title ="@ string/app_name"></android.support.v7.widget.Toolbar>< android.support.design.widget.TabLayoutandroid:id ="@ + id/tabs"android:layout_width ="match_parent"android:layout_height ="wrap_content"app:layout_scrollFlags ="scroll | exitUntilCollapsed">< android.support.design.widget.TabItemandroid:layout_width ="wrap_content"android:layout_height ="wrap_content"android:text ="@ string/tab_text_1"/>< android.support.design.widget.TabItemandroid:layout_width ="wrap_content"android:layout_height ="wrap_content"android:text ="@ string/tab_text_2"/>< android.support.design.widget.TabItemandroid:layout_width ="wrap_content"android:layout_height ="wrap_content"android:text ="@ string/tab_text_3"/></android.support.design.widget.TabLayout></android.support.design.widget.AppBarLayout>< android.support.v4.view.ViewPagerandroid:id ="@ + id/container"android:layout_width ="match_parent"android:layout_height ="match_parent"app:layout_behavior ="@ string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager></android.support.design.widget.CoordinatorLayout></android.support.v4.widget.DrawerLayout>
我的意图是创建一个带有导航抽屉(左侧图标)和选项菜单(右侧图标)的应用栏.但是,它似乎卡在了系统默认值之下.这是显示其预览的图像:
此外,我的styles.xml是:
< resources>< ;!-基本应用程序主题.->< style name ="AppTheme" parent ="Theme.AppCompat.Light.DarkActionBar"><!-在这里自定义主题.->< item name ="colorPrimary"> @ color/colorPrimary</item>< item name ="colorPrimaryDark"> @ color/colorPrimaryDark</item>< item name ="colorAccent"> @ color/colorAccent</item></style>< style name ="AppTheme.NoActionBar" parent ="AppTheme">< item name ="windowActionBar"> false</item>< item name ="windowNoTitle"> true</item></style>< style name ="AppTheme.AppBarOverlay" parent ="ThemeOverlay.AppCompat.Dark.ActionBar"/>< style name ="AppTheme.PopupOverlay" parent ="ThemeOverlay.AppCompat.Light"/></resources>
将AppCompat.Light.DarkActionBar更改为NoActionBar无效.带有"AppName"的应用栏仅保留在另一个应用栏的上方(除了导航栏和选项菜单的两个图标外,该应用栏还应显示"BEEP"为文本)-在活动清单中也定义了NoActionBar:
<活动android:name =.MainActivity"android:label ="BEEP"android:theme ="@ style/AppTheme.NoActionBar"><意图过滤器>< action android:name ="android.intent.action.MAIN"/>< category android:name ="android.intent.category.LAUNCHER"/></intent-filter></activity>
如果需要,这是MainActivity.java的相关部分:
@Override受保护的void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);工具栏工具栏=(工具栏)findViewById(R.id.toolbar);setSupportActionBar(toolbar);//创建适配器,该适配器将为三个适配器分别返回一个片段//活动的主要部分.mSectionsPagerAdapter =新的SectionsPagerAdapter(getSupportFragmentManager());//使用部分适配器设置ViewPager.mViewPager =(ViewPager)findViewById(R.id.container);mViewPager.setAdapter(mSectionsPagerAdapter);TabLayout tabLayout =(TabLayout)findViewById(R.id.tabs);mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));tabLayout.addOnTabSelectedListener(新的TabLayout.ViewPagerOnTabSelectedListener(mViewPager));DrawerLayout抽屉=(DrawerLayout)findViewById(R.id.drawer_layout);ActionBarDrawerToggle切换=新的ActionBarDrawerToggle(抽屉,工具栏,R.string.navigation_drawer_open,R.string.navigation_drawer_close);cabinet.addDrawerListener(toggle);toggle.syncState();NavigationView navigationView =(NavigationView)findViewById(R.id.nav_view);navigationView.setNavigationItemSelectedListener(this);...
那么,如何显示工具栏(ID为"toolbar")而不是上面图像中当前包含文本"AppName"的默认应用栏?我还遵循了
<?xml version ="1.0" encoding ="utf-8"?>< android.support.design.widget.CoordinatorLayoutxmlns:android ="http://schemas.android.com/apk/res/android"xmlns:app ="http://schemas.android.com/apk/res-auto"xmlns:tools ="http://schemas.android.com/tools"android:layout_width ="match_parent"android:layout_height ="match_parent">< android.support.design.widget.AppBarLayoutandroid:layout_width ="match_parent"android:layout_height ="wrap_content"android:theme ="@ style/AppTheme.AppBarOverlay">< android.support.v7.widget.Toolbarandroid:id ="@ + id/toolbar"android:layout_width ="match_parent"android:layout_height =?attr/actionBarSize"android:background =?attr/colorPrimary"app:popupTheme ="@ style/AppTheme.PopupOverlay"/></android.support.design.widget.AppBarLayout>< include layout ="@ layout/content_appbar"/></android.support.design.widget.CoordinatorLayout>
当您将 Theme.AppCompat.Light.DarkActionBar
放入AndroidManifest的 Application
标记中时,所有活动将包含默认操作栏.
使用 NoActionBar
在您的styles.xml中再创建一个主题,并将其应用于您的 NavigationDrawerActivity
.
即
< style name ="navigation_theme" parent ="Theme.AppCompat.Light.NoActionBar"/>
将其设置为您的导航活动
<活动android:name =.NavigationDrawerActivity"android:label ="@ string/title_activity_navigation_drawer"android:theme ="@ style/navigationtheme"/>
具有ActionBar的默认主题和具有NoActionBar主题的NavigationDrawerActivity的示例
编辑
正如@Talisman所说,这是TabLayout和ViewPager的问题DrawerLayout的
<?xml version ="1.0" encoding ="utf-8"?>< android.support.v4.widget.DrawerLayout xmlns:android ="http://schemas.android.com/apk/res/android"xmlns:app ="http://schemas.android.com/apk/res-auto"xmlns:tools ="http://schemas.android.com/tools"android:id ="@ + id/drawer_layout"android:layout_width ="match_parent"android:layout_height ="match_parent"android:fitsSystemWindows ="true"工具:openDrawer ="start">< android.support.design.widget.CoordinatorLayoutandroid:layout_width ="match_parent"android:layout_height ="match_parent"工具:context ="com.and.NavigationDrawerActivity">< android.support.design.widget.AppBarLayoutandroid:layout_width ="match_parent"android:layout_height ="wrap_content"android:theme ="@ style/AppTheme.AppBarOverlay">< android.support.v7.widget.Toolbarandroid:id ="@ + id/toolbar"android:layout_width ="match_parent"android:layout_height =?attr/actionBarSize"android:background ="@ android:color/holo_blue_light"app:popupTheme ="@ style/AppTheme.PopupOverlay"/></android.support.design.widget.AppBarLayout><!-您在此FrameLayout中的内容->< FrameLayoutandroid:id ="@ + id/container"android:layout_width ="match_parent"android:layout_height ="match_parent"app:layout_behavior ="@ string/appbar_scrolling_view_behavior"工具:context ="com.and.NavigationDrawerActivity"></FrameLayout>< android.support.design.widget.FloatingActionButtonandroid:id ="@ + id/fab"android:layout_width ="wrap_content"android:layout_height ="wrap_content"android:layout_gravity ="bottom | end"android:layout_margin ="@ dimen/fab_margin"app:srcCompat ="@ android:drawable/ic_dialog_email"/></android.support.design.widget.CoordinatorLayout>< android.support.design.widget.NavigationViewandroid:id ="@ + id/nav_view"android:layout_width ="wrap_content"android:layout_height ="match_parent"android:layout_gravity ="start"android:fitsSystemWindows ="true"app:headerLayout ="@ layout/nav_header_navigation_drawer"app:menu ="@ menu/activity_navigation_drawer_drawer"/></android.support.v4.widget.DrawerLayout>
现在在其他片段中设置 TabLayout
和 ViewPager
,然后在 onCreate
方法的此 FrameLayout
中加载该片段 NavigationDrawerActivity
FragmentManager fm = getSupportFragmentManager();FragmentTransaction tr = fm.beginTransaction();tr.replace(R.id.frame_container,片段);tr.commitAllowingStateLoss();
,其中fragment是另一个包含TabLayout和ViewPager的片段.
My MainActivity.xml is as below:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_appbar"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_appbar"
app:menu="@menu/activity_appbar_drawer" />
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/appbar_padding_top"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:title="@string/app_name">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tab_text_1" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tab_text_2" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tab_text_3" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
My intention is to have an appbar with navigation drawer (icon on left), and options menu (icon on right). However, it appears to be stuck underneath the system default. Here is an image showing its preview:
Additionally, my styles.xml is:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Changing AppCompat.Light.DarkActionBar to NoActionBar has no effect. The appbar with "AppName" just remains above the other appbar (which should show "BEEP" as text, in addition to the two icons for navbar and options menu) - NoActionBar is also defined in the manifest for the activity:
<activity
android:name=".MainActivity"
android:label="BEEP"
android:theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Here is the relevant part of the MainActivity.java, if needed:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionsPagerAdapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
...
So, how can I get the toolbar (ID is "toolbar") to display instead of the default appbar that currently contains the text "AppName" in the above image? I also followed this, however there is no change in the result.
EDIT 1: The following screenshot shows my user-defined appbar appearing underneath the default, for some reason. I have also included my app_bar_appbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_appbar" />
</android.support.design.widget.CoordinatorLayout>
As you are having Theme.AppCompat.Light.DarkActionBar
to your Application
tag of AndroidManifest all activity will include default actionbar.
Create one more theme in your styles.xml with NoActionBar
and apply this to your NavigationDrawerActivity
.
i.e.
<style name="navigation_theme" parent="Theme.AppCompat.Light.NoActionBar"/>
Set it to your Navigation Activity
<activity
android:name=".NavigationDrawerActivity"
android:label="@string/title_activity_navigation_drawer"
android:theme="@style/navigationtheme" />
Example of default theme with ActionBar and NavigationDrawerActivity with NoActionBar theme
EDIT
As @Talisman said, it was the issue with the TabLayout and ViewPager of DrawerLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.and.NavigationDrawerActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/holo_blue_light"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<!--Your content in this FrameLayout-->
<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.and.NavigationDrawerActivity">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_navigation_drawer"
app:menu="@menu/activity_navigation_drawer_drawer" />
</android.support.v4.widget.DrawerLayout>
Now Set the TabLayout
and ViewPager
in other Fragment and Load that fragment in this FrameLayout
on onCreate
method of NavigationDrawerActivity
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction tr = fm.beginTransaction();
tr.replace(R.id.frame_container, fragment);
tr.commitAllowingStateLoss();
where fragment is other fragment which contains your TabLayout and ViewPager.
这篇关于系统默认下的Android自定义应用栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!