Android初步進階之Design Support Library庫簡單使用(一)

秋山澪與折木奉太郎的愛發表於2020-10-22

為了元件可以更加友好，有更好的表達形式和響應，採用更加友好的元件，Design Support Library庫，是不錯的選擇。下面即將涉Snackbar、TextInputLayout和TextInputEditText組合、PloatingActionButton和ViewPager、TabLayout、RecyclerView。

使用Snackbar來替代Toast
示例：

首先，建立用來的測試的main_activity.xml。

<?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"
    android:id="@+id/layout_out"
    >
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Snackbar"
        android:gravity="center"
        android:layout_gravity="center"
        />
</LinearLayout>

然後，在主活動中設定事件。

import android.app.Activity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.LinearLayout
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.snackbar.BaseTransientBottomBar
import com.google.android.material.snackbar.Snackbar

class MainActivity :Activity(){
    var contentView:LinearLayout? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)
        contentView = findViewById(R.id.layout_out)
        val button:Button = findViewById(R.id.button)
        button.setOnClickListener {
            showSnackbar()
        }
    }

    /**
     * 展示Snackbar
     */
    private fun showSnackbar():Unit{
    //簡單的使用模式，典型的構建者模式
        Snackbar.make(contentView!!, "標題", Snackbar.LENGTH_LONG)
            .setAction("點選事件", View.OnClickListener {
                Toast.makeText(this, "取消", Toast.LENGTH_SHORT).show()
            })
            .setDuration(BaseTransientBottomBar.LENGTH_LONG)
            .show()
    }
}

使用TextInputLayout和TextInputEditText組合來代替EditText
需要注意，TextInputLayout的內部子元件必須是TextInputEditText，並且必須只能使用它。並且一個Layout中只能有一個EditText。
示例：

<?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"
    android:id="@+id/layout_out">
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        >
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="username"
            android:maxLines="1"
            android:textColorHint="#000000"
            android:maxLength="25"
            />
    </com.google.android.material.textfield.TextInputLayout>
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        >
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="password"
            android:maxLines="1"
            android:maxLength="25"
            />
    </com.google.android.material.textfield.TextInputLayout>
</LinearLayout>

PloatingActionButton使用
就是這種東西：

示例：

   <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="#000000"
        android:clickable="true"
        android:src="@drawable/abc_vector_test"
        app:elevation="10dp"
        app:pressedTranslationZ="20dp" />

使用TabLayout代替HorizontalScrollView實現選項卡。
之前，使用HorizontalScrollView實現選項卡，廢了一天時間才弄明白，這不是來了新的元件，果然封裝帶師。

首先，建立主介面main_activity.xml。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/layout_out">
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        >
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#ADBE107E"
            app:tabMode="scrollable"
            />
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
</LinearLayout>

裡面，放入了Toolbar、TabLayout、ViewPager等元件。這就是最外層的容器了。

接著再再建立，要放入ViewPager的下一層元件。list_fragment.xml。

<?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.recyclerview.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

好了，我們再套娃，建立放入它中的元件。item_list.xml。

<?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="wrap_content">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="測試"
        android:gravity="center"
        android:textSize="24sp"
        />
</LinearLayout>

套完娃，再在程式碼裡套娃。

建立RecyclerView的介面卡。

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.recyclerview.widget.RecyclerView
import com.google.android.material.snackbar.BaseTransientBottomBar
import com.google.android.material.snackbar.Snackbar

class RecyclerViewAdapter(val mContext:Context?) : RecyclerView.Adapter<RecyclerViewAdapter.Companion.ViewHolder>(){
    companion object{
        class ViewHolder(val mView: View) : RecyclerView.ViewHolder(mView){}
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerViewAdapter.Companion.ViewHolder {
        val view:View = LayoutInflater.from(parent.context).inflate(R.layout.item_list, parent, false)
        return  ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val view:View = holder.mView
        view.setOnClickListener {
            Snackbar.make(view, "點了", Snackbar.LENGTH_LONG)
                .setAction("事件", View.OnClickListener {
                    Toast.makeText(mContext, "事件觸發", Toast.LENGTH_SHORT).show()
                })
                .setDuration(BaseTransientBottomBar.LENGTH_SHORT)
                .show()
        }
    }

    override fun getItemCount(): Int {
        return 10
    }
}

接著，建立要放入每一個Viewpager的Fragment。檔案ListFragment.kt

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class ListFragment : Fragment(){
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val contentView = LayoutInflater.from(context).inflate(R.layout.list_fragment,container, false)
        val mRecyclerView = contentView.findViewById<RecyclerView>(R.id.list)
        mRecyclerView.layoutManager = LinearLayoutManager(context)
        mRecyclerView.adapter = RecyclerViewAdapter(context)
        return contentView
    }
}

建立Fragment的介面卡.FragmentAdapter.kt

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter

class FragmentAdapter(val fm:FragmentManager, val fragments:ArrayList<Fragment>,val  titles:ArrayList<String>) : FragmentStatePagerAdapter(fm){

    override fun getItem(position: Int): Fragment {
        return fragments.get(position)
    }

    override fun getCount():Int = fragments.size

    override fun getPageTitle(position: Int): CharSequence? = titles.get(position)
}

建立主活動MainActivity.kt

import android.app.Activity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.LinearLayout
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.drawerlayout.widget.DrawerLayout
import androidx.fragment.app.Fragment
import androidx.viewpager.widget.ViewPager
import com.google.android.material.snackbar.BaseTransientBottomBar
import com.google.android.material.snackbar.Snackbar
import com.google.android.material.tabs.TabLayout

class MainActivity :AppCompatActivity() {
    var mDrawerLayout:DrawerLayout? = null
    var mViewPager:ViewPager? = null
    var mTabLayout:TabLayout? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)
        initViewPager()
    }
    fun initViewPager(){
        mTabLayout = findViewById(R.id.tab_layout)
        mViewPager = findViewById(R.id.view_pager)
        val titles = ArrayList<String>()
        val fragments= ArrayList<Fragment>()
        titles.add("精選")
        titles.add("體育")
        titles.add("巴薩")
        titles.add("購物")
        titles.add("明星")
        titles.add("精選")
        titles.add("體育")
        titles.add("巴薩")
        titles.add("購物")
        titles.add("明星")
        //初始化tab與fragment
        titles.forEach { mTabLayout!!.addTab(mTabLayout!!.newTab().setText(it)); fragments.add(ListFragment()) }
        val mFragmentAdapter:FragmentAdapter = FragmentAdapter(this.supportFragmentManager, fragments, titles)
        mViewPager!!.adapter = mFragmentAdapter
        mTabLayout!!.setupWithViewPager(mViewPager)
        mTabLayout!!.setTabsFromPagerAdapter(mFragmentAdapter)

    }
}

好了，大功告成，執行試試！
在這裡插入圖片描述果然，包裝帶師。

程式碼結構

Android Design Support Library--FloatingActionButton及其Behavior的使用
2016-10-27
Android
Android UI進階之旅2 Material Design之RecyclerView的使用
2017-12-21
AndroidUIMaterial DesignView
Material Design 控制元件知識梳理(1) Android Design Support Library 是什麼
2017-12-21
Material Design控制元件Android
This template depends on the Android Support library
2012-09-27
Android
Android UI進階之旅7 Material Design之Palette
2017-12-21
AndroidUIMaterial Design
Android UI進階之旅7--Material Design之Palette
2017-05-17
AndroidUIMaterial Design
Android Support Library 學習入門
2015-09-03
Android
【Android進階】RecyclerView之ItemDecoration（一）
2019-03-07
AndroidView
Android中Design庫之TabLayout
2017-03-11
AndroidTabLayout
NSOperation的進階使用和簡單探討
2018-11-24
NSThead的進階使用和簡單探討
2018-11-15
Android開發之ViewPager簡單使用
2017-12-13
AndroidViewpager
列舉的幾種使用案例（簡單，進階，switch，單例）
2018-07-03
單例
Android Support Library 的新增功能 | 中文教學視訊
2018-01-03
Android
Android動畫進階—使用開源動畫庫nineoldandroids
2016-06-29
Android動畫LDA
提高Android Support Library穩定性的三個關鍵方法
2014-04-15
Android
android-async-http框架庫的簡單使用
2016-11-21
AndroidHTTP框架
Android自我進階——JAVA之JVM
2020-11-04
AndroidJavaJVM
flutter的進階之路之Material Design與IOS風格元件
2019-09-03
FlutterMaterial DesigniOS元件
Android之Material Design
2018-12-09
AndroidMaterial Design
Android Support Annotations 使用詳解
2015-07-23
Android
Android UI進階之旅1 Material Design基本概念以及樣式
2017-12-21
AndroidUIMaterial Design
【Android進階】RecyclerView之快取（二）
2019-03-12
AndroidView快取
Android 進階之HandlerThread 使用場景及原始碼解析
2019-01-29
Androidthread原始碼
Python爬蟲進階之urllib庫使用方法
2021-09-11
Python爬蟲
Android開發之FastJson概述與簡單使用
2014-09-12
AndroidASTJSON
BleLibrary.一個簡單的android BLE庫
2017-12-02
Android
Android Support 庫各版本功能介紹
2017-11-14
Android
Homebrew進階使用教程(一)
2018-01-10
JavaScript進階之(一) this指標
2020-11-06
JavaScript指標
我的書單一個進階的Android程式設計師
2016-03-13
Android程式設計師
【Android進階】RecyclerView之繪製流程（三）
2019-04-10
AndroidView
Android進階2之WebView（瀏覽器）
2012-03-25
AndroidWebView瀏覽器
JAVA進階：一個簡單Thread緩衝池的實現
2009-03-14
Javathread
進階高階IoT架構-教你如何簡單實現一個訊息佇列
2021-02-22
架構佇列
Metasploit簡單使用——後滲透階段
2020-10-08
Material Design 之 TabLayout 使用
2016-12-29
Material DesignTabLayout
Android進階一個專案，一個Toolbar
2019-03-04
Android

Android初步進階之Design Support Library庫簡單使用(一)

為了元件可以更加友好，有更好的表達形式和響應，採用更加友好的元件，Design Support Library庫，是不錯的選擇。下面即將涉Snackbar、TextInputLayout和TextInputEditText組合、PloatingActionButton和ViewPager、TabLayout、RecyclerView。

相關文章