Material Design学习跟随demo解读（二）

笔绘丹心

于 2016-11-12 22:49:35 发布

阅读量1k

点赞数

文章标签： Material design 材料设计 5-0 android

本文链接：https://blog.csdn.net/cdhahaha/article/details/53143855

版权

新知识笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

接着上篇Material Design学习跟随demo解读（一）继续
从MainActivity中的跳转到详情页，看下详情页DetailActivity的代码和上一篇一样，也是从布局文件开始

详情页布局activity_detail.xml

先总览布局，再一一解读

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.steven.materialdesigncomplex.DetailActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout_detail"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/MyAppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout_detail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimaryHalf"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/imageView_detail_banner"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:onClick="clickButton"
                android:scaleType="fitXY"
                android:src="@mipmap/img00_1"
                android:transitionName="banner"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.8"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_detail"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/MyAppTheme.PopupOverlay" />

            <ImageButton
                android:id="@+id/button_detail"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_gravity="center"
                android:elevation="20dp"
                android:onClick="clickButton"
                android:src="@android:drawable/ic_dialog_map"
                android:tint="@android:color/white"
                android:transitionName="button_detail" />

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

    <include layout="@layout/include_content_detail" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:onClick="clickButton"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/appBarLayout_detail"
        app:layout_anchorGravity="bottom|end" />

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

和activity_main一样也是分为两部分，第一部分最外层是一个协调布局CoordinatorLayout第二部分是内部的AppBarLayout include加入的内容布局，以及FloatingActionButton这些自不必多记，上篇Material Design学习跟随demo解读（一）已经记下了，接着看AppBarLayout里面的内容，是一个CollapsingToolbarLayout，它继承子FrameLayout，Collapsing是折叠的意思，顾名思义CollapsingToolbarLayout就是折叠toolbar的布局，在内容太长，滑动的过程中，toolBar会被折叠。其设置了layout_scrollFlags属性，那么在它后面include进来的那个布局想必一定是加了behavior属性。CollapsingToolbarLayout里面分别是一个ImageView Toolbar和一个ImageButton
下面一一解读这些控件里面的新属性

android:transitionName="banner"：上篇MainActivity转场动画ActivityOptions.makeScrenetrasion里面的第二个参数，MainActivity里这个参数和DetailActivity这个Imageview的android:transitionName=”banner”属性值相同才能实现转场，
app:layout_collapseMode=”parallax”：折叠模式
一般有两个pin和parallax
pin：设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。
parallax ：设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用
layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。

解读include标签里的include_content_detail代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    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"
    app: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:id="@+id/cardView_1"
            android:onClick="clickButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            app:cardCornerRadius="25dp"
            app:cardElevation="10dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:orientation="vertical"
                android:paddingLeft="12dp"
                android:paddingRight="12dp"
                android:paddingTop="14dp">

                <TextView
                    android:id="@+id/textView_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="12dp"
                    android:singleLine="true"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    android:transitionName="text_detail"
                    android:text="JavaSE第一周"/>

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

                    <RelativeLayout
                        android:layout_width="140dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical">

                        <ImageView
                            android:id="@+id/imageView_teacherpic"
                            android:layout_width="140dp"
                            android:layout_height="94dp"
                            android:src="@mipmap/steven"/>

                    </RelativeLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="left|center"
                        android:orientation="vertical"
                        android:paddingLeft="16dp"
                        android:paddingRight="12dp">


                        <TextView
                            android:id="@+id/textView_teacher"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentLeft="true"
                            android:textSize="14sp"
                            android:transitionName="text_teacher"
                            android:text="讲师"
                            android:textColor="#00f"
                            android:layout_marginBottom="10dp"/>

                        <TextView
                            android:id="@+id/textView_quotation"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentLeft="true"
                            android:text="讲师语录"
                            />

                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>

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


        <android.support.v7.widget.CardView
            style="@style/CardViewStyle"
            app:cardCornerRadius="25dp"
            app:cardElevation="10dp">

            <TextView
                android:id="@+id/textView_teacherdesc"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:padding="20dp"
                android:text="个人简介"/>

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


        <android.support.v7.widget.CardView
            style="@style/CardViewStyle"
            app:cardCornerRadius="25dp"
            app:cardElevation="10dp">

            <TextView
                android:id="@+id/textView_w1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:padding="20dp"
                android:text=""
                />

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



        <android.support.v7.widget.CardView
            style="@style/CardViewStyle"
            app:cardCornerRadius="25dp"
            app:cardElevation="10dp">

            <TextView
                android:id="@+id/textView_w2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:padding="20dp"
                android:text=""
                />

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


        <android.support.v7.widget.CardView
            style="@style/CardViewStyle"
            app:cardCornerRadius="25dp"
            app:cardElevation="10dp">

            <TextView
                android:id="@+id/textView_w3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:padding="20dp"
                android:text=""
                />

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


        <android.support.v7.widget.CardView
            style="@style/CardViewStyle"
            app:cardCornerRadius="25dp"
            app:cardElevation="10dp">

            <TextView
                android:id="@+id/textView_w4"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:padding="20dp"
                android:text=""/>

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


        <android.support.v7.widget.CardView
            style="@style/CardViewStyle"
            app:cardCornerRadius="25dp"
            app:cardElevation="10dp">

            <TextView
                android:id="@+id/textView_w5"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:padding="20dp"
                android:text=""/>

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

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

和activiy_detail一样，主要有两部分，第一部分最外层是一个NestedScrollView继承子FrameLayout果不其然，include标签里的视图添加了app:layout_behavior="@string/appbar_scrolling_view_behavior"属性，与CollapsingToolbarLayout里的layout_scrollFlags="scroll|exitUntilCollapsed协调工作，
NestedScrollView是一个增强型的ScrollView，
第二部分是一个线性布局垂直放置了多个CardView
CardView属性
app:cardCornerRadius="25dp"：设置卡片圆形角度
app:cardElevation="10dp"：设置悬浮高度

看最后一个FloatingActionButton，这次添加了两个属性设置按钮的位置

app:layout_anchor="@id/appBarLayout_detail"

app:layout_anchorGravity="bottom|end"

anchor，停泊，停靠，顾名思义，是依赖那个视图定位，anchorGravity设置在所依赖视图的相对位置。

DetailActivity代码

package com.steven.materialdesigncomplex;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;
import java.util.Map;

public class DetailActivity extends AppCompatActivity {
//上下文
    private Context mContext = this;
    //折叠布局对象
    private CollapsingToolbarLayout collapsingToolbarLayout_detail;
    //
    private int position;
    //
    private ImageView imageView_detail_banner;
    //
    private Map<String, Object> map_item = null;
    //
    private List<Map<String, Object>> list_teacher = null;
    //
    private List<String> list_course = null;

    //定义讲师索引下标
    private int index_teacher = 0;

    private TextView textView_title;
    private TextView textView_teacher;
    private TextView textView_quotation;
    private TextView textView_teacherdesc;
    private ImageView imageView_teacherpic;

    private TextView textView_w1;
    private TextView textView_w2;
    private TextView textView_w3;
    private TextView textView_w4;
    private TextView textView_w5;

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

        initData();

        initView();

        loadData2View();
    }

    private void initData() {
        //接收页面传值
        position = getIntent().getIntExtra("position", 0);
        //获取单条信息
        map_item = MyApp.loadOutlineData(mContext).get(position);

        //获取讲师信息
        list_teacher = MyApp.loadTeacherData(mContext);
        for (int i = 0; i < list_teacher.size(); i++) {
            if (map_item.get("teacher").equals(list_teacher.get(i).get("teacher"))) {
                index_teacher = i;
            }
        }

        //获取課程信息
        list_course = MyApp.loadCourseData(mContext);
    }

    private void initView() {
        imageView_detail_banner = (ImageView) findViewById(R.id.imageView_detail_banner);
        imageView_detail_banner.setImageDrawable((Drawable) map_item.get("image"));

        textView_teacher = (TextView) findViewById(R.id.textView_teacher);
        textView_teacherdesc = (TextView) findViewById(R.id.textView_teacherdesc);
        textView_quotation = (TextView) findViewById(R.id.textView_quotation);
        textView_title = (TextView) findViewById(R.id.textView_title);
        imageView_teacherpic = (ImageView) findViewById(R.id.imageView_teacherpic);

        textView_w1 = (TextView) findViewById(R.id.textView_w1);
        textView_w2 = (TextView) findViewById(R.id.textView_w2);
        textView_w3 = (TextView) findViewById(R.id.textView_w3);
        textView_w4 = (TextView) findViewById(R.id.textView_w4);
        textView_w5 = (TextView) findViewById(R.id.textView_w5);

        //标题内容
        collapsingToolbarLayout_detail =
                (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout_detail);
        collapsingToolbarLayout_detail.setTitle(map_item.get("title") + "");

        Toolbar toolbar_detail = (Toolbar) findViewById(R.id.toolbar_detail);
        setSupportActionBar(toolbar_detail);
        toolbar_detail.setNavigationIcon(R.mipmap.ic_menu);
    }


    private void loadData2View() {
        textView_title.setText(map_item.get("title") + "");
        textView_teacher.setText("讲师：" + map_item.get("teacher") + "");
        textView_teacherdesc.setText(list_teacher.get(index_teacher).get("desc") + "");
        textView_quotation.setText(list_teacher.get(index_teacher).get("quotation") + "");
        imageView_teacherpic.setImageDrawable((Drawable) list_teacher.get(index_teacher).get("image"));

        textView_w1.setText(list_course.get(0));
        textView_w2.setText(list_course.get(1));
        textView_w3.setText(list_course.get(2));
        textView_w4.setText(list_course.get(3));
        textView_w5.setText(list_course.get(4));
    }


    public void clickButton(View view) {
        // 启动动画
        MyApp.startAnimation(view, 1000, 1);

        switch (view.getId()) {
            case R.id.fab_detail:
                Snackbar.make(view, "您已点击收藏该条信息！", Snackbar.LENGTH_SHORT).show();
                break;
            case R.id.button_detail:
                MyApp.showAlertDialog(mContext);
                break;
        }
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //结束转场动画
            finishAfterTransition();
        } else {
            finish();
        }
    }}

很可惜，这个界面信息量不大，基本上和MainActivity相同，但有注意到在onBackPressed方法里面有个finishAfterTransition在转场动画执行后结束当前Activity

看完了DetailActivity，为了分的更明确，下一篇解读H5Activity

笔绘丹心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Material Design学习跟随demo解读（二）

接着上篇Material Design学习跟随demo解读（一）继续从MainActivity中的跳转到详情页，看下详情页DetailActivity的代码和上一篇一样，也是从布局文件开始详情页布局activity_detail.xml先总览布局，再一一解读<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.
复制链接

扫一扫