以下是我的所有相关代码:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Replace the default action bar -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:elevation="5dp"
android:background="?attr/colorPrimary" />
<!-- The main content view -->
<fragment 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/fragment"
android:name="com.***.***.***.MainActivityFragment"
tools:layout="@layout/fragment_main" android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<ListView android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
样式:
TEST.overlay.initOverlay();
TEST.overlay = (function () {
function Overlay() {
var _this = this;
this.initOverlay = function(){
$('.popup-link').on('click', function(){
var contentHTML = $(this).data('overlay-container');
_this.open(false, $('.'+contentHTML).html(), $(this), {});
});
};
this.open = function(modal, contentHTML, target, options ) {
$.magnificPopup.open({
tClose: options.closelabel,
tLoading: options.loadinglabel,
modal: modal,
preloader: false,
midClick: true,
mainClass: 'mfp-fade',
removalDelay: 300,
closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>',
items: {
src: contentHTML,
type: 'inline'
},
callbacks: {
open: function () {
target.trigger('overlayOpen');
},
close: function () {
target.trigger('overlayClose');
}
}
});
};
this.close = function() {
$.magnificPopup.close();
};
}
return new Overlay();
}());
XML:
<a href="javascript:;" class="popup-link" data-overlay-container="overlay-content-1">
<img src="http://lorempixel.com/300/150/food/" alt="">
</a>
结果如下:
答案 0 :(得分:12)
DrawerLayout
只允许2个孩子。来自documentation:
- 主要内容视图(上面的FrameLayout)必须是 DrawerLayout中的第一个子节点,因为XML顺序意味着 z-ordering和抽屉必须位于内容之上。
- 主要 内容视图设置为匹配父视图的宽度和高度, 因为它代表导航抽屉时的整个UI 隐藏。
尝试将Toolbar
和fragment
包裹在FrameLayout
。
答案 1 :(得分:11)
可能的解决方案是将工具栏移到DrawerLayout之外,并将这两个放在框架布局中。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:paddingTop="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<fragment
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/fragment"
android:name="com.***.***.***.MainActivityFragment"
tools:layout="@layout/fragment_main" android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<ListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
<!-- Replace the default action bar -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:elevation="5dp"
android:background="?attr/colorPrimary" />
</FrameLayout>