Android初步進階之Design Support Library庫簡單使用(一)
為了元件可以更加友好,有更好的表達形式和響應,採用更加友好的元件,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的使用Android
- Android UI進階之旅2 Material Design之RecyclerView的使用AndroidUIMaterial DesignView
- Material Design 控制元件知識梳理(1) Android Design Support Library 是什麼Material Design控制元件Android
- This template depends on the Android Support libraryAndroid
- Android UI進階之旅7 Material Design之PaletteAndroidUIMaterial Design
- Android UI進階之旅7--Material Design之PaletteAndroidUIMaterial Design
- Android Support Library 學習入門Android
- 【Android進階】RecyclerView之ItemDecoration(一)AndroidView
- Android中Design庫之TabLayoutAndroidTabLayout
- NSOperation的進階使用和簡單探討
- NSThead的進階使用和簡單探討
- Android開發之ViewPager簡單使用AndroidViewpager
- 列舉的幾種使用案例(簡單,進階,switch,單例)單例
- Android Support Library 的新增功能 | 中文教學視訊Android
- Android動畫進階—使用開源動畫庫nineoldandroidsAndroid動畫LDA
- 提高Android Support Library穩定性的三個關鍵方法Android
- Android自我進階——JAVA之JVMAndroidJavaJVM
- android-async-http框架庫的簡單使用AndroidHTTP框架
- flutter的進階之路之Material Design與IOS風格元件FlutterMaterial DesigniOS元件
- Android之Material DesignAndroidMaterial Design
- Android Support Annotations 使用詳解Android
- Android UI進階之旅1 Material Design基本概念以及樣式AndroidUIMaterial Design
- 【Android進階】RecyclerView之快取(二)AndroidView快取
- Android 進階之HandlerThread 使用場景及原始碼解析Androidthread原始碼
- Python爬蟲進階之urllib庫使用方法Python爬蟲
- Android開發之FastJson概述與簡單使用AndroidASTJSON
- BleLibrary.一個簡單的android BLE庫Android
- Android Support 庫各版本功能介紹Android
- Homebrew進階使用教程(一)
- JavaScript進階之(一) this指標JavaScript指標
- 我的書單 一個進階的Android程式設計師Android程式設計師
- 【Android進階】RecyclerView之繪製流程(三)AndroidView
- Android進階2之WebView(瀏覽器)AndroidWebView瀏覽器
- JAVA進階:一個簡單Thread緩衝池的實現Javathread
- 進階高階IoT架構-教你如何簡單實現一個訊息佇列架構佇列
- Metasploit簡單使用——後滲透階段
- Material Design 之 TabLayout 使用Material DesignTabLayout
- Android進階 一個專案,一個ToolbarAndroid