android 沉浸式体验界面开发

整理一下沉浸式界面与自定义actionbar的解决方案

个人觉得 在一些内容浏览页面使用沉浸式页面会得到很好的体验

废话不多说

styles.xml

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:textColorPrimary">@color/textColorPrimary</item>
        <item name="android:textColorSecondary">@color/textColorSecondary</item>
        <item name="android:textColorPrimaryInverse">@color/textColorPrimaryInverse</item>
        <item name="android:textColorSecondaryInverse">@color/textColorSecondaryInverse</item>
        <item name="android:windowBackground">@color/windowBackground</item>
    </style>

    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:windowActionBarOverlay">false</item>
    </style>

    <style name="AppTheme.TranslucentStatus" parent="AppTheme">
        <item name="android:windowActionBarOverlay">true</item>
    </style>

styles-19.xml

    <style name="AppTheme.TranslucentStatus" parent="AppTheme">
        <!-- 沉浸式体验 透明状态栏-->
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowActionBarOverlay">true</item>
    </style>

属性解释
android:windowActionBarOverlay 控制状态栏是否覆盖内容

android:windowTranslucentStatus 控制是否采用透明状态栏 在>=19(即android 4.4)版本中生效

baseActivity.java

private ActionBarHelper actionBarHelper;

    @Override
    public void setContentView(int layoutResID) {
        setContentView(layoutResID, true);
    }

    /**
     * @param layoutResID layout资源id
     * @param customTitle 是否添加自定义顶bar
     */
    public void setContentView(int layoutResID, boolean customTitle) {
        if (customTitle) {
            actionBarHelper = new ActionBarHelper(this, layoutResID);
            super.setContentView(actionBarHelper.getContentView());
        } else {
            super.setContentView(layoutResID);
        }
        AutoInjector.inject(this, AppCompatActivity.class, this);
    }

 

app_custom_title.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/app_primary_color">

    <android.support.v7.widget.Toolbar
        android:id="@+id/id_tool_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:visibility="gone"
        app:navigationIcon="?attr/homeAsUpIndicator">

        <TextView
            android:id="@+id/del"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerInParent="true"
            android:background="?attr/selectableItemBackground"
            android:padding="10dp"
            android:text="DEL" />

        <TextView
            android:id="@+id/add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_toLeftOf="@id/del"
            android:background="?attr/selectableItemBackground"
            android:padding="10dp"
            android:text="ADD" />
    </android.support.v7.widget.Toolbar>

    <RelativeLayout
        android:id="@+id/rlCustomTitle"
        android:layout_width="match_parent"
        android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:enabled="false"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/btnCustomTitleLeft"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="5dp"
            android:background="?attr/selectableItemBackground"
            android:padding="10dp"
            android:src="@drawable/app_custom_title_back" />

        <TextView
            android:id="@+id/tvCustomTitleLeft"
            android:layout_width="60dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:text="取消"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:visibility="gone" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="horizontal">

            <RelativeLayout
                android:id="@+id/rlCustomTitleUserInfo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"
                android:layout_gravity="center">

                <chasingtimes.com.pictureservice.fresco.TImageView
                    android:id="@+id/rvCustomTitleHead"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:layout_alignParentLeft="true"
                    android:scaleType="centerCrop"
                    fresco:overlayImage="@drawable/app_default_avatar" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="10dp"
                    android:layout_toRightOf="@id/rvCustomTitleHead"
                    android:gravity="center_vertical"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <TextView
                            android:id="@+id/tvCustomTitleName"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:maxEms="6"
                            android:singleLine="true"
                            android:text="一年二班"
                            android:textColor="@color/white"
                            android:textSize="14sp" />

                        <ImageView
                            android:id="@+id/tvCustomTitleGender"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="6dp"
                            android:gravity="center" />
                    </LinearLayout>

                    <TextView
                        android:id="@+id/tvCustomTitleInfo"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="5dp"
                        android:maxEms="12"
                        android:singleLine="true"
                        android:text="星座 大学"
                        android:textColor="@color/white"
                        android:textSize="12sp" />
                </LinearLayout>
            </RelativeLayout>

            <TextView
                android:id="@+id/tvCustomTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center"
                android:maxWidth="150dp"
                android:padding="5dp"
                android:singleLine="true"
                android:textColor="@color/white"
                android:textSize="17sp"
                android:visibility="gone" />
        </LinearLayout>


        <ImageButton
            android:id="@+id/btnCustomTitleRightFirst"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"
            android:background="?attr/selectableItemBackground"
            android:visibility="gone" />

        <TextView
            android:id="@+id/tvCustomTitleRight"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:text="完成"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:visibility="gone" />


        <ImageView
            android:id="@+id/icon_custom_title_right_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"
            android:src="@drawable/app_custom_title_white_solid_arrow"
            android:visibility="gone" />

        <android.support.design.widget.TabLayout
            android:id="@+id/custom_tab"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:visibility="gone"
            app:tabGravity="center"
            app:tabIndicatorColor="@color/white"
            app:tabIndicatorHeight="3dp"
            app:tabSelectedTextColor="@color/app_font_color4"
            app:tabTextAppearance="@style/custom_tab_text"
            app:tabTextColor="@color/app_font_color4_half" />
    </RelativeLayout>
</FrameLayout>

ActionBarHelper.java

import android.content.res.TypedArray;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.TextView;

import com.chasingtimes.taste.R;

/**
 * Created by sunche on 15/9/25.
 */
public class ActionBarHelper {
    public static final int ACTIONBAR_TYPE_TOOLBAR = 0;
    public static final int ACTIONBAR_TYPE_CUSTOM = 1;

    private int mType = ACTIONBAR_TYPE_CUSTOM;

    private AppCompatActivity mContext;

    private LayoutInflater mInflater;

    //最外层包装
    private FrameLayout mContentView;

    //用户定义的view
    private View mUserView;

    //自定义title
    private FrameLayout mCustomTitle;

    //toolbar
    private Toolbar mToolBar;

    private TextView tvTitle;
    private ImageButton btnTitleLeft, btnTitleRight;
    private TextView tvTitleLeft, tvTitleRight;

    //顶bar是否悬浮在窗口之上
    private boolean mWindowActionBarOverlay = false;
    //是否是用透明状态栏
    private boolean mWindowTranslucentStatus = false;

    public ActionBarHelper(AppCompatActivity context, int layoutId) {
        this.mContext = context;
        mInflater = LayoutInflater.from(mContext);
        mUserView = mInflater.inflate(layoutId, null);
        initFlag();
        //初始化外层容器
        initContainerView();
        //组装title和内容
        InstallViews();
        titleType();
    }

    public ActionBarHelper(AppCompatActivity context, View view) {
        this.mContext = context;
        mInflater = LayoutInflater.from(mContext);
        mUserView = view;
        initFlag();
        //初始化外层容器
        initContainerView();
        //组装title和内容
        InstallViews();
        titleType();
    }

    private void initFlag() {
        //获取主题中定义的属性
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            TypedArray typedArray = mContext.getTheme().obtainStyledAttributes(new int[]{android.R.attr.windowActionBarOverlay, android.R.attr.windowTranslucentStatus});
            mWindowActionBarOverlay = typedArray.getBoolean(0, false);
            mWindowTranslucentStatus = typedArray.getBoolean(1, false);
            typedArray.recycle();
        } else {
            TypedArray typedArray = mContext.getTheme().obtainStyledAttributes(new int[]{R.attr.windowActionBarOverlay});
            mWindowActionBarOverlay = typedArray.getBoolean(0, false);
            typedArray.recycle();
        }
    }

    private void initContainerView() {
        //直接创建一个帧布局，作为视图容器的父容器
        mContentView = new FrameLayout(mContext);
        mContentView.setBackgroundResource(R.color.transparent);
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);
        mContentView.setLayoutParams(params);

    }

    private void InstallViews() {
        //通过inflater获取customTitle的布局文件
        mCustomTitle = (FrameLayout) mInflater.inflate(R.layout.app_custom_title, null);
        mToolBar = (Toolbar) mCustomTitle.findViewById(R.id.id_tool_bar);

        //设置customTitle边距
        int statusBarHeight = getStatusBarHeight();
        int customTitlePaddingTop = 0;
        if (mWindowTranslucentStatus) {//如果是透明状态栏，则需要设置间距
            customTitlePaddingTop += statusBarHeight;
        }
        mCustomTitle.setPadding(0, customTitlePaddingTop, 0, 0);

        //设置内容边距
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        int toolBarSize = (int) mContext.getResources().getDimension(R.dimen.abc_action_bar_default_height_material);
        int topSize = toolBarSize + customTitlePaddingTop;//顶部高度 customTitle+status
        int contentPaddingTop = mUserView.getPaddingTop();
        int contentPaddingLeft = mUserView.getPaddingLeft();
        int contentPaddingRight = mUserView.getPaddingRight();
        int contentPaddingBottom = mUserView.getPaddingBottom();
        int topMargin = 0;
        if (mWindowActionBarOverlay) {//如果是悬浮状态栏，需要设置内容的内间距
            contentPaddingTop += topSize;
        } else {//如果不是悬浮状态栏，则需要设置内容外边距
            topMargin += topSize;
        }
        params.topMargin = topMargin;
        mUserView.setPadding(contentPaddingLeft, contentPaddingTop, contentPaddingRight, contentPaddingBottom);

        //按顺序放入父容器
        mContentView.addView(mUserView, params);
        mContentView.addView(mCustomTitle, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
    }

    public int getStatusBarHeight() {
        int result = 0;
        int resourceId = mContext.getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = mContext.getResources().getDimensionPixelSize(resourceId);
        }
        if (result == 0) {
            result = (int) mContext.getResources().getDimension(R.dimen.translucentstatus_top_padding);
        }
        return result;
    }

    private void titleType() {
        switch (mType) {
            case ACTIONBAR_TYPE_CUSTOM:
                mCustomTitle.findViewById(R.id.id_tool_bar).setVisibility(View.GONE);
                setCustomTitleLeftButton(R.drawable.app_custom_title_back, new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mContext.finish();
                    }
                });
                break;
            case ACTIONBAR_TYPE_TOOLBAR:
            default:
                mCustomTitle.findViewById(R.id.rlCustomTitle).setVisibility(View.GONE);
                mContext.setSupportActionBar(mToolBar);
                break;
        }
    }

    public FrameLayout getContentView() {
        return mContentView;
    }

    public Toolbar getToolBar() {
        return mToolBar;
    }

    public void setCustomTitleBackgroundColor(int backgroundColor) {
        mCustomTitle.setBackgroundColor(backgroundColor);
    }

    public void setCustomTitleText(String strTitle) {
        if (tvTitle == null) {
            tvTitle = (TextView) mCustomTitle.findViewById(R.id.tvCustomTitle);
        }
        tvTitle.setVisibility(View.VISIBLE);
        tvTitle.setText(strTitle);
    }

    public void setCustomTitleText(int titleResId) {
        if (tvTitle == null) {
            tvTitle = (TextView) mCustomTitle.findViewById(R.id.tvCustomTitle);
        }
        tvTitle.setVisibility(View.VISIBLE);
        tvTitle.setText(titleResId);
    }

    public void setCustomTitleRightText(String strText, View.OnClickListener listener) {
        if (tvTitleRight == null) {
            tvTitleRight = (TextView) mCustomTitle.findViewById(R.id.tvCustomTitleRight);
        }
        tvTitleRight.setText(strText);
        tvTitleRight.setVisibility(View.VISIBLE);
        tvTitleRight.setOnClickListener(listener);
    }

    public void setCustomTitleRightButton(int imgResource, View.OnClickListener listener) {
        if (btnTitleRight == null) {
            btnTitleRight = (ImageButton) mCustomTitle.findViewById(R.id.btnCustomTitleRightFirst);
        }
        btnTitleRight.setVisibility(View.VISIBLE);
        btnTitleRight.setImageResource(imgResource);
        btnTitleRight.setOnClickListener(listener);
    }

    public void setCustomTitleLeftText(String strText, View.OnClickListener listener) {
        if (tvTitleLeft == null) {
            tvTitleLeft = (TextView) mCustomTitle.findViewById(R.id.tvCustomTitleLeft);
        }
        tvTitleLeft.setText(strText);
        tvTitleLeft.setVisibility(View.VISIBLE);
        tvTitleLeft.setOnClickListener(listener);
    }

    public void setCustomTitleLeftButton(int imgResource, View.OnClickListener listener) {
        if (btnTitleLeft == null) {
            btnTitleLeft = (ImageButton) mCustomTitle.findViewById(R.id.btnCustomTitleLeft);
        }
        btnTitleLeft.setVisibility(View.VISIBLE);
        btnTitleLeft.setImageResource(imgResource);
        btnTitleLeft.setOnClickListener(listener);
    }

    public ImageButton getCustomTitleRightButton() {
        if (btnTitleRight == null) {
            btnTitleRight = (ImageButton) mCustomTitle.findViewById(R.id.btnCustomTitleRightFirst);
        }
        return btnTitleRight;
    }

    public void setCommonTopBar(int titleResId) {
        setCustomTitleText(titleResId);
        setCustomTitleBackground(R.color.app_primary_color);
        setCustomTitleLeftButton(R.drawable.app_custom_title_back, new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mContext.finish();
            }
        });
    }

    public void setCommonTopBar(String title) {
        setCustomTitleText(title);
        setCustomTitleBackground(R.color.app_primary_color);
        setCustomTitleLeftButton(R.drawable.app_custom_title_back, new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mContext.finish();
            }
        });
    }

    public void setCustomTitleBackground(int backgroundResource) {
        mCustomTitle.setBackgroundResource(backgroundResource);
    }

    public TextView getCustomTitleView() {
        return tvTitle;
    }

    public TextView getCustomTitleLeftText() {
        if (tvTitleLeft == null) {
            tvTitleLeft = (TextView) mCustomTitle.findViewById(R.id.tvCustomTitleLeft);
        }
        return tvTitleLeft;
    }

    public TextView getCustomTitleRightText() {
        if (tvTitleRight == null) {
            tvTitleRight = (TextView) mCustomTitle.findViewById(R.id.tvCustomTitleRight);
        }
        return tvTitleRight;
    }
}

如遇到缺少资源请自行补充吧 也可以在下面留言 我会不定期查看