[android] DrawerLayout을 사용하여 ActionBar / Toolbar 및 상태 표시 줄 아래에 표시하려면 어떻게합니까?
새로운 재질 디자인 Side Nav 사양 에서 작업 표시 줄과 상태 표시 줄 뒤에 서랍을 표시 할 수 있음을 확인했습니다. 이것을 어떻게 구현할 수 있습니까?
답변
프레임 워크 및 지원 라이브러리의 새로운 기능을 통해이를 정확하게 수행 할 수 있습니다. 세 가지 ‘퍼즐 조각’이 있습니다.
- 툴바를 사용 하여 작업 표시 줄을 뷰 계층 구조에 포함시킬 수 있습니다.
- 시스템 바 뒤에 배치되도록 DrawerLayout 만들기
fitsSystemWindows
. Theme.Material
DrawerLayout이 대신 그릴 수 있도록의 일반 상태 표시 줄 색상 표시를 비활성화 합니다.
새 appcompat를 사용한다고 가정하겠습니다.
먼저 레이아웃은 다음과 같아야합니다.
<!-- The important thing to note here is the added fitSystemWindows -->
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Your normal content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- We use a Toolbar so that our drawer can be displayed
in front of the action bar -->
<android.support.v7.widget.Toolbar
android:id="@+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<!-- The rest of your content view -->
</LinearLayout>
<!-- Your drawer view. This can be any view, LinearLayout
is just an example. As we have set fitSystemWindows=true
this will be displayed under the status bar. -->
<LinearLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:fitsSystemWindows="true">
<!-- Your drawer content -->
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
그런 다음 활동 / 조각에서 :
public void onCreate(Bundled savedInstanceState) {
super.onCreate(savedInstanceState);
// Your normal setup. Blah blah ...
// As we're using a Toolbar, we should retrieve it and set it
// to be our ActionBar
Toolbar toolbar = (...) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
// Now retrieve the DrawerLayout so that we can set the status bar color.
// This only takes effect on Lollipop, or when using translucentStatusBar
// on KitKat.
DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout);
drawerLayout.setStatusBarBackgroundColor(yourChosenColor);
}
그런 다음 DrawerLayout이 상태 표시 줄 뒤에 표시되는지 확인해야합니다. values-v21 테마를 변경하면됩니다.
values-v21 / themes.xml
<style name="Theme.MyApp" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
참고 : <fragment android:name="fragments.NavigationDrawerFragment">
대신에 a 를 사용하는 경우
<LinearLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:fitsSystemWindows="true">
<!-- Your drawer content -->
</LinearLayout>
실제 레이아웃에서는 메소드 fitsSystemWindows(boolean)
에서 돌아온 뷰를 호출하면 원하는 효과를 얻을 수 있습니다 onCreateView
.
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState) {
View mDrawerListView = inflater.inflate(
R.layout.fragment_navigation_drawer, container, false);
mDrawerListView.setFitsSystemWindows(true);
return mDrawerListView;
}
답변
편집 : 새로운 디자인 지원 라이브러리가이를 지원하며 이전 방법은 더 이상 필요하지 않습니다.
이제 새로운 Android 디자인 지원 라이브러리를 사용하여이 작업을 수행 할 수 있습니다 .
Chris Banes 의 Cheesesquare 샘플 앱 을 통해 모든 새로운 기능을 시연 할 수 있습니다.
이전 방법 :
게시 된 완벽한 솔루션이 없으므로 원하는 결과를 얻는 방법은 다음과 같습니다.
먼저 프로젝트에 ScrimInsetsFrameLayout 을 포함 시킵니다 .
/*
* Copyright 2014 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* A layout that draws something in the insets passed to
* {@link #fitSystemWindows(Rect)}, i.e. the area above UI chrome
* (status and navigation bars, overlay action bars).
*/
public class ScrimInsetsFrameLayout extends FrameLayout {
private Drawable mInsetForeground;
private Rect mInsets;
private Rect mTempRect = new Rect();
private OnInsetsCallback mOnInsetsCallback;
public ScrimInsetsFrameLayout(Context context) {
super(context);
init(context, null, 0);
}
public ScrimInsetsFrameLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public ScrimInsetsFrameLayout(
Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context, attrs, defStyle);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
final TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.ScrimInsetsView, defStyle, 0);
if (a == null) {
return;
}
mInsetForeground = a.getDrawable(
R.styleable.ScrimInsetsView_insetForeground);
a.recycle();
setWillNotDraw(true);
}
@Override
protected boolean fitSystemWindows(Rect insets) {
mInsets = new Rect(insets);
setWillNotDraw(mInsetForeground == null);
ViewCompat.postInvalidateOnAnimation(this);
if (mOnInsetsCallback != null) {
mOnInsetsCallback.onInsetsChanged(insets);
}
return true; // consume insets
}
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
int width = getWidth();
int height = getHeight();
if (mInsets != null && mInsetForeground != null) {
int sc = canvas.save();
canvas.translate(getScrollX(), getScrollY());
// Top
mTempRect.set(0, 0, width, mInsets.top);
mInsetForeground.setBounds(mTempRect);
mInsetForeground.draw(canvas);
// Bottom
mTempRect.set(0, height - mInsets.bottom, width, height);
mInsetForeground.setBounds(mTempRect);
mInsetForeground.draw(canvas);
// Left
mTempRect.set(
0,
mInsets.top,
mInsets.left,
height - mInsets.bottom);
mInsetForeground.setBounds(mTempRect);
mInsetForeground.draw(canvas);
// Right
mTempRect.set(
width - mInsets.right,
mInsets.top, width,
height - mInsets.bottom);
mInsetForeground.setBounds(mTempRect);
mInsetForeground.draw(canvas);
canvas.restoreToCount(sc);
}
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
if (mInsetForeground != null) {
mInsetForeground.setCallback(this);
}
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (mInsetForeground != null) {
mInsetForeground.setCallback(null);
}
}
/**
* Allows the calling container to specify a callback for custom
* processing when insets change (i.e. when {@link #fitSystemWindows(Rect)}
* is called. This is useful for setting padding on UI elements
* based on UI chrome insets (e.g. a Google Map or a ListView).
* When using with ListView or GridView, remember to set
* clipToPadding to false.
*/
public void setOnInsetsCallback(OnInsetsCallback onInsetsCallback) {
mOnInsetsCallback = onInsetsCallback;
}
public static interface OnInsetsCallback {
public void onInsetsChanged(Rect insets);
}
}
그런 다음 스타일을 만들 insetForeground
수 있도록 스타일을 만듭니다 .
values / attrs.xml
<declare-styleable name="ScrimInsetsView">
<attr name="insetForeground" format="reference|color" />
</declare-styleable>
활동의 xml 파일을 업데이트하고 있는지 확인 android:fitsSystemWindows
모두 true로 설정되어 DrawerLayout
뿐만 아니라 ScrimInsetsFrameLayout
.
layout / activity_main.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<!-- The main content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Your main content -->
</LinearLayout>
<!-- The navigation drawer -->
<com.example.app.util.ScrimInsetsFrameLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/scrimInsetsFrameLayout"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/white"
android:elevation="10dp"
android:fitsSystemWindows="true"
app:insetForeground="#4000">
<!-- Your drawer content -->
</com.example.app.util.ScrimInsetsFrameLayout>
</android.support.v4.widget.DrawerLayout>
활동의 onCreate 메소드 내에서 서랍 레이아웃의 상태 표시 줄 배경색을 설정하십시오.
MainActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// ...
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
mDrawerLayout.setStatusBarBackgroundColor(
getResources().getColor(R.color.primary_dark));
}
마지막으로 앱 테마를 업데이트하여 DrawerLayout
상태 표시 줄 뒤에 있습니다.
values-v21 / styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
결과:
답변
최신 Android 지원 라이브러리 (rev 22.2.0) 가 출시됨에 따라 디자인 지원 라이브러리 가 제공 되며이 부분으로 NavigationView 라는 새로운 뷰가 제공 됩니다. 따라서 ScrimInsetsFrameLayout
다른 모든 것들과 함께 우리 자신의 모든 것을하는 대신 우리는 단순히이 견해를 사용하고 모든 것이 우리를 위해 수행됩니다.
예
1 단계
추가 Design Support Library
사용자에게 build.gradle
파일
dependencies {
// Other dependencies like appcompat
compile 'com.android.support:design:22.2.0'
}
2 단계
에 추가 NavigationView
하십시오 DrawerLayout
:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"> <!-- this is important -->
<!-- Your contents -->
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/navigation_items" /> <!-- The items to display -->
</android.support.v4.widget.DrawerLayout>
3 단계
새 메뉴 리소스를 /res/menu
만들고 표시하려는 항목과 아이콘을 추가하십시오.
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_action_home"
android:title="Home" />
<item
android:id="@+id/nav_example_item_1"
android:icon="@drawable/ic_action_dashboard"
android:title="Example Item #1" />
</group>
<item android:title="Sub items">
<menu>
<item
android:id="@+id/nav_example_sub_item_1"
android:title="Example Sub Item #1" />
</menu>
</item>
</menu>
4 단계
NavigationView를 시작하고 클릭 이벤트를 처리하십시오.
public class MainActivity extends AppCompatActivity {
NavigationView mNavigationView;
DrawerLayout mDrawerLayout;
// Other stuff
private void init() {
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
mDrawerLayout.closeDrawers();
menuItem.setChecked(true);
switch (menuItem.getItemId()) {
case R.id.nav_home:
// TODO - Do something
break;
// TODO - Handle other items
}
return true;
}
});
}
}
5 단계
설정해야합니다 android:windowDrawsSystemBarBackgrounds
및 android:statusBarColor
에 values-v21
그렇지 않으면 서랍은 상태 표시 ‘에서’표시 증언 요구 무산
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Other attributes like colorPrimary, colorAccent etc. -->
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
선택적 단계
NavigationView에 헤더를 추가하십시오. 이를 위해 단순히 새 레이아웃을 만들고 app:headerLayout="@layout/my_header_layout"
NavigationView에 추가 하십시오.
결과
노트
- 강조 색은 비아 정의 된 색상 사용
colorPrimary
속성을 - 목록 항목은 사용 색상 통해 정의
textColorPrimary
속성을 - 아이콘 을 사용하는 색상 의 비아 정의
textColorSecondary
속성을
또한 확인할 수 있습니다 예를 들어, 응용 프로그램 에 의해 크리스 Banes (등 디자인 지원 라이브러리의 일부인 다른 새로운 전망과 함께 NavigationView을 강조 FloatingActionButton , TextInputLayout , 플로팅 작업 , TabLayout 등)
답변
값 v21 스타일 또는 테마 xml에서 작동하면이 속성을 사용해야합니다.
<item name="android:windowTranslucentStatus">true</item>
그 마법을 만들어!
답변
위의 모든 접근 방식은 정확하며 작동 중일 수 있습니다. 위의 가이드에 따라 실무 데모를 만들고 2.x에서 5.x로 테스트했습니다.
Github 에서 복제 할 수 있습니다
놀아야 할 중요한 것은 주요 활동입니다.
toolbar = (Toolbar) findViewById(R.id.toolbar);
res = this.getResources();
this.setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
ScrimInsetsFrameLayout scrimInsetsFrameLayout = (ScrimInsetsFrameLayout)
findViewById(R.id.linearLayout);
scrimInsetsFrameLayout.setOnInsetsCallback(this);
}
다시 전화
@Override
public void onInsetsChanged(Rect insets) {
Toolbar toolbar = this.toolbar;
ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams)
toolbar.getLayoutParams();
lp.topMargin = insets.top;
int top = insets.top;
insets.top += toolbar.getHeight();
toolbar.setLayoutParams(lp);
insets.top = top; // revert
}
절대적으로 V21의 테마는 마법을 수행합니다.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- API 21 theme customizations can go here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/accent_material_light</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
그리고 ScrimInsetsFrameLayout
이제 새로운 디자인 지원 라이브러리를 통해 더욱 쉽게 사용할 수 있습니다.
compile 'com.android.support:design:22.2.0'
@Chris Banes https://github.com/chrisbanes/cheesesquare 에서 복제
답변
여기에 언급 된 모든 답변이 너무 오래되고 길었습니다. 최신 Navigationview와 함께 작동하는 가장 좋고 짧은 솔루션은
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
try {
//int currentapiVersion = android.os.Build.VERSION.SDK_INT;
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP){
// Do something for lollipop and above versions
Window window = getWindow();
// clear FLAG_TRANSLUCENT_STATUS flag:
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// add FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag to the window
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
// finally change the color to any color with transparency
window.setStatusBarColor(getResources().getColor(R.color.colorPrimaryDarktrans));}
} catch (Exception e) {
Crashlytics.logException(e);
}
}
서랍을 열면 상태 표시 줄 색상이 투명으로 변경됩니다.
이제 서랍을 닫을 때 상태 표시 줄 색을 다시 어둡게 변경해야 하므로이 방법으로 할 수 있습니다.
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
try {
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP){
// Do something for lollipop and above versions
Window window = getWindow();
// clear FLAG_TRANSLUCENT_STATUS flag:
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// add FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag to the window
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
// finally change the color again to dark
window.setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));}
} catch (Exception e) {
Crashlytics.logException(e);
}
}
그런 다음 기본 레이아웃에서 한 줄을 추가하십시오.
android:fitsSystemWindows="true"
서랍 레이아웃은 다음과 같습니다
<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:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
탐색보기는 다음과 같습니다
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/drawer"
/>
나는 그것을 테스트하고 완전히 작동했습니다. 누군가에게 도움이되기를 바랍니다. 이것은 최선의 접근 방법은 아니지만 매끄럽게 작동하고 구현하기 쉽습니다. 도움이된다면 표시하십시오. 행복한 코딩 🙂
답변
디자인 지원 라이브러리를 사용하고 있습니다. 그리고 사용자 정의 테마를 사용하여 탐색 창을 열 때 투명 상태 표시 줄을 달성했습니다.
<style name="NavigationStyle" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryColorDark</item>
<!-- To Make Navigation Drawer Fill Status Bar and become Transparent Too -->
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
마지막으로 매니페스트 파일에 테마 추가
<activity
........
........
android:theme="@style/NavigationStyle">
</activity>
android:fitsSystemWindows="true"
“DrawerLayout”에서 속성을 사용하는 것을 잊지 마십시오