android界面设计语言Material Design---可折叠式标题栏

可折叠式标题栏

         CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局，可以使标题栏产生华丽的效果。

         CollapsingToolbarLayout不能独立存在，只能作为AppBarLayout的直接子布局来使用。而AppBarLayout又必须是CoordinatorLayout的子布局。

                                                                               

         布局分为两部分，一个水果标题栏，一个水果内容详情。

         我先使用CoordinatorLayout来完成最外层布局

<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"
    tools:context="com.example.rotateimageview.FruitActivity">

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

其中xmlns：app的命题空间，在Material Design的开发中我们会经常用到。

 

         接着我们在CoordinatorLayout中嵌套一个AppBarLayout布局

        

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="250dp">
</android.support.design.widget.AppBarLayout>

高度设为250dp，个人觉得250dp的视觉效果比较好。

         接着我们在AppBarLayout中嵌套一个CollapsingToolbarLayout布局

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:contentScrim="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">
</android.support.design.widget.AppBarLayout>

android:theme属性设置主题

app：contentScrim属性设置CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色

app：layout_scrollFlags属 scroll表示CollapsingToolbarLayout会随着内容详情的滚动一起滚动，exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上，不在移出屏幕。

 

这样我们把框架这些搭好了，现在定义标题栏的具体内容。

         在CollapsingToolbarLayout中嵌套一个ImageView，一个Toolbar

<ImageView
    android:id="@+id/fruit_image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_collapseMode="pin"
    />

 

这样就布局就意味着，这个标题栏就由普通的标题栏加上图片组合而成的。

android:scaleType是控制图片如何resized/moved来匹对ImageView的size

android:scaleTyoe = “centerCrop” 按比例扩大图片的size居中显示，使得图片长(宽)等于或大于View的长(宽)。

app:layout_collapseMode属性表示折叠过程中的折叠方式是怎么样的。

app:layout_collapseMode = “parallax” 表示折叠过程中产生一定的错位偏移

app:layout_collapseMode= “pin”表示折叠过程中位置始终保持不变

 

标题栏搞定，我们在CoordinatorLayout布局中添加关于内容的详细部分。

         我们在CoordinatorLayout中嵌套一个NestedScrollView

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

 

App:layout_behavior属性指定一个布局行为

@string/appbar_scrolling_view_behavior可以上下滚动的行为

 

         无论是ScrollView还是NestedScrollView都是只允许存在一个直接子布局，所以我们加入LinearLayout，在其中添加自己想加入东西。

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</android.support.design.widget.AppBarLayout>

 

 我们在LinearLayout中添加一个ImageView(这里我们使用CardView，因为前面有一个CardView布局，我们把数据直接传过来就是)和一个TextView.

<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"
    app:cardCornerRadius="4dp">
    <TextView
        android:id="@+id/fruit_content_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"/>
</android.support.v7.widget.CardView>

 

我们再在CoordinayorLayout中添加一个悬浮按钮FloatingActionButton。

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:src="@drawable/gege"
    app:layout_anchor="@id/appBar"
    app:backgroundTint="#fafcfa"
    app:layout_anchorGravity="bottom|end"/>

app:layout_anchor属性指定一个锚点（我们将锚点设置为AppBarLayout，使悬浮按钮出现在水果标题栏的区域）

app:layout_anchorGravity属性将悬浮按钮定位在标题栏区域的右下角

 

布局宣布搞定，这下来活动中编写逻辑代码

public class FruitActivity extends AppCompatActivity {

    public static final String FRUIT_NAME = "fruit_name";
    public static final String FRUIT_IMAGE_ID = "fruit_image_id";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fruit);
        Intent intent = getIntent();
        String fruitName = intent.getStringExtra(FRUIT_NAME);//接受名字
        int fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID,0);//接受图片地址
        android.support.v7.widget.Toolbar toolbar =
                (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
        android.support.design.widget.CollapsingToolbarLayout collapsingToolbarLayout =
                (android.support.design.widget.CollapsingToolbarLayout)
                        findViewById(R.id.collapsing_toolbar);
        ImageView fruitImageView = (ImageView)findViewById(R.id.fruit_image_view);
        TextView fruitContentText = (TextView) findViewById(R.id.fruit_content_text);
        setSupportActionBar(toolbar);//把Toolbar作为ActionBar显示
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);//启动HomeAsUP按钮,默认添加一个返回箭头

        }
        collapsingToolbarLayout.setTitle(fruitName);//将传入的水果名作为当前界面的标题
        Glide.with(FruitActivity.this).load(fruitImageId).into(fruitImageView);//加载传入的水果图片
        String fruitContent = generateFruitContent(fruitName);//调用方法
        fruitContentText.setText(fruitContent);
    }
    private String generateFruitContent(String fruitName){
        StringBuffer fruitContent = new StringBuffer();
        for (int i = 0;i<500;i++){
            fruitContent.append(fruitName);//把水果名拼接，循环500次
        }
        return fruitContent.toString();
    }

    //HomeAsUp按钮的点击事件
    public boolean onOptonsItemSelected(MenuItem item){
        switch (item.getItemId()){
            case android.R.id.home:
                finish();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

 

然后在主活动相应的适配器中获取水果名和水果图片资源的id,并把它们通过Itent实现活动之间的数据传递。

 

所有工作完成

下面成果展示：               

 

补充：

充分利用系统状态栏空间

         在CoodinatorLayout、AppBarLayout、CollapsingToolbarLayout、ImageView中添加一句

        android:fitsSystemWindows="true"

         这个属性表示控件可以出现在状态栏里

然后编写一个res/Values resource file/styles.xml

<resources>
    <style name="FruitActivityTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

 

在AndroidManifest.xml中注册

<activity
    android:name=".FruitActivity"
    android:theme="@style/FruitActivityTheme">
</activity>