Material Design风格折叠标题、沉浸式、抽屉等效果

难点:在最折叠标题的时候,要实现沉浸式效果,碰到了大问题,给toolbar设置fistsystemwindows的时候,发现不能再界面正确的显示高度,而标题上方的大图是要求沉浸式效果,由此想到办法,给toolbar设置padding距离,使其刚刚好在状态栏下放,其他控件也不需要使用fistsystemwindows属性。

个人意见:抽屉控件使用方便,但是toolbar使用非常不便,不如自定义,下拉折叠效果可以有scrollview实现。

代码如下:

 1、设置风格

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowTranslucentStatus">false</item>

    <!-- Customize your theme here. -->
</style>

2、布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                 xmlns:app="http://schemas.android.com/apk/res-auto"
                                                 android:layout_width="match_parent"
                                                 android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:statusBarScrim="@android:color/transparent"
            app:title="333">
            <!--要在这里设置标题-->

            <ImageView
                android:id="@+id/ivImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/t1"
                android:scaleType="centerCrop"
                android:transitionName="transition_book_img"
                android:visibility="visible"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:gravity="center_vertical"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                >

            </android.support.v7.widget.Toolbar>


        </android.support.design.widget.CollapsingToolbarLayout>


    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="@color/b2"/>

                <android.support.design.widget.TextInputLayout
                    android:id="@+id/textInputEmail"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp">

                    <EditText
                        android:id="@+id/edit_text_email"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="hint_username"
                        android:inputType="textEmailAddress"/>
                </android.support.design.widget.TextInputLayout>

                <TextView
                    android:id="@+id/t1"
                    android:layout_width="match_parent"
                    android:layout_height="600dp"
                    android:background="@color/b"/>

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@color/j"></LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:background="@color/b2"></LinearLayout>
    </android.support.v4.widget.DrawerLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="right|bottom"/>
</android.support.design.widget.CoordinatorLayout>

3、代码:

public class EFAActivity extends AppCompatActivity {

    private Context mContext;

    Toolbar mToolbar;

    TextView mTextView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //这句话是沉浸式状态栏的基础
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        //导航栏透明,可以不加
//        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        setContentView(R.layout.e_fa);
        mContext = this;
        //测试Snackbar
        mTextView = (TextView) findViewById(R.id.t1);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        //设置高度的方法没有起作用,反而使得mToolbar完全已到顶部;
//        ViewGroup.LayoutParams layoutParams = mToolbar.getLayoutParams();
//        layoutParams.height=getStatueBarHeight();
//        mToolbar.setLayoutParams(layoutParams);

        //mToolbar在沉浸式中,需要固定在状态栏下部,能折叠的上方图片需要显示到状态栏
        ViewGroup.MarginLayoutParams marginLayoutParams= (ViewGroup.MarginLayoutParams) mToolbar.getLayoutParams();
        marginLayoutParams.topMargin = getStatueBarHeight();
        mToolbar.setLayoutParams(marginLayoutParams);
//显示返回键
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem menuItem) {
                String msg = "";
                switch (menuItem.getItemId()) {
                    case R.id.i1:
                        msg += "Click 1";
                        break;
                    case R.id.i2:
                        msg += "Click 2";
                        break;
                    case R.id.i3:
                        msg += "Click 3";
                        break;
                    default:
                        break;
                }
                if (!msg.equals("")) {
                    QiuUtil.ShortToast("" + msg);
                }
                return true;
            }
        });
        mTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(mToolbar, "test", Snackbar.LENGTH_SHORT).setAction("ca", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        QiuUtil.ShortToast("被点击了按钮");
                    }
                }).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    private int getStatueBarHeight() {//拿取状态栏的高度
        int identifier = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (identifier > 0) {
            return (int) getResources().getDimension(identifier);
        }
        return 0;
    }

}

4、menu_main文件:

<menu 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"
    >
    <item
        android:id="@+id/i1"
        android:icon="@drawable/ee_1"
        android:orderInCategory="100"
        android:title="第一个"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/i2"
        android:icon="@drawable/ee_2"
        android:orderInCategory="100"
        android:title="第2个"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/i3"
        android:icon="@drawable/ee_3"
        android:orderInCategory="100"
        android:title="第3个"
        app:showAsAction="never"/>
</menu>




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值