Android CoordinatorLayout AppBarLayout CollapsingToolbarLayout
阿新 • • 發佈:2019-01-27
這幾個玩意結合著 很帶感 所以 記錄一下
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>