CoordinatorLayout CollaspingToolBar

来源：互联网发布：工业设计必用的软件编辑：程序博客网时间：2024/05/22 13:45

继续整理design support包的控件

Java代码

package com.example.administrator.recycleviewdemo;import android.os.Bundle;import android.os.PersistableBundle;import android.support.design.widget.CollapsingToolbarLayout;import android.support.design.widget.CoordinatorLayout;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.View;/** * Created by Administrator on 2015/10/19. * CoordinatorLayout的用法 * 1.定义一个类继承自AppCompatActivity * 2.定义Coordinator布局文件 * 3.测试效果：定义fab的点击事件显示snackbar */public class CoordinatorActivity extends AppCompatActivity {    FloatingActionButton fab_btn;    CoordinatorLayout frameLayout;    Toolbar toolbar;    CollapsingToolbarLayout collapsingToolbarLayout;    @Override    public void onCreate(Bundle savedInstanceState, PersistableBundle persistentState) {        super.onCreate(savedInstanceState, persistentState);        setContentView(R.layout.coordinator_layout);        //设置actionbar        initViews();        collapsingToolbarLayout.setTitle("测试collapsingToolbarLayout，设置title");        setSupportActionBar(toolbar);        if (getSupportActionBar() == null) {            return;        }        getSupportActionBar().setHomeButtonEnabled(true);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        fab_btn.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar.make(frameLayout, "snackbar相当于toast", Snackbar.LENGTH_LONG).setAction("点击按钮消失(提示信息)", new View.OnClickListener() {                    @Override                    public void onClick(View v) {                    }                }).show();            }        });    }    private void initViews() {        fab_btn = (FloatingActionButton) this.findViewById(R.id.fab_btn);        frameLayout = (CoordinatorLayout) findViewById(R.id.root);        toolbar = (Toolbar) findViewById(R.id.toolbar);        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collaspingtoolbarlayout);    }}

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"    android:id="@+id/root"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="测试文字" />    <android.support.design.widget.AppBarLayout        android:layout_width="fill_parent"        android:layout_height="300dp"        app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collaspingtoolbarlayout"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            app:expandedTitleMarginStart="80dp"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:scaleType="fitXY"                android:src="@mipmap/win7" />            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="#77db93"                android:minHeight="10dp" />        </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">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="vertical">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />s            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />        </LinearLayout>    </android.support.v4.widget.NestedScrollView>    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab_btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="bottom|right"        android:src="@mipmap/ic_launcher"        app:fabSize="normal" /></android.support.design.widget.CoordinatorLayout>

备注：

设置移动手势，toolbar可以随之缩放
在toolbar外包裹一层控件：<android.support.design.widget.CollapsingToolbarLayout/>

属性：
app：layout_collapseMode="pin" 上划后文字显示在toolbar中

在Java代码中获得collapsingtoolbarlayout对象，通过setTitle()设置标题
通过在<android.support.design.widget.AppBarLayout>中设置
app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
修改为白色的字体颜色

app:expandedTitleMarginStart="80dp"：从开始移动的位置文字就变小

给imageview添加滑动的标签：
app:layout_collapseMode="parallax" 效果非常优雅
为滑动设置系数
app:layout_collapseParallaxMultiplier="0.2" 0~1之间
//-----------上面设置在imageview中

//--------下面设置在collaspingtoolbarlayout中
app:contentScrim="背景色"滑动到指定的大小的时候，显示这个背景色，不显示图片

0 0