为了组件可以更加友好,有更好的表达形式和响应,采用更加友好的组件,Design Support Library库,是不错的选择。下面即将涉Snackbar、TextInputLayout和TextInputEditText组合、PloatingActionButton和ViewPager、TabLayout、RecyclerView。
文档官网地址(国外网站)
下面,介绍几个组件。
吃了亏了,回头想来复习来着,忘了怎么添加依赖。第一次写的时候忘了加。以后,一定记得加上。
依赖添加方式如下:
- 第一种,build.gradle直接添加:
compile group: 'com.google.android.material', name: 'material', version: '1.0.0'
- 第二种,一个万金油,你几乎少了任何的依赖都可以解决的方法。在Maven依赖官网搜素自己需要的依赖,直接点击版本,选择gradle,把那个里面的内容复制到build.gradle里面就可以了。
- 使用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)
}
}
好了,大功告成,运行试试!
果然,包装带师。
- 代码结构
下一篇,继续介绍。