文章目錄
- 1.什么是Material Design
- 2.Toolbar
- 3.滑動選單
- 3.1DrawerLayout
- 3.2NavigationView
- 4.懸浮按鈕和可互動提示
- 4.1FloatingActionButton
- 4.2Snackbar
- 4.3CoordinatorLayout
- 5.卡片式布局
- 5.1CardView
- 5.2AppBarLayout
- 6.下拉重繪
- 7.可折疊式標題欄
- 7.1CollapsingToolbarLayout
- 7.2充分利用系統狀態欄空間
1.什么是Material Design
Material Design是由谷歌的設計工程師們基于傳統的優秀設計原則，結合豐富的創意和科學技術所發明的一套全新的界面設計語言，包含了視覺，運動，互動效果等特性，而事實上，Material Design更像是一種設計思想和理念，而本節我們并不是要以設計師的角度去學習Material Design，而是以一個開發者的角度去學習使用一些符合Material Design理念的一些控制元件，
2.Toolbar
Toolbar繼承了ActionBar的所有功能，而且靈活性很高，可以配合其他控制元件來完成一些Material Design的效果，
基本使用步驟：
1.更改程式的標題欄主題，
2.在布局中加入Toolbar，
3.在活動中替換標題欄，
示例：
//步驟一，values下的styles檔案
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">//因為我們要引入toolbar，所以這里選擇無標題欄主題
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
//步驟二
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"//單獨令標題欄為深色主題
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />//令標題欄中的選單項為淺色主題
</LinearLayout>
//步驟三
public class MainActivity extends AppCompatActivity {
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);//將標題欄替換為toolbar
}
}
更改toolbar上顯示的文字：
我們可以在活動中加入android：label屬性來指定toolbar上顯示的文字，
給toolbar添加選單項：
使用步驟與給普通的actionbar添加選單項類似，
示例：
//選單布局
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/back"
android:icon="@drawable/back"
android:title="Back"
app:showAsAction="always" />//始終以圖片的形式存在于標題欄
<item
android:id="@+id/setting"
android:icon="@drawable/setting"
android:title="Setting"
app:showAsAction="ifRoom" />//如果空間允許則以圖片的形式存在于標題欄，否則以文字的形式
<item
android:id="@+id/delete"
android:icon="@drawable/delete"
android:title="Delete"
app:showAsAction="never" />//始終以文字的形式存在于標題欄
</menu>
//活動
public class MainActivity extends AppCompatActivity {
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {//引入選單布局
getMenuInflater().inflate(R.menu.toolbra,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {//給選單中的各個選單項設定點擊事件
switch (item.getItemId()){
case R.id.back:
finish();
break;
case R.id.setting:
Toast.makeText(MainActivity.this,"setting",Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(MainActivity.this,"delete",Toast.LENGTH_SHORT).show();
break;
default:
break;
}
return true;
}
}
3.滑動選單
就是我們手機上常見的側拉欄，
3.1DrawerLayout
使用方法：
DrawerLayout布局只允許其下有兩個直接子布局，第一個是主界面的布局，第二個是側拉欄的布局，
示例：
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>
<TextView
android:id="@+id/text_view"
android:text="This is menu"
android:background="#fff"
android:textSize="30sp"
android:layout_gravity="start"//側拉欄的布局必須宣告這一屬性，left表示側拉欄在左，right表示側拉欄在右，start則會根據系統語言來自動選擇
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.drawerlayout.widget.DrawerLayout>
一個小問題：
這里可能存在一個問題，用戶可能并不知道你的程式會有側拉欄的功能，所以這里谷歌建議我們在標題欄中添加一個側拉欄對應的按鈕，用于打開側拉欄，
示例：
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
drawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
setSupportActionBar(toolbar);
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);//toolbar的最左側有一個系統默認存在的按鈕，而該方法能讓該按鈕顯示出來
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//這個按鈕本身的圖案是一個回傳的箭頭，而這里我們可以更改它的圖案
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbra,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case android.R.id.home://給這個系統默認存在的按鈕添加點擊事件
drawerLayout.openDrawer(GravityCompat.START);
break;
case R.id.back:
finish();
break;
case R.id.setting:
Toast.makeText(MainActivity.this,"setting",Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(MainActivity.this,"delete",Toast.LENGTH_SHORT).show();
break;
default:
break;
}
return true;
}
}
3.2NavigationView
在上節中我們側拉欄中的內容有些單薄，而NavigationView可以幫助我們很輕松的豐富側拉欄中的內容，
使用步驟：
1.聲名依賴，
2.準備好NavigationView的menu項，
3.準備好NavigationView的headerLayout
4.在布局中加入NavigationView，
5.可以在活動中給NavigationView的各個選單項設定點擊事件，
示例：
//步驟一
dependencies {
implementation 'com.google.android.material:material:1.2.1'//material design的相關庫
implementation 'de.hdodenhof:circleimageview:3.1.0'//這是一個開源專案，可以幫助我們很輕松的實作圖片圓形化的功能，
}
//步驟二
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">//表示組內的所有選單項只能單選
<item
android:id="@+id/call"
android:title="Call"
android:icon="@drawable/nav_call" />
<item
android:id="@+id/friends"
android:title="Friends"
android:icon="@drawable/nav_friends" />
<item
android:id="@+id/location"
android:title="Location"
android:icon="@drawable/nav_location" />
<item
android:id="@+id/mail"
android:title="Mail"
android:icon="@drawable/nav_mail" />
<item
android:id="@+id/task"
android:title="Task"
android:icon="@drawable/nav_task" />
</group>
</menu>
//步驟三
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="180dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/image_view"
android:src="@drawable/nav_icon"
android:layout_centerInParent="true"
android:layout_width="70dp"
android:layout_height="70dp" />
<TextView
android:id="@+id/mail"
android:textColor="#fff"
android:text="mail: 1938796569@qq.com"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/username"
android:textColor="#fff"
android:text="username: yangxu"
android:layout_above="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
//步驟四
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/header_layout"/>
</androidx.drawerlayout.widget.DrawerLayout>
//步驟五
final DrawerLayout drawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navigationView=(NavigationView) findViewById(R.id.nav_view);
navigationView.setCheckedItem(R.id.call);//將call選單項設定為選中狀態
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {//可以在這里使用switch陳述句區分各個選單項
drawerLayout.closeDrawers();
return true;
}
});
4.懸浮按鈕和可互動提示
4.1FloatingActionButton
該控制元件可以幫助我們很輕松的實作懸浮按鈕的效果，
示例：
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:src="@drawable/ic_done"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"//此處的end同樣也是根據系統語言來自動選擇left或right
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:elevation="8dp"/>//該屬性可以調整懸浮按鈕下的陰影狀態
</FrameLayout>
//我們還可以給這個懸浮按鈕注冊一個點擊事件
FloatingActionButton fab=(FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this,"ok",Toast.LENGTH_SHORT).show();
}
});
4.2Snackbar
在此之前我們向用戶發送提示資訊時最常用的便是Toast了，但是Toast僅僅只能通知用戶一些簡單的資訊，而用戶則只能被動接收，因為沒有什么辦法能讓用戶來進行選擇，
現在讓我們設想一個場景當用戶在洗掉檔案時，如果不小心洗掉了幾個重要的檔案，假設我們只是用Toas來提示用戶而沒有給出取消的方法時，相信用戶肯定會抓狂吧，而Snackbar則可以很好的解決這個問題，
示例：
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view,"you delete some import data",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {//setAction()方法的第一個引數是按鈕名，第二個是監聽器
@Override
public void onClick(View view) {a
Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
}
}).show();
}
});
4.3CoordinatorLayout
如果你已經運行了我們在上面講的代碼的話，那你一定會發現Snackbar的提示資訊將我們的懸浮按鈕給遮擋住了，這樣是十分影響界面的美觀的，而我們本節要講的CoordinatorLayout就可以解決這個問題了，
CoordinatorLayout是一個升級版的FrameLayout，它可以監聽其所有子控制元件的各種事件，然后幫助我們做出最為合理的回應，
示例：
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:src="@drawable/ic_done"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:elevation="8dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
5.卡片式布局
5.1CardView
卡片式布局中的所有控制元件都將被放置在一張卡片上，給人一種立體的感覺，接下來我們就用RecyclerView來展示卡片布局的特點，
示例：
//主活動布局
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
//RecyclerView子項布局
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="5dp"
app:cardCornerRadius="4dp"//該屬性用來指定卡片布局圓角的弧度
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/fruit_image"
android:src="@drawable/orange"
android:scaleType="centerCrop"//該屬性表示以同步的比例對圖片進行縮放
android:layout_width="match_parent"
android:layout_height="100dp" />
<TextView
android:id="@+id/fruit_name"
android:text="orange"
android:textSize="16sp"
android:layout_margin="5dp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
//子項的類
public class Fruit {
private String name;
private int image;
public Fruit(String name,int image){
this.image=image;
this.name=name;
}
public String getName() {
return name;
}
public int getImage() {
return image;
}
}
//RecyclerView的配接器
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private List<Fruit> mList;
public MyAdapter(List<Fruit> list){
mList=list;
}
public class ViewHolder extends RecyclerView.ViewHolder{
TextView name;
ImageView image;
public ViewHolder(@NonNull View itemView) {
super(itemView);
name=itemView.findViewById(R.id.fruit_name);
image=itemView.findViewById(R.id.fruit_image);
}
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout,parent,false);
ViewHolder viewHolder=new ViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
Fruit fruit=mList.get(position);
holder.name.setText(fruit.getName());
holder.image.setImageResource(fruit.getImage());
}
@Override
public int getItemCount() {
return mList.size();
}
}
//主活動
private List<Fruit> list=new ArrayList<>();
initFruits();
RecyclerView recyclerView=(RecyclerView) findViewById(R.id.recycler_view);
GridLayoutManager manager=new GridLayoutManager(this,2);
recyclerView.setLayoutManager(manager);
MyAdapter adapter=new MyAdapter(list);
recyclerView.setAdapter(adapter);
public void initFruits(){
for(int i=0;i<50;i++){
Fruit fruit=new Fruit("orange",R.drawable.orange);
list.add(fruit);
}
}
5.2AppBarLayout
如果你已經運行過上一節示例中的代碼的話，那么你一定會發現RecyclerView布局將Toolbar標題欄給遮擋住了，這同樣會影響我們界面的美觀，而我們在本節中要學的AppBarLayout就可以解決這個問題了，
AppBarLayout實際上是一個垂直方向上的LinearLayout，不同的是它在內部做了很多滾動事件的封裝，并應用了Material Design的設計理念，
示例：
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|snap|enterAlways"/>
//該屬性可以使控制元件更好的配合滑動事件，
//其中scroll表示當recyclerview向上滾動時，Toolbar會跟著一起向上移動并實作隱藏；
//snap表示當Toolbar還沒有完全隱藏或顯示時，會根據當前的距離自動選擇隱藏還是顯示；
//enterAlways表示當recyclerview向下滾動時，Toolbar會跟著向下移動并重新顯示，
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>//我們這里讓recyclerview向下偏移一個標題欄的長度
6.下拉重繪
我們在日常使用app時，經常會用到下拉重繪這個功能，而在本節中我們就來實作該功能，
示例：
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/swipe_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
//我們還要在活動中去處理重繪的邏輯
final SwipeRefreshLayout swipeRefreshLayout=(SwipeRefreshLayout) findViewById(R.id.swipe_layout);
swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);//設定進度條的顏色
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
//重繪的邏輯代碼,此處一般是從網咯中獲取資料，因此會開辟一個執行緒來進行處理，
swipeRefreshLayout.setRefreshing(false);//重繪完成后，關閉進度條
}
});
7.可折疊式標題欄
7.1CollapsingToolbarLayout
我們可以利用CollapsingToolbarLayout布局，來幫助我們實作可折疊式的標題欄，不過CollapsingToolbarLayout是不能單獨存在的，它只能作為AppBarLayout的直接子布局來使用，而AppBarLayout又必須是CoordinatorLayout的子布局，接下來我們就來看一個CollapsingToolbarLayout的示例吧，
示例：
//新活動的布局
<androidx.coordinatorlayout.widget.CoordinatorLayout
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">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">
<com.google.android.material.appbar.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">
<ImageView
android:id="@+id/fruit_image_view"
android:src="@drawable/orange"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>//該屬性表示該控制元件會隨著折疊而折疊
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar02"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>//該屬性表示該控制元件不會隨著折疊而折疊
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="35dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp"
app:cardCornerRadius="4dp">
<TextView
android:id="@+id/fruit_content_text"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/ic_comment"
app:layout_anchor="@id/appBar"//該屬性用于給懸浮按鈕定義一個錨點
app:layout_anchorGravity="bottom|end" />//該屬性用于設定懸浮按鈕相對于錨點的位置
</androidx.coordinatorlayout.widget.CoordinatorLayout>
//新活動的代碼
public class MainActivity2 extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
Intent intent=getIntent();
String name=intent.getStringExtra("name");
int image=intent.getIntExtra("image",-1);
Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar02);
CollapsingToolbarLayout collapsingToolbarLayout=(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
ImageView fruitImage=(ImageView) findViewById(R.id.fruit_image_view);
TextView fruitContent=(TextView) findViewById(R.id.fruit_content_text);
setSupportActionBar(toolbar);
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);
}
collapsingToolbarLayout.setTitle(name);
fruitImage.setImageResource(image);
StringBuilder content=new StringBuilder();
for(int i=0;i<3000;i++){
content.append(name);
}
fruitContent.setText(content.toString());
}
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case android.R.id.home:
finish();
break;
default:
}
return super.onOptionsItemSelected(item);
}
}
//recyclerview的配接器
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private List<Fruit> mList;
public MyAdapter(List<Fruit> list){
mList=list;
}
public class ViewHolder extends RecyclerView.ViewHolder{
View view;
TextView name;
ImageView image;
public ViewHolder(@NonNull View itemView) {
super(itemView);
view=itemView;
name=itemView.findViewById(R.id.fruit_name);
image=itemView.findViewById(R.id.fruit_image);
}
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull final ViewGroup parent, int viewType) {
View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout,parent,false);
final ViewHolder viewHolder=new ViewHolder(view);
viewHolder.view.setOnClickListener(new View.OnClickListener() {//設定點擊事件
@Override
public void onClick(View view) {
int position=viewHolder.getAdapterPosition();
Fruit fruit=mList.get(position);
Intent intent=new Intent(parent.getContext(),MainActivity2.class);
intent.putExtra("name",fruit.getName());
intent.putExtra("image",fruit.getImage());
parent.getContext().startActivity(intent);//開啟新活動
}
});
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
Fruit fruit=mList.get(position);
holder.name.setText(fruit.getName());
holder.image.setImageResource(fruit.getImage());
}
@Override
public int getItemCount() {
return mList.size();
}
}
7.2充分利用系統狀態欄空間
如果你運行了我們上一節中的代碼，那么你一定發現了系統狀態欄哪里感覺與我們的界面非常不搭配，而要解決這一問題也非常簡單，只需把系統狀態欄設定為透明色即可，
示例：
//首先給你要實作融合的控制元件及其父布局都設定上android:fitsSystemWindows="true"屬性
<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="250dp">
<com.google.android.material.appbar.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"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/fruit_image_view"
android:src="@drawable/orange"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"/>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar02"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="35dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp"
app:cardCornerRadius="4dp">
<TextView
android:id="@+id/fruit_content_text"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/ic_comment"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
//將系統狀態欄的顏色設定為透明色（因為只有在Android5.0后我們才可以這樣做，因此我們要對此做區分）
//values-v21下的styles檔案
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="FruitActivityTheme" parent="AppTheme">//使其繼承自AppTheme，這樣AppTheme所擁有的特性它也會擁有
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>
//values下的styles檔案
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="FruitActivityTheme" parent="AppTheme">
</style>
</resources>
//給第二個活動使用我們新建的主題
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.example.temp">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity2"
android:theme="@style/FruitActivityTheme" />
<activity
android:name=".MainActivity"
android:label="MyBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/50794.html
標籤：其他