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進階】RecyclerView之ItemDecoration（一）
2019-03-07
AndroidView
Android之Material Design
2018-12-09
AndroidMaterial Design
NSOperation的進階使用和簡單探討
2018-11-24
NSThead的進階使用和簡單探討
2018-11-15
Android自我進階——JAVA之JVM
2020-11-04
AndroidJavaJVM
Android 進階之HandlerThread 使用場景及原始碼解析
2019-01-29
Androidthread原始碼
列舉的幾種使用案例（簡單，進階，switch，單例）
2018-07-03
單例
Python爬蟲進階之urllib庫使用方法
2021-09-11
Python爬蟲
【Android進階】RecyclerView之快取（二）
2019-03-12
AndroidView快取
flutter的進階之路之Material Design與IOS風格元件
2019-09-03
FlutterMaterial DesigniOS元件
configure: error: libcurl >= 7.28.0 library and headers are required with support for https
2024-04-05
ErrorHeaderUIHTTP
【Android進階】RecyclerView之繪製流程（三）
2019-04-10
AndroidView
Android中Lottie的簡單使用
2018-05-29
Android
Android高手進階之兩幅圖搞定DilogFragment
2019-01-12
AndroidFragment
Android高階進階之路【一】Android中View繪製流程淺析
2021-11-03
AndroidView
Android進階一個專案，一個Toolbar
2019-03-04
Android
Android分頁元件Paging簡單使用
2018-11-17
Android元件
簡單好看的Android圓形進度條對話方塊開源庫
2021-09-09
Android
JavaScript進階之(一) this指標
2020-11-06
JavaScript指標
進階高階IoT架構-教你如何簡單實現一個訊息佇列
2021-02-22
架構佇列
Metasploit簡單使用——後滲透階段
2020-10-08
Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局
2019-04-11
AndroidMaterial Design控制元件AI
Android自定義View之實現簡單炫酷的球體進度球
2018-12-29
AndroidView
使用JavaScript手寫一個簡單的快捷鍵庫
2024-02-28
JavaScript
Android設計模式之——單例模式之原始碼使用場景（一）
2019-03-02
Android設計模式單例原始碼
Android進階：七、Retrofit2.0原理解析之最簡流程
2019-04-27
Android
用 Material Design 寫了一個簡單的 API 測試工具
2019-10-18
Material DesignAPI
Android進階（七）Android中的ClassLoader
2019-02-11
Android
一隻android簡訊控制馬的簡單分析
2020-08-19
Android
Flutter元件之ClipRRect簡單使用
2020-04-16
Flutter元件
Android進階——自定義View之雙向選擇Seekbar
2019-03-30
AndroidView
Android進階之Walle多渠道打包&Tinker熱修復
2019-03-26
Android
Android 進階 ———— Handler系列之建立子執行緒Handler
2018-05-11
Android執行緒
一個簡單多庫配置
2018-11-02
Android最簡單的側劃選單，DrawerLayout的使用
2018-04-17
Android
【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一）
2019-02-22
Android
一個簡單、輕量、可隨意定製的Android版本更新庫 ?
2018-11-30
Android
影象處理庫GPUImage簡單使用
2018-09-19
GPUUI

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

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

相關文章