1. 程式人生 > >Android CoordinatorLayout AppBarLayout CollapsingToolbarLayout

Android CoordinatorLayout AppBarLayout CollapsingToolbarLayout

這幾個玩意結合著 很帶感 所以 記錄一下

app:layout_collapseMode="parallax" 

app:layout_collapseMode="parallax"這個設定動畫效果  可以設定出 劃拉之後標題 和 箭頭 還有沒有的效果 

app:titleEnabled="false"  這個用來設定 文字title 是不是跟著 圖片也一樣 也有對應的動畫

  • contentScrim:當Toolbar摺疊到一定程度時的背景顏色

  • title:當titleEnable設定為true的時候(預設),顯示的可縮放的標題

  • scrimAnimationDuration:控制Toolbar收縮時,顏色變化持續時間

  • app:collapsedTitleGravity="left"  Specifies how the title should be positioned when collapsed.  指定在摺疊之後標題放置的位置 

  • app:collapsedTitleTextAppearance="@color/colorPrimary"  The text appearance of the CollapsingToolbarLayouts title when it is fully 'collapsed'。Must be a reference to another resource, in the form "@[+][package:]type:name" or to a theme attribute in the form "?[package:][type:]name". 在摺疊的時候標題文字的外觀。必須引用另一個資源 

  • app:contentScrim="#ff5252" The drawable to use as a scrim on top of the CollapsingToolbarLayouts content when it has been scrolled sufficiently off screen. 指定在摺疊之後的背景色

  • app:expandedTitleGravity="left|bottom" Specifies how the title should be positioned when expanded. 在展開的時候 標題放置的位置

  • app:expandedTitleMargin="16dp" Specifies extra space on the start, top, end and bottom sides of the the expanded title text. 設定邊界距離,還可以單獨設定Bottom、Top、Left、Right等

  • app:expandedTitleTextAppearance 在展開的時候標題文字的外觀

  • app:scrimAnimationDuration="200"  Specifies the duration used for scrim visibility animations. 控制Toolbar收縮時,顏色變化持續時間

  • app:scrimVisibleHeightTrigger="150dp"  Specifies the amount of visible height in pixels used to define when to trigger a scrim visibility change.當可視高度變為多少時(摺疊或展開時)觸發背景顏色改變

  • app:statusBarScrim="#123456" The drawable to use as a scrim for the status bar content when the CollapsingToolbarLayout has been scrolled sufficiently off screen. 在摺疊的時候 狀態列 的背景顏色(一般不需要設定)

  • app:title="Title" The title to show when titleEnabled is set to true. 如果標題可用的話 顯示的標題文字   

  • app:titleEnabled="true" Whether the CollapsingToolbarLayout should draw its own shrinking/growing title. 是否顯示標題

  • app:toolbarId="@id/toolbar" The id of the primary Toolbar child that you wish to use for the purpose of collapsing.在摺疊的時候 顯示的toolbar的id

可以設定 預設不展開 AppBarLayout 的 expand 設定 false  就可以了

<?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"
    tools:context=".MainActivity">


    <android.support.design.widget.AppBarLayout app:expanded="false"
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleGravity="center_horizontal|bottom"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="true">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"
                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"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                 />

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


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

    <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:gravity="center"
            android:textSize="200sp"
            android:text="不服打我呀"
            android:layout_width="match_parent"
            android:layout_height="500dp" />
    </android.support.v4.widget.NestedScrollView>

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

MainAc 程式碼

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        //因為它預設不是居中的  並且 左右倆邊 都得有item 才會居中 設定Center
        CollapsingToolbarLayout toolbar_layout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
//        toolbar_layout.setCollapsedTitleGravity(Gravity.CENTER);
        toolbar_layout.setTitle("你大爺");
//        toolbar_layout.setExpandedTitleTextColor();//可以設定展開的 字的 顏色 和 收縮的字的顏色

    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int itemId = item.getItemId();
        switch (itemId) {
            case android.R.id.home:
                Toast.makeText(MainActivity.this, "丟雷樓", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

這麼好的 東西 不找第三方CV就可惜了  事實上 我也是一路cv過來的

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        //因為它預設不是居中的  並且 左右倆邊 都得有item 才會居中 設定Center
        CollapsingToolbarLayout toolbar_layout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
//        toolbar_layout.setCollapsedTitleGravity(Gravity.CENTER);
        toolbar_layout.setTitle("你大爺");
//        toolbar_layout.setExpandedTitleTextColor();//可以設定展開的 字的 顏色 和 收縮的字的顏色


        ScalingLayout scalingLayout = findViewById(R.id.scalingLayout);
        scalingLayout.setListener(new ScalingLayoutListener() {
            @Override
            public void onCollapsed() {

            }

            @Override
            public void onExpanded() {

            }

            @Override
            public void onProgress(float v) {

            }
        });

        View left = findViewById(R.id.left);
        View right = findViewById(R.id.right);

        left.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "left", Toast.LENGTH_SHORT).show();
            }
        });

        right.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "right", Toast.LENGTH_SHORT).show();
            }
        });
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int itemId = item.getItemId();
        switch (itemId) {
            case android.R.id.home:
                Toast.makeText(MainActivity.this, "丟雷樓", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}
<?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"
    tools:context=".MainActivity">


    <android.support.design.widget.AppBarLayout app:expanded="false"
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleGravity="center_horizontal|bottom"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="true">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"
                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"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                 />

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


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

    <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:gravity="center"
            android:textSize="200sp"
            android:text="不服打我呀"
            android:layout_width="match_parent"
            android:layout_height="500dp" />
    </android.support.v4.widget.NestedScrollView>

    <iammert.com.view.scalinglib.ScalingLayout
        android:id="@+id/scalingLayout"
        android:layout_width="300dp"
        android:layout_height="48dp"
        app:radiusFactor="1"
        android:clickable="true"
        android:layout_gravity="center_horizontal"
        android:stateListAnimator="@animator/sl_state_animator"
        app:layout_behavior="iammert.com.view.scalinglib.ScalingLayoutBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#f0f0"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:gravity="center"
            android:orientation="horizontal">

            <RelativeLayout
                android:id="@+id/left"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imageViewWatchNow"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:src="@mipmap/ic_launcher" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_toRightOf="@+id/imageViewWatchNow"
                    android:gravity="center"
                    android:text="Watch Now"
                    android:layout_marginLeft="8dp"
                    android:textColor="#ffffff"
                    android:singleLine="true"
                    android:textSize="18sp" />

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/right"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imageViewWatchLater"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:src="@mipmap/ic_launcher" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_toRightOf="@+id/imageViewWatchLater"
                    android:gravity="center"
                    android:singleLine="true"
                    android:layout_marginLeft="8dp"
                    android:text="Remind Later"
                    android:textColor="#ffffff"
                    android:textSize="18sp" />

            </RelativeLayout>

        </LinearLayout>

    </iammert.com.view.scalinglib.ScalingLayout>

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