Android初步进阶之Design Support Library库简单使用(一)

为了组件可以更加友好，有更好的表达形式和响应，采用更加友好的组件，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里面就可以了。

1. 使用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()
    }
}

2. 使用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>

3. 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" />

4. 使用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)

    }
}

好了，大功告成，运行试试！
果然，包装带师。

• 代码结构
  
  下一篇，继续介绍。