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

接着上篇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