Android6.0-新控件(一)
[转载请注明出处:http://blog.csdn.net/listeners_Gao/article/details/52886162 —By ListenerGao]
前言
谷歌在2015年I/O大会上发布了Android M的新版本.在这次的I/O大会上,谷歌对Android并没有做很大的改变,主要完善之前的Android L版本.不过这次谷歌在继Material Design风格之后,做了很多风格上的兼容,并推出了Android Design Support Library库,全面支持Material Design设计风格的UI效果.该库包含了FloatingActionButton，TextInputLayout，Snackbar，TabLayout,NavigationView,CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout八个新控件.由于篇幅的原因,我们先来学习一下前四个的使用.后续会继续完成其余控件的使用.
使用
需要导入Android Design Support Library库,该库支持Android 2.1以上设备.在build.gradle(moudle:app)中添加依赖:compile 'com.android.support:design:24.2.1' 版本号可自己匹配.
FloatingActionButton
效果图:
注意:
设置FloatingActionButton的背景颜色时使用:app:backgroundTint,默认为 Theme 主题中的 “colorAccent”的颜色;如果使用android:backgroundTint运行时,则会报解析Xml异常.
设置FloatingActionButton的大小,通过app:fabSize属性来设置,有三种格式:auto(基于窗口的大小而自动适应),normal(正常大小的按钮),mini(迷你大小的按钮).这里设置layout_width和layout_height貌似没有什么效果,FloatingActionButton的大小由fabSize属性来决定.可当你把宽和高设置成match_parent时,FloatingActionButton的大小会充满父窗体,大小虽然改变了,但这样的设置在开发中貌似没一点卵用.
app:elevation :设置 FloatingActionButton 阴影的深度，默认有阴影.
app:pressedTranslationZ :设置 FloatingActionButton 点击时阴影的大小.
app:rippleColor :设置 FloatingActionButton 点击时的颜色,也就是设置上面属性后,阴影的颜色.
app:useCompatPadding :设置是否启用compat的填充.
src - 设置FAB的图标，Google建议符合Design设计的该图标大小为24dp.
app:layout_anchor - 设置FAB的锚点，即以哪个控件为参照点设置位置.
app:layout_anchorGravity - 设置FAB相对锚点的位置，值有 bottom、center、right、left、top等.
以上在Xml布局中设置的属性,在代码中同样可以设置.
Snackbar
简介: Snackbar用于展示一条简短的消息给用户,该消息在很多的时间内会消失.该消息只是给用户一个提示,用户不需要去操作.例如:当我们发送一条Email时,告诉用户该Email发送的状态.Snackbar和Toast很像,只不过Toast是在屏幕中心弹出,而Snackbar是在屏幕底部弹出.
使用:代码中使用
//得到Snackbar对象 final Snackbar snackbar = Snackbar.make(coordinatorLayout, "我是Snackbar...", Snackbar.LENGTH_LONG); //设置Snackbar背景 snackbar.getView().setBackgroundResource(R.color.colorPrimary); snackbar.show(); //显示带Action的Snackbar snackbar.setAction("取消", new View.OnClickListener() { @Override public void onClick(View v) { //关闭Snackbar snackbar.dismiss(); } });常用方法:
- make() 方法,生成Snackbar消息对象,第一个参数为View对象,Snackbar 会试着寻找一个父 View 来 hold 这个 View。Snackbar 将遍历整个 View tree 来寻找一个合适的父 View，它可能是一个 coordinatorLayout 也可能是 window decor’s content view，随便哪一个都行.后面的两个参数和Toast一致.
- setDuration() 方法：设置显示持续时间.
- setAction() 方法：设置 Action，第一个参数会作为按钮（Actiong）的文本，第二个参数是按钮的点击事件.
- setCallback() 方法：Snackbar 的显示和消失会回调 Snackbar.Callback的 onDismissed()和 onShown()方法.
- getView()：获取 Snackbar 的 View,进而可以定制Snackbar.
注意:
- 谷歌其实更建议在CoordinatorLayout(不要着急,后面会细说)布局中使用Snackbar(make()方法中传入的View),当用户滑动屏幕时,可以使Snackbar消失.
- 当然,如果你只是想在底部弹出提示消息,那么make()方法中传入的任意的View即可.
- 还有就是当你点击FloatingActionButton时,想弹出Snackbar,同时又想避免Snackbar遮盖住FloatingActionButton,这时,你应该使用CoordinatorLayout来协调各个View之间的动画效果.
效果图:设置点击FloatingActionButton的点击事件,点击弹出Snackbar.
TextInputLayout
简介: TextInputLayout的出现是Google为EditText提供的浮动标签,使其更符合Material Design的风格.TextInputLayout继承LinearLayout,它只是一个容器,不过该容器下只接收一个元素,子元素就是一个EditText元素.这样就为EditText提供了一个带有动画效果的提示标签,同时也可以处理错误信息,将错误信息提示在EditText的下方.
使用:
布局:
代码:
//初始化TextInputLayout(代码中我使用了ButterKnife注解,这里就不贴出来了) //得到EditText对象 final EditText userEditText = tilUsername.getEditText(); final EditText pwdEditText = tilPassword.getEditText(); //设置hint提示,也可直接在xml中设置(个人感觉如果在布局中已经设置了hint,代码中就不必在设置了.) //userEditText.setHint("Username"); //pwdEditText.setHint("Password"); //EditText添加文本变化监听 userEditText.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { Log.d(TAG, "beforeTextChanged执行了....s = " + s + "---start = " + start + "---count = " + count + "---after = " + after); } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { Log.d(TAG, "onTextChanged执行了....s = " + s + "---start = " + start + "---count = " + count + "---before = " + before); if (s.length() > 7) { tilUsername.setErrorEnabled(true);//设置是否打开错误提示 tilUsername.setError("用户名长度不能超过8个");//设置错误提示的信息 } else { tilUsername.setErrorEnabled(false); } } @Override public void afterTextChanged(Editable s) { Log.d(TAG, "afterTextChanged执行了....s = " + s); } }); pwdEditText.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) { if (s.length() < 6) { tilPassword.setErrorEnabled(true); tilPassword.setError("密码长度不能小于6个"); } else { tilPassword.setErrorEnabled(false); } } @Override public void afterTextChanged(Editable s) { } });
注意:代码里注释已经很详细了,相信你一看就能明白.这里提一点:就是浮动标签字体的颜色默认是你设置主题时的颜色.
设置主题的颜色就是EditText浮动标签提示信息的颜色:
- @color/colorAccent
效果图:这里模拟登录界面。并对用户名长度是否超过8个，密码长度是否小于6个做了判断。
TabLayout
- 简介： TabLayout提供了一个水平布局显示标签，主要用来做选显卡切换这一类效果的控件。例如：网易新闻客户端的Tab。Github上也有很多类似效果的开源控件，只是这次谷歌把它官方化了，更方便开发者使用。
简单TabLayout效果图：
使用：
xml：
//Tab未被选中字体的颜色 代码：
//添加8个Tab标签，并设置第一个Tab标签为选中状态. tabLayout.addTab(tabLayout.newTab().setText("Tab 1"),true); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3")); tabLayout.addTab(tabLayout.newTab().setText("Tab 4")); tabLayout.addTab(tabLayout.newTab().setText("Tab 5")); tabLayout.addTab(tabLayout.newTab().setText("Tab 6")); tabLayout.addTab(tabLayout.newTab().setText("Tab 7")); tabLayout.addTab(tabLayout.newTab().setText("Tab 8")); //设置Tab的模式为可滑动，当tab标签超过屏幕宽度时，可以滑动. tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
这里只是简单使用TabLayout完成Tabs选项卡，一般情况下TabLayout+ViewPager相结合使用，这样的使用场景会更多一点，也能发挥出TabLayout的优势。接下来使用TabLayout+ViewPager完成一个小Demo。
效果图:(自定义TabLayout样式+ViewPager使用)
使用:首先我们在Style中自定义TabLayout的样式,在布局中使用时引入自定义的TabLayout样式.添加ViewPager,每个页面是一个Fragment,并且实现联动效果,下面直接看代码:
自定义TabLayout样式:
页面布局:
页面代码:(Activity页面)
package com.listenergao.mytest.activity; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.widget.Toolbar; import android.widget.LinearLayout; import com.listenergao.mytest.R; import com.listenergao.mytest.data.TabFragmentAdapter; import com.listenergao.mytest.fragment.TabFragment; import java.util.ArrayList; import java.util.List; import butterknife.BindView; import butterknife.ButterKnife; /** * TabLayout+ViewPager示例 * * @author By ListenerGao * create at 2016/10/14 18:52 */ public class TabLayoutViewPagerActivity extends BaseActivity { @BindView(R.id.toolbar) Toolbar toolbar; @BindView(R.id.tab_layout) TabLayout tabLayout; @BindView(R.id.viewpager) ViewPager viewpager; @BindView(R.id.activity_tab_layout_view_pager) LinearLayout activityTabLayoutViewPager; private ListmTabList; private List mTabFragments; @Override protected int getLayoutResId() { return R.layout.activity_tab_layout_view_pager; } @Override protected void initView() { ButterKnife.bind(this); toolbar.setTitle("TabLayout+ViewPager"); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); } @Override protected void initData() { mTabList = initTabList(); initTabLayout(mTabList); mTabFragments = initFragments(mTabList); TabFragmentAdapter adapter = new TabFragmentAdapter(getSupportFragmentManager(),mTabFragments,mTabList); viewpager.setAdapter(adapter); //将TabLayout与ViewPager关联起来(注意:该行代码需在ViewPager设置Adapter之后调用) tabLayout.setupWithViewPager(viewpager); //为Tabs设置适配器 tabLayout.setTabsFromPagerAdapter(adapter); } /** * 初始化Tab标签数据 * * @return */ private List initTabList() { List tabList = new ArrayList<>(); for (int i = 0; i < 8; i++) { tabList.add("TAB " + i); } return tabList; } /** * 初始化TabLayout * * @param list */ private void initTabLayout(List list) { for (int i = 0; i < list.size(); i++) { if (i == 0) tabLayout.addTab(tabLayout.newTab().setText(list.get(i)), true); else tabLayout.addTab(tabLayout.newTab().setText(list.get(i))); } //设置TabLayout的模式为可滑动 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); } /** * 初始化Tab标签对应的Fragment * * @param list 标签集合数据 * @return */ public List initFragments(List list) { List mTabFragments = new ArrayList<>(); for (int i = 0; i < list.size(); i++) { Fragment tabFragment = new TabFragment(); Bundle bundle = new Bundle(); bundle.putString("Content", list.get(i)); tabFragment.setArguments(bundle); mTabFragments.add(tabFragment); } return mTabFragments; } } Viewpager适配器:(这里继承的是FragmentStatePagerAdapter,因为可能有很多个Tab标签页面(Fragment).这里不细说,可以自行google.)
package com.listenergao.mytest.data; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import java.util.List; /** * ViewPager的适配器 * * @author By ListenerGao * Create at 2016/10/15 16:36 */ public class TabFragmentAdapter extends FragmentStatePagerAdapter { private ListmFragments; private List mTabTitles; public TabFragmentAdapter(FragmentManager fm, List fragments,List tabTitles) { super(fm); this.mFragments = fragments; this.mTabTitles = tabTitles; } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } //注意:需要重写此方法,从标签集合中获取到title,否则标签上的title则不会显示. @Override public CharSequence getPageTitle(int position) { return mTabTitles.get(position); } } Tab标签对应的Fragment页面:
package com.listenergao.mytest.fragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import com.listenergao.mytest.R; import butterknife.BindView; import butterknife.ButterKnife; /** * Tab标签对应的页面 * * @author By ListenerGao * Create at 2016/10/15 16:53 */ public class TabFragment extends Fragment { @BindView(R.id.tv_content) TextView tvContent; private View view; private String content; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getArguments() != null) { Bundle bundle = getArguments(); content = bundle.getString("Content"); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment view = inflater.inflate(R.layout.fragment_tab, container, false); ButterKnife.bind(this, view); return view; } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); tvContent.setText(content); } }
常用方法:
- 1,addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加选项卡到 layout中,这是一个重载方法.第一个参数是Tab对象,通过Tablayout.newTab()创建;第二个参数是插入Tab的位置;最后一个参数是当前Tab是否为选中状态.
- 2,newTab() 新建个 tab.
- 3,setTabMode(),设置 Mode,有两种值：TabLayout.MODE_SCROLLABLE和TabLayout.MODE_FIXED分别表示当tab的内容超过屏幕宽度是否支持横向水平滑动，第一种支持滑动，第二种不支持，默认不支持水平滑动.如果你添加的Tab很少的话,你应该把Tab的mode设置成MODE_FIXED,否则可能会出现Tab标签不会占满屏幕的宽度.
- 4,setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 为每个 tab 增加选择监听器.
- 5,setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 设置Tab滚动到的位置.
- 6,setTabGravity(int gravity) 设置 Gravity.
- 7,setTabTextColors(ColorStateList textColor) 设置 tab 中文本的颜色.
- 8,setTabTextColors(int normalColor, int selectedColor) 设置 tab 中文本的颜色 默认 选中的颜色.
- 9,setTabsFromPagerAdapter(PagerAdapter adapter) 将TabLayout与ViewPager关联,当PageAdapter更新时,TabLayout会自动更新.(注意:该方法已过时)
- 10,setupWithViewPager(ViewPager viewPager) 设置Tablayout和ViewPager实现联动效果.
- 11,getTabAt(int index) 得到选项卡.
- 12,getTabCount() 得到选项卡的总个数.
- 13,getTabGravity() 得到 tab 的 Gravity.
- 14,getTabMode() 得到 tab 的模式.
- 15,getTabTextColors() 得到 tab 中文本的颜色.
由于篇幅原因,NavigationView,CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout会在下篇文章中介绍.
源码地址:(该功能是在我一个练手项目中写的)
https://github.com/ListenerGao/MyTest/blob/master/app/src/main/java/com/listenergao/mytest/activity/Android6NewWidget.java