说说 Android 的 Material Design 设计(

作者: deniro | 来源:发表于2018-10-20 21:36 被阅读51次

    1 CollapsingToolbarLayout 布局

    CollapsingToolbarLayout 是基于 Toolbar 的布局。它可以让 Toolbar 的效果变得更加华丽。

    注意:CollapsingToolbarLayout 只能作为 AppBarLayout 的直接子布局。

    现在我们创建一个空活动来显示猫的详情:

    然后在 activity_cat.xml 中编写界面布局,主要分为两个部分,一个是标题栏,另一个是内容:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:material="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <!--标题栏布局-->
        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="250dp">
    
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                material:contentScrim="?attr/colorPrimary"
                material:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                <ImageView
                    android:id="@+id/cat_image_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    material:layout_collapseMode="parallax" />
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    material:layout_collapseMode="pin" />
    
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
    
        <!--内容布局-->
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            material:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
    
                <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="15dp"
                    android:layout_marginLeft="15dp"
                    android:layout_marginRight="15dp"
                    android:layout_marginTop="35dp"
                    material:cardCornerRadius="4dp">
    
                    <TextView
                        android:id="@+id/cat_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="10dp" />
                </android.support.v7.widget.CardView>
    
            </LinearLayout>
    
        </android.support.v4.widget.NestedScrollView>
    
        <!--用于评论的悬浮按钮-->
        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:src="@drawable/comment"
            material:layout_anchor="@id/app_bar_layout"
            material:layout_anchorGravity="bottom|end" />
    </android.support.design.widget.CoordinatorLayout>
    
    1. 整体布局使用 CoordinatorLayout。
    2. 定义了 xmlns:material="http://schemas.android.com/apk/res-auto" 命名空间。

    标题栏布局:

    1. 标题栏布局使用 AppBarLayout,内层嵌套了 CollapsingToolbarLayout。
    2. CollapsingToolbarLayout 中的 contentScrim 可指定当标题栏趋于折叠以及折叠之后的背景色;而 layout_scrollFlags 中的 scroll 表示 CollapsingToolbarLayout 会随着内容的滚动而滚动; layout_scrollFlags 中的 exitUntilCollapsed 表示折叠后会保留在界面中(不会被移出屏幕)。
    3. 在 CollapsingToolbarLayout 中,定义了 ImageView 与 Toolbar。即这个标题栏是由普通标题栏加图片组合而成的。其中有一个 layout_collapseMode 属性,它用于设置折叠模式。pin 表示在折叠过程中使用保持,就像被大头针定住了一样;parallax 表示在折叠过程中会产生视差。

    内容布局:

    1. 外层使用 NestedScrollView,它不仅支持使用滚动的方式来查看屏幕外的数据,还能嵌套响应滚动事件。我们还通过 layout_behavior 来指定布局行为。
    2. 因为 NestedScrollView 内部只允许存在一个直接的子布局,所以我们可以先嵌套一个 LinearLayout,然后再其内部放入更多内容。
    3. 这里使用 TextView 来显示内容,然后把它放入 CardView (卡片式布局)中。
    4. 我们为 CardView 设置了外边距,还设置了圆角。这些工作都是为了让页面变得更好看。

    最后我们还加了一个悬浮按钮(FloatingActionButton):

    1. 首先把按钮图片 png ,放在 drawable 文件夹下。
    2. 通过 layout_anchor 来设置锚点,让悬浮按钮出现在标题栏区域内。
    3. 通过 layout_anchorGravity 让按钮出现在标题栏区域的右下角。

    2 活动类

    public class CatActivity extends AppCompatActivity {
    
    
        /**
         * 猫名
         */
        public static final String CAT_NAME = "cat_name";
    
        /**
         * 猫图片 ID
         */
        public static final String CAT_IMAGE_ID = "cat_image_id";
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_cat);
    
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            ActionBar actionBar = getSupportActionBar();
            if (actionBar != null) {//启用 HomeAsUp 按钮(返回箭头)
                actionBar.setDisplayHomeAsUpEnabled(true);
            }
    
            Intent intent = getIntent();
    
            //设置标题
            CollapsingToolbarLayout layout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
            String catName = intent.getStringExtra(CAT_NAME);
            layout.setTitle(catName);
    
            //设置图片
            int catImageId = intent.getIntExtra(CAT_IMAGE_ID, 0);
            ImageView imageView = (ImageView) findViewById(R.id.cat_image_view);
            Glide.with(this).load(catImageId).into(imageView);//加载图片
    
            //设置内容
            TextView contentView = (TextView) findViewById(R.id.cat_text_view);
            contentView.setText(generateContent(catName));
    
        }
    
        /**
         * 生成内容
         *
         * @param catName 猫名
         * @return
         */
        private String generateContent(String catName) {
            //实践中,会根据参数名称,返回对应的内容
            return "俄罗斯蓝猫(Russian Blue),历史上曾被称做阿契安吉蓝猫,曾有过三种不同的名字。最初是阿契安吉蓝猫,直到20世纪40年代才有现在的名字,另外有段时间它则叫做马耳他猫。证据显示,这种猫确实原产于俄罗斯,因为已在俄罗斯寒带地区发现了同种的猫。俄罗斯蓝猫体型细长,大而直立的尖耳朵,脚掌小而圆,走路像是用脚尖在走。身上披着银蓝色光泽的短被毛,配上修长苗条的体型和轻盈的步态,尽显一派猫中的贵族风度。";
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId()){
                case android.R.id.home://点击 HomeAsUp 按钮时
                    finish();//关闭当前活动(即返回上一个活动)
                    return true;
            }
            return super.onOptionsItemSelected(item);
        }
    }
    
    1. 我们在标题栏启用 HomeAsUp 按钮(返回箭头),用于关闭当前活动。
    2. 将 CollapsingToolbarLayout 传递过来的猫类型,作为标题。
    3. 接着使用 Glide 来加载图片。
    4. 然后设置内容。
    5. 最后在 onOptionsItemSelected 中处理 HomeAsUp 按钮的点击事件。

    现在我们要处理首页活动 RecyclerView 的点击事件,当点击某只猫时,打开它的详情活动页:

    public class CatAdapter extends RecyclerView.Adapter<CatAdapter.ViewHolder> {
    
        private Context context;
    
        private List<Cat> cats = new ArrayList<>();
    
        public CatAdapter(List<Cat> cats) {
            this.cats = cats;
        }
    
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if (context == null) {//设置上下文环境
                context = parent.getContext();
            }
            View view = LayoutInflater.from(context).inflate(R.layout.cat_item, parent, false);
    
            //处理 RecyclerView 点击事件
            final ViewHolder holder = new ViewHolder(view);
            holder.cardView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = holder.getAdapterPosition();
                    Cat cat = cats.get(position);
                    Intent intent = new Intent(context, CatActivity.class);
                    intent.putExtra(CatActivity.CAT_NAME, cat.getType());
                    intent.putExtra(CatActivity.CAT_IMAGE_ID, cat.getImgId());
                    context.startActivity(intent);
                }
            });
    
            return holder;
        }
    
       ...
    }
    

    运行效果:

    3 融合系统顶部状态栏

    利用 fitsSystemWindows 属性我们可以将标题栏中的图片与系统顶部状态栏融合起来。

    注意: 因为我们这里的 ImageView 嵌套的很深,所以必须把它以及它的祖先布局中的 fitsSystemWindows 都设置为 true,才能真正生效:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:material="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:fitsSystemWindows="true"
       >
    
       <!--标题栏布局-->
       <android.support.design.widget.AppBarLayout
           android:id="@+id/app_bar_layout"
           android:layout_width="match_parent"
           android:layout_height="250dp"
           android:fitsSystemWindows="true"
           >
    
           <android.support.design.widget.CollapsingToolbarLayout
               android:id="@+id/collapsing_toolbar_layout"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
               material:contentScrim="?attr/colorPrimary"
               material:layout_scrollFlags="scroll|exitUntilCollapsed"
               android:fitsSystemWindows="true"
               >
    
               <ImageView
                   android:id="@+id/cat_image_view"
                   android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:scaleType="centerCrop"
                   material:layout_collapseMode="parallax"
                   android:fitsSystemWindows="true"
                   />
    
           ...
           </android.support.design.widget.CollapsingToolbarLayout>
       </android.support.design.widget.AppBarLayout>
    
      
    
    ...
    </android.support.design.widget.CoordinatorLayout>
    
    

    接着把状态栏的颜色设置为透明,即

    <item name="android:statusBarColor">@android:color/transparent</item>
    

    因为这个属性从 API21 (Android 5.0 +)才出现,所以我们必须做差异化实现。

    在 res 目录下新建一个 values-v21 目录,然后再新建一个 styles.xml:

    <resources>
        <!--Android 5.0+-->
        <style name="catActivityTheme" parent="AppTheme">
            <!--状态栏颜色指定为透明-->
            <item name="android:statusBarColor">@android:color/transparent</item>
        </style>
    </resources>
    

    这样设计是因为只有 Android 5.0+ 才会去读取该文件。

    我们还需要在 values/styles.xml 中新建一个不包含实际内容的 catActivityTheme,确保 Android 5.0 之前的版本不会抛错:

    <!--小于 Android 5.0-->
    <style name="catActivityTheme" parent="AppTheme">
    </style>
    

    最后在 AndroidManifest.xml 中的 CatActivity 活动,设置刚刚定义的主题:

     <activity android:name=".CatActivity"
                android:theme="@style/catActivityTheme"
                ></activity>
    

    运行效果:


    就算是现在的刘海屏,也可以适配的很好哦O(∩_∩)O~

    相关文章

      网友评论

        本文标题:说说 Android 的 Material Design 设计(

        本文链接:https://www.haomeiwen.com/subject/jtsmzftx.html