导航栏后面的内容
Posted
技术标签:
【中文标题】导航栏后面的内容【英文标题】:Content going behind Navigation Bar 【发布时间】:2016-06-11 07:19:37 【问题描述】:我在使用 android 5.0 及更高版本时遇到问题。每当我将任何视图与父底部对齐时,内容都会隐藏在软导航按钮后面。
以上是从 Android Studio 1.5 创建新项目后生成的屏幕截图。我刚刚在片段底部添加了一个编辑文本。
如您所见,一半的编辑文本位于导航栏后面。
虽然代码是由 Android Studio 自动生成的,但我仍然在下面发布代码。
Manifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.trial.exps.tabbedtrial">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
activity_main.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:id="@+id/main_content"
android:layout_
android:layout_
android:fitsSystemWindows="true"
tools:context="com.trial.exps.tabbedtrial.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_
android:layout_
android:paddingTop="@dimen/appbar_padding_top"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_
android:layout_
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_
android:layout_ />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_
android:layout_
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_
android:layout_
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
fragment_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.trial.exps.tabbedtrial.MainActivity$PlaceholderFragment">
<TextView
android:id="@+id/section_label"
android:layout_
android:layout_ />
<EditText
android:layout_
android:layout_
android:hint="Put Some Text"
android:layout_alignParentBottom="true"
android:background="@drawable/curved_edges"/>
</RelativeLayout>
curved_edges.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff" />
<stroke android: android:color="#454545" />
<padding android:left="6dp" android:top="6dp" android:right="6dp" android:bottom="6dp" />
<corners android:radius="6dp" />
</shape>
MainActivity.java
package com.trial.exps.tabbedtrial;
import android.support.design.widget.TabLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity
/**
* The @link android.support.v4.view.PagerAdapter that will provide
* fragments for each of the sections. We use a
* @link FragmentPagerAdapter derivative, which will keep every
* loaded fragment in memory. If this becomes too memory intensive, it
* may be best to switch to a
* @link android.support.v4.app.FragmentStatePagerAdapter.
*/
private SectionsPagerAdapter mSectionsPagerAdapter;
/**
* The @link ViewPager that will host the section contents.
*/
private ViewPager mViewPager;
@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);
tabLayout.setupWithViewPager(mViewPager);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener()
@Override
public void onClick(View view)
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
);
@Override
public boolean onCreateOptionsMenu(Menu menu)
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
@Override
public boolean onOptionsItemSelected(MenuItem item)
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings)
return true;
return super.onOptionsItemSelected(item);
/**
* A placeholder fragment containing a simple view.
*/
public static class PlaceholderFragment extends Fragment
/**
* The fragment argument representing the section number for this
* fragment.
*/
private static final String ARG_SECTION_NUMBER = "section_number";
public PlaceholderFragment()
/**
* Returns a new instance of this fragment for the given section
* number.
*/
public static PlaceholderFragment newInstance(int sectionNumber)
PlaceholderFragment fragment = new PlaceholderFragment();
Bundle args = new Bundle();
args.putInt(ARG_SECTION_NUMBER, sectionNumber);
fragment.setArguments(args);
return fragment;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
View rootView = inflater.inflate(R.layout.fragment_main, container, false);
TextView textView = (TextView) rootView.findViewById(R.id.section_label);
textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER)));
return rootView;
/**
* A @link FragmentPagerAdapter that returns a fragment corresponding to
* one of the sections/tabs/pages.
*/
public class SectionsPagerAdapter extends FragmentPagerAdapter
public SectionsPagerAdapter(FragmentManager fm)
super(fm);
@Override
public Fragment getItem(int position)
// getItem is called to instantiate the fragment for the given page.
// Return a PlaceholderFragment (defined as a static inner class below).
return PlaceholderFragment.newInstance(position + 1);
@Override
public int getCount()
// Show 3 total pages.
return 3;
@Override
public CharSequence getPageTitle(int position)
switch (position)
case 0:
return "SECTION 1";
case 1:
return "SECTION 2";
case 2:
return "SECTION 3";
return null;
styles.xml
<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">
<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>
附:如果删除或更换可绘制是您解决方案的一部分,那么我已经尝试过了。而且我在 Android 指南中也找不到任何合适的解决方案。
【问题讨论】:
这里有什么解决办法吗?我有类似的问题... @bashan 问题在于工具栏的滚动标志。它在滚动工具栏时将 UI 向下推以将其拉起。您可以将其关闭以使 UI 正常。 【参考方案1】:这是解决方案。
大多数布局都可以通过在 value-21 style.xml 中添加这些属性来解决
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:fitsSystemWindows">true</item>
对于其他人,我已经计算了导航栏的高度并为我的视图添加了边距。
public static int getSoftButtonsBarSizePort(Activity activity)
// getRealMetrics is only available with API 17 and +
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
DisplayMetrics metrics = new DisplayMetrics();
activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
int usableHeight = metrics.heightPixels;
activity.getWindowManager().getDefaultDisplay().getRealMetrics(metrics);
int realHeight = metrics.heightPixels;
if (realHeight > usableHeight)
return realHeight - usableHeight;
else
return 0;
return 0;
【讨论】:
【参考方案2】:android:fitsSystemWindows="true"
这对我有用。视图不再与软导航重叠。
【讨论】:
【参考方案3】:我没有现成的解决方案,但这可能会有所帮助。 activity_main.xml
根元素声明它应该适合系统窗口:android:fitsSystemWindows="true"
。
我想你必须找到一种方法来检测底部导航栏是否在屏幕上,如果是,请在活动布局中添加额外的 margin-bottom。
【讨论】:
该标签没有任何区别,只要键盘弹出,它就会重新调整屏幕大小。【参考方案4】:android:fitsSystemWindows="true" 没有解决我的布局问题。我必须为部分隐藏的顶部和底部视图添加相应的属性。
android:paddingTop="?android:attr/actionBarSize" android:paddingBottom="?android:attr/actionBarSize"
例如在顶部:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main"
android:layout_
android:layout_>
<ScrollView
android:id="@+id/myid"
android:layout_
android:layout_
app:layout_constraintTop_toTopOf="parent"
android:paddingTop="?android:attr/actionBarSize">
...
【讨论】:
这种解决方法效率不高。可能您需要进行更多调试才能弄清楚为什么该标志不适合您。以上是关于导航栏后面的内容的主要内容,如果未能解决你的问题,请参考以下文章