Design Support Library 是在Google I/O 2015上发布的一个全新的兼容函数库，使得开发者可以在Android 2.1(API Level7)及其以上的设备中实现Material Design 的效果，这个函数库提供了一系列的控件，主要包括：Snackbak、Navigation View、FloatActionButton、CoordinatorLayout、CollapsingToolbarLayout等.
A、Snackbar(提示栏)
Snackbar是带有动画效果的快速提示栏，他显示在屏幕的底部，是用来代替Toast的一个全新控件,他基本继承了Toast的属性和方法，和Toast最大不同的是Snackbar可以带有按钮，当Snackbar显示时，用户可以点击按钮执行对应的操作。支持滑动消失，如果用户没有任何操作，Snackbar在到大之情时间之后就会自动消失。
例子
but.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(layout,"点击了一次",Snackbar.LENGTH_SHORT).
setAction("撤销", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(DesignActivity.this, "撤销了删除", Toast.LENGTH_SHORT).show();
}
})/*.setCallback(new Snackbar.Callback(){
@Override
public void onDismissed(Snackbar transientBottomBar, int event) {
super.onDismissed(transientBottomBar, event);
switch (event){
}
}
})*/.show();
}
});
B、TextInputLayout(EditText容器)
为EditText默认生成一个浮动的Label,当用户输入时，hint字符会自动移动到EditText的左上角
（1）属性描述
QQ图片20180921173201.png
（2）例子
xml
<android.support.design.widget.TextInputLayout
android:id="@+id/account"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_centerInParent="true"
app:counterEnabled="true"
app:counterMaxLength="11"
app:counterOverflowTextAppearance="@color/colorPrimary"
app:counterTextAppearance="@color/colorPrimaryDark"
app:errorEnabled="true"
app:errorTextAppearance="@color/colorPrimaryDark"
android:layout_height="wrap_content" >
<EditText
android:id="@+id/account_txt"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:hint="输入账号"/>
</android.support.design.widget.TextInputLayout>
Activity
account_txt = findViewById(R.id.account_txt);
inputLayout = findViewById(R.id.account);
account_txt.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
if (s.length()>11){
inputLayout.setError("错了额");
}
}
});
C、TabLayout(tab分组功能)
TabLayout控件用于在应用中轻松地添加Tab分组功能
固定Tabs:对应xml配置中的appLtabModel=”fixed”
可滑动的Tabs:对应xml配置中的app:tabModel=”scrollable”
（1）属性描述
QQ图片20180921173426.png
QQ图片20180921173506.png
（2）tabLayout+ViewPager+fragment例子
a、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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.explem.chaohaozhao.mvp_retrofit_rxJava.mvp.view.MainActivity">
<com.explem.chaohaozhao.mvp_retrofit_rxJava.custom.CustomViewPager
android:id="@+id/customViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/MyTabLayout"/>
</LinearLayout>
b、style设置属性
<style name="MyTabLayout">
<item name="tabGravity">fill</item>
<item name="tabTextColor">@color/color_000</item>
<item name="tabSelectedTextColor">@color/colorPrimary</item>
<item name="tabIndicatorHeight">0dp</item>
<item name="tabMode">fixed</item>
</style>
d、Activity中（kotlin）
import android.support.design.widget.TabLayout
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import com.explem.chaohaozhao.mvp_retrofit_rxJava.R
import com.explem.chaohaozhao.mvp_retrofit_rxJava.adapter.FragmentPageAdapter
import com.explem.chaohaozhao.mvp_retrofit_rxJava.base.BaseActivity
import com.explem.chaohaozhao.mvp_retrofit_rxJava.base.BaseFragment
import com.explem.chaohaozhao.mvp_retrofit_rxJava.base.BasePresenter
import com.explem.chaohaozhao.mvp_retrofit_rxJava.mvp.view.fragment.MainFragment
import com.explem.chaohaozhao.mvp_retrofit_rxJava.mvp.view.fragment.MyFragment
import com.explem.chaohaozhao.mvp_retrofit_rxJava.mvp.view.fragment.OtherFragment
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : BaseActivity<BasePresenter<*>>(){
private var fragment : ArrayList<BaseFragment<*>>? = null
private var tabstring : ArrayList<String>? = null
private val fragments = arrayOf<BaseFragment<*>>(MainFragment(),MyFragment(),OtherFragment())
private val tabImg = intArrayOf(R.drawable.tab_select_main_img,R.drawable.tab_select_me_img,R.drawable.tab_select_other_img)
private val tabTitles = intArrayOf(R.string.main_page,R.string.me_page,R.string.other_page)
override fun getLayoutId(): Int {
return R.layout.activity_main
}
override fun initData() {
initTab()
}
private fun initTab(){
fragment = ArrayList()
tabstring = ArrayList()
for (i in tabTitles.indices){
tabstring!!.add(getString(tabTitles[i]))
}
for(i in tabstring!!.indices){
fragment!!.add(fragments[i])
}
tabLayout.setupWithViewPager(customViewPager)
customViewPager.adapter = FragmentPageAdapter(supportFragmentManager, fragment!!, tabstring!!)
for (i in tabstring!!.indices) {
if (null != tabLayout) {
var tab: TabLayout.Tab = tabLayout.getTabAt(i)!!
tab.setCustomView(R.layout.layout_item_tab)
var view = tab.customView!!.parent as View
var tv = view.findViewById<TextView>(R.id.tab_txt)
var img = view.findViewById<ImageView>(R.id.tab_iv)
tv.text = getString(tabTitles[i])
img.setImageResource(tabImg[i])
}
}
}
override fun getActivity(): BaseActivity<*> {
return this
}
}
D、Navigation(导航抽屉)
自Material Design发布后，我们知道如何设计一个符合标准的导航抽屉，使用导航栏需要传入一组参数，一个可选的头部布局，以及一个用于构建导航选项的菜单。然后给导航栏添加响应事件
（1）首先普通的导航栏
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="@+id/fragment_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="@+id/title_bar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#63B8FF" >
<ImageView
android:id="@+id/leftmenu"
android:layout_width="48dp"
android:layout_height="48dp"
android:padding="12dp"
android:src="@drawable/tt" />
<TextView
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_centerInParent="true"
android:gravity="center"
android:text="Title Bar" />
<ImageView
android:id="@+id/rightmenu"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentRight="true"
android:padding="12dp"
android:src="@drawable/ff" />
</RelativeLayout>
<LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/title_bar"
android:orientation="vertical" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/left"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@android:color/white" >
<ListView
android:id="@+id/left_listview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</RelativeLayout>
<RelativeLayout
android:id="@+id/right"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#BCEE68" >
<ImageView
android:id="@+id/p_pic"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_centerInParent="true"
android:src="@drawable/tt" />
<TextView
android:id="@+id/right_textview"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_below="@id/p_pic"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp"
android:text="个人中心"
android:textColor="@android:color/black"
android:textSize="14sp" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
（2）Navigation导航菜单
a、重要的属性（外层DrawerLayout）
QQ图片20180921173918.png
注：主布局一定在navigationview之上，点击事件才有用
b、例子（有注释）
（1）Menu布局 nav_draw_view
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<!--菜单选项-->
<item
android:id="@+id/nav_home"
android:icon="@drawable/ff"
android:title="Home"
/>
<item
android:id="@+id/nav_msg"
android:title="message"
android:icon="@drawable/tt"/>
<item
android:id="@+id/nav_friends"
android:icon="@drawable/ff"
android:title="friends"/>
<!--添加分割线 group-->
<group android:id="@+id/group1">
<item
android:id="@+id/nav_msg1"
android:title="message1"
android:icon="@drawable/tt"/>
<item
android:id="@+id/nav_friends1"
android:icon="@drawable/ff"
android:title="friends1"/>
</group>
</menu>
（2）头部布局 nav_menu_header
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/headerLayout"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/nav_header_img"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/ff"
android:layout_margin="5dp"
android:scaleType="fitXY"/>
<TextView
android:id="@+id/nav_header_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
</LinearLayout>
（3）主布局（activity_navigation_view）
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.explem.chaohaozhao.myviewpager.view.NavigationViewActivity">
<!--注：主布局一定在navigationview之上，点击事件才有用-->
<LinearLayout
android:id="@+id/ffff"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/but"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="打开抽屉"/>
</LinearLayout>
<!--因为需要头布局点击所以不在布局中引用 app:headerLayout="@layout/nav_menu_header"-->
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:id="@+id/nav_view"
app:menu="@menu/nav_draw_view"
/>
</android.support.v4.widget.DrawerLayout>
（4）Activity 代码（NavigaViewActivity）
import android.annotation.SuppressLint;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.explem.chaohaozhao.myviewpager.R;
import com.explem.chaohaozhao.myviewpager.utils.SnackbarUtils;
public class NavigationViewActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener{
NavigationView navigationView;
Button button;
DrawerLayout drawerlayout;
LinearLayout ffff;
ImageView headerImg;
TextView headerTxt;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_navigation_view);
drawerlayout = findViewById(R.id.drawerlayout);
button = findViewById(R.id.but);
navigationView = findViewById(R.id.nav_view);
ffff = findViewById(R.id.ffff);
/**颜色显示他本身的颜色,正常显示*/
navigationView.setItemIconTintList(null);
navigationView.setNavigationItemSelectedListener(this);
/**获取head点击事件*/
View headerLayout = navigationView.inflateHeaderView(R.layout.nav_menu_header);
headerImg = headerLayout.findViewById(R.id.nav_header_img);
headerTxt = headerLayout.findViewById(R.id.nav_header_txt);
headerImg.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
SnackbarUtils.getInstans().showShort(drawerlayout,"ddddddddddd");
}
});
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
drawerlayout.openDrawer(GravityCompat.START);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
return super.onCreateOptionsMenu(menu);
}
@SuppressLint("LongLogTag")
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
Log.d("onNavigationItemSelected",item.getTitle()+" "+item.getItemId());
switch (item.getItemId()){
case R.id.nav_home:
button.setText("nav_home");
break;
case R.id.nav_msg:
button.setText("nav_msg");
break;
case R.id.nav_friends:
button.setText("nav_friends");
break;
case R.id.nav_msg1:
button.setText("nav_msg1");
break;
case R.id.nav_friends1:
button.setText("nav_friends1");
break;
default:
break;
}
drawerlayout.closeDrawers();
return true;
}
}
E、FloatingActionButton(浮动操作按钮)
浮动操作按钮(FAB)是在Material Design 准则中引入的新的组件，用来强调当前屏幕重要的一些操作，提供的应该是高频操作（最好在Activity中需要一直显示）
（1）属性描述
QQ图片20180921174208.png
（2）例子
xml
<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_margin="10dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
app:borderWidth="0dp"
app:backgroundTint="@color/colorPrimary"
app:useCompatPadding="true"
app:fabSize="mini"
android:scaleType="fitXY"
android:src="@drawable/ff"/>
Activity
floatingActionButton = findViewById(R.id.floatingActionButton);
floatingActionButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
SnackbarUtils.getInstans().showShort(drawerlayout,"ddddddddddd");
}
});
F、CoordinatorLayout(加强型FrameLayout)
CoordinatorLayout 是Design Support Library 引入的一个功能强大的兼容库加强型的FrameLayout,可以使得不同视图组件直接相互作用，并协调动画效果。是基于Behaviors中的规则集。例如：我们使用FloatingActionButton 和Snackbar出现和消失时，FBA会自动向上移动和向下移动.CoordinatorLayout 作为FAB的父容器。
xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.explem.chaohaozhao.myviewpager.view.CoordinatorLayoutActivity">
<RelativeLayout
android:id="@+id/listviw"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
app:borderWidth="0dp"
app:backgroundTint="@color/colorPrimary"
app:useCompatPadding="true"
app:fabSize="mini"
app:layout_anchor="@id/listviw"
app:layout_anchorGravity="bottom|right|end"
android:scaleType="fitXY"
android:src="@drawable/ff"/>
</android.support.design.widget.CoordinatorLayout>
Activity
public class CoordinatorLayoutActivity extends AppCompatActivity {
CoordinatorLayout coordinator;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_coordinator_layout);
coordinator = findViewById(R.id.coordinator);
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_DOWN){
SnackbarUtils.getInstans().showShort(coordinator,"CoordinatorLayoutActivity");
}
return super.dispatchTouchEvent(ev);
}
}
G、CollapsingToolbarLayout(滚动时候收缩ToolBar)
xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="@drawable/ff"
/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorAccent"
app:layout_collapseMode="parallax"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/app_name"
android:scrollbars="vertical"
android:layout_marginTop="?attr/actionBarSize"
android:textColor="@color/colorPrimaryDark"
/>
</android.support.design.widget.CoordinatorLayout>
H、BottomSheetBehavior(底部动作条)
BottomSheetBehavior 控件是在android Support Library23.2中引入的，可以轻松实现底部动作条功能，地步动作条的引入需要在不居中添加app:layout_behavior属性，并将这个布局作为CoordinatorLayout 的子View
xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:id="@+id/lin"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical"
android:background="@android:color/holo_blue_light"
android:gravity="center"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Activity
View view = findViewById(R.id.lin);
BottomSheetBehavior behavior = BottomSheetBehavior.from(view);
/**实现状态变化监听*/
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
//状态变化
Log.d("onStateChanged",""+newState);
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
//拖动动作
Log.d("onSlide",""+slideOffset);
}
});
网友评论