Day12 design

一.NavigationView侧滑菜单

1.布局文件

根标签是Drawerlayout，第一部分是主页面布局，第二部分是NavigationView侧滑抽屉布局，其中设置了三个属性

• android:layout_gravity=“left” 拉出的方向
• app:headerLayout="@layout/header_layout" 二哈图片头布局
• app:menu="@menu/menu" 下面的菜单项

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".design.NavigationViewActivity">
    <!--第一部分:主布局-->
    <LinearLayout
        android:background="#000"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView

            android:text="我是一个文本"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></TextView>
    </LinearLayout>
    <!--第二部分:侧滑抽题-->
    <!--android:layout_gravity="left" 拉出的方向-->
    <!--app:headerLayout="@layout/header_layout" 二哈图片头布局-->
    <!--app:menu="@menu/menu" 下面的菜单项-->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation"
        app:menu="@menu/menu"
        app:headerLayout="@layout/header_layout"
        android:layout_gravity="left"
        android:layout_width="300dp"
        android:layout_height="match_parent"></com.google.android.material.navigation.NavigationView>
    
</androidx.drawerlayout.widget.DrawerLayout>

2.二哈头布局文件

<?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="260dp">
    <ImageView
        android:scaleType="centerCrop"
        android:src="@drawable/erha"
        android:layout_width="match_parent"
        android:layout_height="230dp"></ImageView>
    <TextView
        android:background="#3F51B5"
        android:text="二哈"
        android:textColor="#fff"
        android:textSize="20sp"
        android:textAlignment="center"
        android:layout_width="match_parent"
        android:layout_height="30dp"></TextView>

</LinearLayout>

3.menu菜单项

下面的菜单项，通过group分组可以实现分割线，但是必须给id

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <!--通过group分组设置id完成分割线-->
    <group android:checkableBehavior="single" android:id="@+id/group1">
        <item android:id="@+id/item1" android:title="二哈1" android:icon="@drawable/love"></item>
        <item android:id="@+id/item2" android:title="二哈1"></item>
    </group>
    <group android:checkableBehavior="single" android:id="@+id/group2">
        <item android:id="@+id/item3" android:title="二哈1" android:icon="@drawable/love"></item>
        <item android:id="@+id/item4" android:title="二哈1"></item>
        <item android:id="@+id/item5" android:title="二哈1"></item>
    </group>
</menu>

4.menu菜单项的点击事件

public class NavigationViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation_view);
        NavigationView navigationView = findViewById(R.id.navigation);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()){
                    case R.id.item1:
                        break;
                    case R.id.item2:
                        break;
                    case R.id.item3:
                        break;
                        
                }
                return true;
            }
        });
    }
}

二.FloatingActionButton悬浮按钮

1.布局文件

属性介绍：

• android:src：FAB中显示的图标.
• app:backgroundTint：正常的背景颜色 ，selector选择器
• app:rippleColor：按下时的背景颜色
• app:elevation：正常的阴影大小
• app:pressedTranslationZ：按下时的阴影大小
• app:layout_anchor：设置FAB的锚点，即以哪个控件为参照设置位置
• app:layout_anchorGravity：FAB相对于锚点的位置
• app:fabSize：FAB的大小，normal或mini（分别对应56dp和40dp）
• app:borderWidth：边框大小，最好设置成0dp否则会有边框
• android:clickable：一定要设置成true否则没有点击效果

<?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:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".design.FloatingActionButtonActivity">
    <!--
        android:src：FAB中显示的图标.
        app:backgroundTint：正常的背景颜色 ，这里是ColorStateList类型
        app:rippleColor：按下时的背景颜色
        app:elevation：正常的阴影大小
        app:pressedTranslationZ：按下时的阴影大小
        app:layout_anchor：设置FAB的锚点，即以哪个控件为参照设置位置
        app:layout_anchorGravity：FAB相对于锚点的位置
        app:fabSize：FAB的大小，normal或mini（分别对应56dp和40dp）
        app:borderWidth：边框大小，最好设置成0dp否则会有边框
        android:clickable：一定要设置成true否则没有点击效果
    -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_gravity="end|bottom"
        android:layout_marginBottom="30dp"
        android:layout_marginRight="30dp"
        android:src="@drawable/love"
        android:clickable="true"
        app:rippleColor="#FFEB3B"
        android:elevation="10dp"
        app:pressedTranslationZ="20dp"
        app:borderWidth="0dp"
        android:backgroundTint="@color/fabbg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </com.google.android.material.floatingactionbutton.FloatingActionButton>
</FrameLayout>

2.selector选择器

三.CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout实现协调布局

1.布局文件

根标签是CoordinatorLayout

• 第一部分：整个头部写在AppBarLayout，要想实现折叠效果，里面还需要写一个CollapsingToolbarLayout，头部的Imageview和Toolbar都写在CollapsingToolbarLayout控件里面

• 第二部分：底部用recyclerview或者NestedScrollView完成，要想真正实现上半部分跟随着下半部分的滑动而产生相应的动作的话,必须设置属性：app:layout_behavior="@string/appbar_scrolling_view_behavior"

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".design.CoordinatorActivity">
    <!--第一部分 整个头部写在AppBarLayout，要想实现折叠效果，里面还需要写一个CollapsingToolbarLayout-->
    <!--CollapsingToolbarLayout：头部的Imageview和Toolbar都写在该控件里面-->


    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!--属性介绍
            1。contentScrim：当Imageview折叠后toolbar的颜色
            2。collapsedTitleGravity：折叠后title显示的位置
            3。expandedTitleGravity：展开后title显示的位置
            4。layout_scrollFlags：非常重要，一般设置2个scroll和exitUntilCollapsed
                a。scroll：表示CollapsingToolbarLayout可以滚动（不设置的话不能折叠，必须设置）
                b。enterAlways:表示底部的滚动控件只要向下滚动，头部就显示出来
                c。enterAlwaysCollapsed：表示当底部滚动控件滚动见顶时，头部显示出来
                d。exitUntilCollapsed：表示头部折叠到最小高度时（Toolbar的高度），就不再折叠（一般设置着个）
                e。snap 表示在滑动过程中如果停止滑动，则头部会就近折叠（要么恢复原状，要么折叠成一个Toolbar）

            -->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="#2196F3"
            app:collapsedTitleGravity="left"
            app:expandedTitleGravity="left|bottom"
            android:layout_width="match_parent"
            app:title="朋友圈"
            android:layout_height="250dp">

            <!--
            3个属性放在一起使用
                1。layout_collapseMode="parallax"：表示ImageView的折叠和CollapsingToolbarLayout的折叠不同步,
                2。layout_collapseParallaxMultiplier="0.5"：视觉系数0-1之间
                    0:ImageView的顶部在慢慢隐藏，底部不动
                    1:ImageView的顶部不动，底部慢慢隐藏

                 3。Toolbar的layout_collapseMode这个属性还有一个取值，是pin，该属性表示当折叠完成时将该控件放在页面的头部.
            -->

            <ImageView
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                android:scaleType="centerCrop"
                android:src="@drawable/fengjing"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </ImageView>
            <androidx.appcompat.widget.Toolbar
                app:layout_collapseMode="pin"
                android:layout_width="match_parent"
                android:layout_height="60dp">

            </androidx.appcompat.widget.Toolbar>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <!--第二部分：底部用recyclerview或者NestedScrollView完成-->
    <!--要想真正实现上半部分跟随着下半部分的滑动而产生相应的动作的话,必须设置属性
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
    -->
    <androidx.core.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:text="@string/app_name"
                android:gravity="center"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@mipmap/ic_launcher_round"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="@color/colorPrimary"/>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>