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里面就可以了。 使用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) } }

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

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