appcompat v21 Material 设计问题：片段覆盖内容和工具栏

Question

我按照http://android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html使用了工具栏，没有fragment，完美，但是当我使用fragment时，fragment总是覆盖内容，显示fragment时看不到工具栏。

画面：

并且当我从当前 activity 启动另一个 activity 时，新 activity 中的工具栏图标没有显示。屏幕：

我使用 Android 支持库 21.0.3.

和MainActivity中的代码class:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);

    mLeftDrawerList = (ListView) findViewById(R.id.left_drawer);
    mToolbar = (Toolbar) findViewById(R.id.toolbar);
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
    mNavigationDrawerAdapter=new ArrayAdapter<String>( MyActivity.this, android.R.layout.simple_list_item_1, data);
    mLeftDrawerList.setAdapter(mNavigationDrawerAdapter);

    if (mToolbar != null) {
        mToolbar.setTitle("Home");
        setSupportActionBar(mToolbar);
    }
    initDrawer();


    final FragmentManager fragementMgr = getSupportFragmentManager();
    FragmentTransaction transaction = fragementMgr.beginTransaction();
    transaction.add(R.id.fragment_container, new MyFragment());
    transaction.commit();
}

布局xml:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"     
    tools:context=".MainActivity"
    android:layout_width="match_parent"
    android:id="@+id/drawerLayout"
    android:layout_height="match_parent">

    <!-- activity view -->
    <LinearLayout
        android:layout_width="match_parent"
        android:background="#fff"
        android:layout_height="match_parent">

        <include layout="@layout/toolbar" />
        <FrameLayout android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <!-- navigation drawer -->
    <RelativeLayout
        android:layout_gravity="left|start"
        android:layout_width="match_parent"
        android:background="#fff"
        android:layout_height="match_parent">

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="#eee"
            android:background="#fff"
            android:dividerHeight="1dp" />
    </RelativeLayout>

</android.support.v4.widget.DrawerLayout>

MyFragment 中的代码：

public class MyFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment, container, false);
        final Button button = (Button) view.findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                // Perform action on click
                Intent intent = new Intent(getActivity(), DetailActivity.class);
                startActivity(intent);
            }
        });

        // Inflate the layout for this fragment
        return view;
    }

}

片段布局xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TextView android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/hello_fragment"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:layout_gravity="top"
                    android:textSize="18sp"
                    android:id="@+id/text"/>
    <Button
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:layout_below="@+id/text"
     android:text="@string/open"
     android:id="@+id/button"/>
</RelativeLayout>

DetailActivity中的代码class： public class DetailActivity 扩展了 ActionBarActivity {

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

详细信息布局 activity:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".DetailActivity">

    <include layout="@layout/toolbar" />
    <TextView
                android:layout_width="wrap_content"
                android:textColor="#000"
                android:text="Detail Activity Content"
                android:layout_height="wrap_content" />

</LinearLayout>

谁能帮帮我？非常感谢！

更新：我根据m iav的回复更新了main activity的代码和布局

新屏幕现在是空白的，并进行了更改：

Answer 1

这应该是您的主要布局。

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"     
    tools:context=".MainActivity"
    android:layout_width="match_parent"
    android:id="@+id/drawerLayout"
    android:layout_height="match_parent">

    <!-- activity view -->
    <LinearLayout
        android:layout_width="match_parent"
        android:background="#fff"
        android:layout_height="match_parent">

        <include layout="@layout/toolbar" />

        <FrameLayout android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <!-- navigation drawer -->
    <RelativeLayout
        android:layout_gravity="left|start"
        android:layout_width="match_parent"
        android:background="#fff"
        android:layout_height="match_parent">

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="#eee"
            android:background="#fff"
            android:dividerHeight="1dp" />
    </RelativeLayout>

</android.support.v4.widget.DrawerLayout>

这应该是您对新片段的调用：

transaction.add(R.id.fragment_container, new MyFragment())
transaction.commit();

关于你的第二个问题，导航抽屉不能在不同的活动之间共享。您必须使用新的 Fragment 并保持您现在正在使用的 Activity。

Answer 2

toolbar 是布局中的一个视图，你可以像 textview 一样看到它，现在它是一个覆盖你的片段的 textview，你可以在它下面使用 attrbibu

Answer 3

所以最后在检查了示例：MaterialEverywhere 之后，我提出了更新布局的解决方案：

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"     
    tools:context=".MainActivity"
    android:layout_width="match_parent"
    android:id="@+id/drawerLayout"
    android:layout_height="match_parent">

    <!-- activity view -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include 
            android:id="@+id/toolbar" 
            layout="@layout/toolbar" />
        <FrameLayout android:id="@+id/fragment_container"
            android:layout_below="@id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </RelativeLayout>

    <!-- navigation drawer -->
    <RelativeLayout
        android:layout_gravity="left|start"
        android:layout_width="match_parent"
        android:background="#fff"
        android:layout_height="match_parent">

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="#eee"
            android:background="#fff"
            android:dividerHeight="1dp" />
    </RelativeLayout>

</android.support.v4.widget.DrawerLayout>

诀窍在于工具栏和内容框架的父级布局。我使用 RelativeLayout 而不是 LinearLayout。它现在按预期工作。

总之，我发现从 SDK 进行这种更改过于复杂，更改太多，并且每个更改都可能导致问题。开发人员拥有干净的 API 并减少所有这些调整会更好。

appcompat v21 Material 设计问题：片段覆盖内容和工具栏

Issue with appcompat v21 Material Design: Fragment overlay content and toolbar

android

android-fragments

android-appcompat

android-toolbar