如何使用Android中的MikePenz库在Custom工具栏中实现Overlay主题？

时间：2016-01-20 07:10:44

标签： android android-layout navigation-drawer android-toolbar

我使用Mike Penz库from here作为带有自定义工具栏的导航抽屉。 我想要覆盖工具栏。我正在使用Android Studio，而且我是Android Studio新手。

以下是我的实施方式：

的build.gradle 

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
    compile('com.mikepenz:materialdrawer:4.6.4@aar') {
        transitive = true
    }
}

styles.xml 

<style name="AppTheme" parent="AppTheme.Base">
</style>

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowActionBarOverlay">true</item>
    <item name="colorPrimary">#FF0000</item>      <!-- Toolbar -->
    <item name="colorPrimaryDark">#0000FF</item>  <!-- Status bar -->

    <item name="colorAccent">#00000000</item>

    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>

    <item name="android:windowContentTransitions" tools:targetApi="21">true</item>

    <item name="android:windowAllowEnterTransitionOverlap" tools:targetApi="21">true</item>
    <item name="android:windowAllowReturnTransitionOverlap" tools:targetApi="21">true</item>
    <item name="android:windowSharedElementEnterTransition" tools:targetApi="21">@android:transition/move</item>
    <item name="android:windowSharedElementExitTransition" tools:targetApi="21">@android:transition/move</item>

</style>

toolbar.xml 

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal"
    tools:targetApi="21">

    <LinearLayout
        android:id="@+id/linear1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text 1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text 2" />

    </LinearLayout>

    <ImageView
        android:id="@+id/toolbar_search_imgView"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:contentDescription="xyz"
        android:src="@drawable/ic_launcher" />

    <ImageButton
        android:id="@+id/toolbar_home_imgBtn"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:contentDescription="xyz"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

活动布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">

    <include android:id="@+id/my_toolbar"
        layout="@layout/toolbar"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"/>

</LinearLayout>

MyActivity 

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;

import com.mikepenz.materialdrawer.Drawer;

import java.util.ArrayList;

public class MyActivityextends AppCompatActivity {

    private Toolbar mToolbar;
    private ArrayList<Integer> mBgIds;
    private ArrayList<Integer> mCImgIds;
    private RecyclerView restViews;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.rest_home);
        initViews();
        drawerSetUp();
    }

    private Context getContext(){
        return MyActivity.this;
    }

    private void initViews(){
        mToolbar= (Toolbar) findViewById(R.id.my_toolbar);

        restViews= (RecyclerView) findViewById(R.id.recycler_list_view);
        restViews.setHasFixedSize(true);

        mLayoutManager= new LinearLayoutManager(getContext());
        restViews.setLayoutManager(mLayoutManager);

        mBgIds= new ArrayList<Integer>();
        mCImgIds= new ArrayList<Integer>();

        mBgIds.add(R.drawable.green_bg_c);
        mBgIds.add(R.drawable.earth_c);
        mBgIds.add(R.drawable.green_bg_c);
        mBgIds.add(R.drawable.earth_c);
        mBgIds.add(R.drawable.green_bg_c);
        mBgIds.add(R.drawable.earth_c);

        mCImgIds.add(R.drawable.ic_launcher);
        mCImgIds.add(R.drawable.ic_launcher);
        mCImgIds.add(R.drawable.ic_launcher);
        mCImgIds.add(R.drawable.ic_launcher);
        mCImgIds.add(R.drawable.ic_launcher);
        mCImgIds.add(R.drawable.ic_launcher);

        mAdapter= new RSIAdapter(getContext(),mBgIds, mCImgIds);
        restViews.setAdapter(mAdapter);
    }

    public void drawerSetUp(){
        Drawer lDrawer = new DrawerBuilder()
            .withActivity(this)
            .withDisplayBelowStatusBar(true)
            .withToolbar(mToolbar)
            .addDrawerItems(
                    new PrimaryDrawerItem().withName("Home")
                            .withIcon(R.drawable.ic_launcher),
                    new PrimaryDrawerItem().withName("New")
                            .withIcon(R.drawable.ic_launcher),
                    new SecondaryDrawerItem().withName("New1")
                            .withIcon(R.drawable.ic_launcher),
                    new SecondaryDrawerItem().withName("New2")
                            .withIcon(R.drawable.ic_launcher)
            )
            .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
                @Override
                public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {
                    switch (position) {
                        case 0:
                            Toast.makeText(mContext, "0", Toast.LENGTH_SHORT).show();
                            break;
                        case 1:
                            Toast.makeText(mContext, "1", Toast.LENGTH_SHORT).show();
                            break;

                        default:
                            Toast.makeText(mContext, "P: " + position, Toast.LENGTH_SHORT).show();
                            break;
                    }

                    return false;
                }
            }).build();
    lDrawer .getActionBarDrawerToggle().setDrawerIndicatorEnabled(true);
    }
}

有人可以告诉我，如何在RecyclerView上制作工具栏（透明背景）叠加/重叠？

1 个答案:

答案 0 :(得分：1)

MaterialDrawer 允许您定义给定的活动应该是全屏，这告诉库不要向您的布局添加所需的边距和填充。因此，您可以创建一个ui，它将位于工具栏/和/或状态栏和导航栏下方。

实现以下目标的代码：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_sample_fullscreen_dark_toolbar);

    // Handle Toolbar
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    toolbar.setBackgroundColor(Color.BLACK);
    toolbar.getBackground().setAlpha(90);
    getSupportActionBar().setTitle(R.string.drawer_item_fullscreen_drawer);

    //Create the drawer
    result = new DrawerBuilder()
            .withActivity(this)
            .withFullscreen(true)
            .addDrawerItems(
            )
            .withSavedInstance(savedInstanceState)
            .build();
}

和布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/frame_container"
        android:background="#ff4444"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/txtLabel"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Test"
            android:textSize="16sp" />
    </FrameLayout>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:layout_marginTop="@dimen/tool_bar_top_padding"
        android:elevation="4dp" />
</RelativeLayout>

如果您只希望内容低于工具栏，只需使用 FrameLayout ，它将重叠工具栏和 RecyclerView 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:paddingTop="?attr/actionBarSize"
    />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:layout_marginTop="@dimen/tool_bar_top_padding"
        android:elevation="4dp" />
</RelativeLayout>
相关问题
最新问题