12. Material Design

12. Material Design

kotlin

• 引入库

• // project structure
  com.google.android.material:1.1.0
  
  // app\build.gradle
  implementation 'de.hdodenhof:circleimageview:3.0.1'
  

Design

package com.example.helloworld

import android.os.Bundle
import androidx.appcompat.widget.Toolbar

class Design : BaseActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.design_layout)

        val toolbar5: Toolbar = findViewById(R.id.toolbar5)
        setSupportActionBar(toolbar5)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)            // 设置返回按钮
        toolbar5.setNavigationOnClickListener { finish() }             // 设置结束 act2

        ActivityCollector.addActivity(this)


    }
}

MainActivity2

package com.example.helloworld

import android.content.Context
import android.content.Intent
import android.os.Bundle
import android.util.Log
import android.widget.ArrayAdapter
import android.widget.Button
import android.widget.ListView
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar


class MainActivity2 : BaseActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.second_layout)

        // toolbar 部分
        val toolbar: Toolbar = findViewById(R.id.toolbar2)
        setSupportActionBar(toolbar)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)            // 设置返回按钮
        toolbar.setNavigationOnClickListener { finish() }             // 设置结束 act2

        ActivityCollector.addActivity(this)

        // 从前一个 Activity 接收数据
        val extraData1 = intent.getStringExtra("param1")
        val extraData2 = intent.getStringExtra("param2")
        Log.d("Activity2", "param1 is $extraData1, param2 is $extraData2")


        // 返回数据（但是未实现）
        val button2: Button = findViewById(R.id.button2)        // 通过 id 找到 view, 并指明类型为 button
        button2.setOnClickListener {
            val intent = Intent().apply { putExtra("data_return", "Hello Activity1") }
            setResult(RESULT_OK, intent)
            finish()
        }

        // 关闭所有 Activity
        val button3: Button = findViewById(R.id.button3)
        button3.setOnClickListener {
            ActivityCollector.finishAll()
        }

        val button4: Button = findViewById(R.id.button4)
        button4.setOnClickListener {
            startNewActivity(this, MainActivity3::class.java)
        }

        val button5: Button = findViewById(R.id.button5)
        button5.setOnClickListener {
            startNewActivity(this, MainActivity4::class.java)
        }

        val button7: Button = findViewById(R.id.button7)
        button7.setOnClickListener {
            startNewActivity(this, FragmentActivity::class.java)
        }
        val button8: Button = findViewById(R.id.button8)
        button8.setOnClickListener {
            startNewActivity(this, FileStorage::class.java)
        }

        val button9: Button = findViewById(R.id.button9)
        button9.setOnClickListener {
            startNewActivity(this, DataPreference::class.java)
        }

        val button10: Button = findViewById(R.id.button10)
        button10.setOnClickListener {
            startNewActivity(this, SqliteDB::class.java)
        }

        val button11: Button = findViewById(R.id.button11)
        button11.setOnClickListener {
            startNewActivity(this, Design::class.java)
        }

    }

}

design_layout

<FrameLayout 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">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar5"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>

second_layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Back" />

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Quit App" />

    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Go third" />

    <Button
        android:id="@+id/button5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Go forth" />

    <Button
        android:id="@+id/button7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Go Fragment" />

    <Button
        android:id="@+id/button8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="File Storage" />

    <Button
        android:id="@+id/button9"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="SharedPreferences" />

    <Button
        android:id="@+id/button10"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="SQLite" />

    <Button
        android:id="@+id/button11"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="design" />

</LinearLayout>

折叠标题栏

<CoordinatorLayout>        <!-- 1. 外壳：协调滚动 -->
  
  <AppBarLayout>           <!-- 2. 顶部：可折叠的帽子 -->
    <CollapsingToolbarLayout>
      <ImageView />        <!-- 背景图 -->
      <Toolbar />          <!-- 标题栏 -->
    </CollapsingToolbarLayout>
  </AppBarLayout>

  <NestedScrollView>       <!-- 3. 主体：可滚动的内容 -->
    <LinearLayout>
      <CardView>...</CardView>
    </LinearLayout>
  </NestedScrollView>

  <FloatingActionButton /> <!-- 4. 按钮：漂浮在上面 -->

</CoordinatorLayout>

<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/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="#FF1BCBFF"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/fruitImageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                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="wrap_content">
            <com.google.android.material.card.MaterialCardView
                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/fruitContentText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp" />
            </com.google.android.material.card.MaterialCardView>
        </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_plug"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>