今天学写了MD上新增的控件,下面做一些学习笔记,以供参考,需要注意的是,在正式学习之前,请确保sdk下的extra目录下已经下载相关依赖,如下:
并且需要在module的build.gradle中添加如下依赖:
// 向下兼容的appcompat-v7
compile 'com.android.support:appcompat-v7:23.1.1'
// material design的依赖
compile 'com.android.support:design:23.1.1'
##Snackbar ##
SnackBar是 Android Support Library 22.2.0 里面新增提供的一个控件,类似于Toast,不过对比ToatSnackBar有如下优势:
- SnackBar可以被Swipe手势划走,需要配合CoordinatorLayout来完成
- 可以通过setAction来响应动作
简单使用
Snackbar.make(v,"this is a snackbar test",Snackbar.LENGTH_LONG).show();
上面这段代码使用起来和Toast基本相同,第一个参数是一个View类型,谁触发了当前Snackbar,就是那个View
效果如下:
常用方法
Snackbar有下面一些常用方法:
snackbar.show(); //显示 snackbar.setDuration(Snackbar.LENGTH_SHORT); // 设置时间
snackbar.setText(String s); // 设置需要显示的文字,会覆盖make中的文字
snackbar.dismiss(); // 隐藏
snackbar.isShown(); // 是否显示
snackbar.isShownOrQueued();//判断当前snackbar是否正在显示或将要被显示
snackbar.setAction(int resid,OnclickListener); //设置动作
snackbar.setActionTextColor(int color); // 设置文字颜色
// 设置一个回调,当当前snackbar的显示状态改变的时候,会回调Callback接口
snackbar.setCallback(Callback callback);
Snackbar 使用
final Snackbar snackbar = Snackbar.make(v,"this is a snackbar test",Snackbar.LENGTH_LONG);
snackbar.setAction("关闭", new View.OnClickListener() {
@Override
public void onClick(View v) {
if (snackbar.isShown()) {
snackbar.dismiss();
}
}
});
snackbar.setActionTextColor(Color.parseColor("#ffd654"));
snackbar.setCallback(new Snackbar.Callback() {
@Override
public void onDismissed(Snackbar snackbar, int event) {
super.onDismissed(snackbar, event);
Toast.makeText(MainActivity.this,"snackbar is dismiss",Toast.LENGTH_SHORT).show();
}
@Override
public void onShown(Snackbar snackbar) {
super.onShown(snackbar);
Toast.makeText(MainActivity.this,"snackbar is show",Toast.LENGTH_SHORT).show();
}
});
snackbar.show();
上面这段代码给出了snackbar这些常见方法的具体使用,效果如下:
##TextInputLayout ##
TextInputLayout extends LinearLayout,可以看到LinearLayout的属性,在TextInputLayout 都是可以使用的,注意:TextInputLayout 中只能放一个子元素,并且子元素必须是EditText
- TextInputLayout 使用
效果如下:
下面看下TextInputLayout 的简单使用,首先新建一个布局,主要内如如下:
<android.support.design.widget.TextInputLayout
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:hint="密码"
/>
</android.support.design.widget.TextInputLayout>
- 主要方法:
final TextInputLayout passLayout = (TextInputLayout) findViewById(R.id.password);
// 获取子元素
final EditText passEdit = passLayout.getEditText();
// 设置提示内容的样式
passLayout.setHintTextAppearance(R.style.hintText);
// 当验证不正确,可以使用setError来显示提示信息
passLayout.setError("密码格式不对");
// 关闭错误提示信息
passLayout.setErrorEnabled(false);
另外可以通过colorAccent属性为TextInputLayout设置显示的颜色样式:
<item name="colorAccent">#af50ef</item>
##TabLayout ##
TabLayout是一个google封装的滑动切换View的layout。
###TabLayout简单使用 ###
首先新建布局,并在Acitivity中使用当前布局
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white" />
</LinearLayout>
fragment_page.xml
用来设置Viewpager的布局模板:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />
PageFragment.java
public class PageFragment extends Fragment {
public static final String PAGE_NUMBER = "ARG_PAGE";
private int mPage;
public static PageFragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt(PAGE_NUMBER, page);
PageFragment pageFragment = new PageFragment();
pageFragment.setArguments(args);
return pageFragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(PAGE_NUMBER);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page, container, false);
TextView textView = (TextView) view;
textView.setText("FRAGMENT" + mPage);
return view;
}
}
ViewPagerAdapter.java
public class ViewPagerAdapter extends FragmentPagerAdapter {
final int PAGE_COUNT = 4;
private String tabTitles[] = new String[]{"科技","社会","头条","体育"};
private Context context;
public ViewPagerAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
@Override
public Fragment getItem(int position) {
return PageFragment.newInstance(position + 1);
}
@Override
public int getCount() {
return PAGE_COUNT;
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}
####为TabLayout添加样式####
<style name="tabStyle" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#7389ec</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">@style/textTitleStyle</item>
<item name="tabSelectedTextColor">#423fec</item>
</style>
<style name="textTitleStyle" parent="TextAppearance.Design.Tab">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#c96bbb</item>
</style>
上面定义了一些TabLlayout的样式属性,说明如下:
tabIndicatorColor 滑动条颜色
tabIndicatorHeight 滑动条的高度
tabPaddingStart tab上的文字距离左边的距离
tabPaddingEnd
tabBackground tab的背景色
tabTextAppearance tab上文字的样式
tabSelectedTextColor tab上文字被选中的颜色
在TabLayout中使用该样式:
style="@style/tabStyle"
####为TabLayout设置adapter####
pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), this);
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(pagerAdapter);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
需要注意的是setupWithViewPager必须在ViewPager.setAdapter()之后调用
此时效果如下:
##FloatingActionButton ##
FloatingActionButton是一个浮动按钮,继承自ImageButton,所以ImageView中的属性都是可以使用的,类似于下面的效果:
这里使用起来也比较简单。代码如下:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email"
app:backgroundTint="#4ef4bc"
app:elevation="5dp"
app:rippleColor="#0000ff"
app:pressedTranslationZ="15dp"
/>
android:layout_gravity 显示的位置
android:layout_margin 上下左右的边距
android:src 该属性从ImageView中继承过来,显示的图片
app:backgroundTint 显示的颜色
app:rippleColor 按下时的颜色
app:elevation 正常显示时候阴影的大小
app:pressedTranslationZ 按下时下显示的阴影
设置时间和普通的button是一样的,这里就不在列出,效果如下:
##ToolBar ##
ToolBar 是support布局中提供的一个用来替代AcctionBar的。
使用ToolBar之前,需要确保
-
确保Activity继承AppCompatActivity
-
在manifest文件的 元素中使用 NoActionBar主题
-
创建样式
<style name="AppbaseToolbar" parent="@style/Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">#7db8e7</item>
<item name="colorAccent">#de5a8d</item>
</style>
- 为activity设置当前样式:
<activity android:name=".ToolBarActivity"
android:theme="@style/AppbaseToolbar"
/>
- 设置Toolbar布局:
<android.support.v7.widget.Toolbar
android:id="@+id/toolbarlearn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="?attr/colorPrimaryDark"
android:minHeight="?attr/actionBarSize"
app:navigationIcon="?attr/homeAsUpIndicator"
/>
- 创建menu菜单
在menu目录下创建main_menu.xml文件:
<menu 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"
tools:context="reacthello.myapplication.MainActivity">
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="share"
app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_search"
android:icon="@drawable/ic_menu_search_holo_dark"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom|collapseActionView"
android:inputType="textCapWords"
android:imeOptions="actionSearch"
android:title="search" />
<item android:id="@+id/action_siminfo"
android:title="详情"
app:showAsAction="ifRoom"
android:icon="@drawable/ic_select_siminfo"
android:visible="false" />
</menu>
- 代码调用
toolbar = (Toolbar)findViewById(R.id.toolbarlearn);
toolbar.setTitle("标题");//设置Toolbar标题
toolbar.setSubtitle("副标题");
toolbar.setTitleTextColor(Color.parseColor("#ffffff")); //设置标题颜色
// 设置toolbar背景色
toolbar.setBackgroundColor(Color.parseColor("#3db5fa"));
toolbar.setLogoDescription("logo des");
toolbar.setLogo(R.mipmap.ic_launcher);
setSupportActionBar(toolbar);
// 设置返回键
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
// 设置返回键的颜色
final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha); upArrow.setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);
- 添加menu
通过重写onCreateOptionsMenu和onOptionsItemSelected这两个方法来添加menu以及对应的事件处理
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main,menu);
MenuItem menuItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) MenuItemCompat.getActionView(menuItem);
MenuItemCompat.setOnActionExpandListener(menuItem, new MenuItemCompat.OnActionExpandListener() {//设置打开关闭动作监听
@Override
public boolean onMenuItemActionExpand(MenuItem item) {
Toast.makeText(ToolBarActivity.this, "onExpand", Toast.LENGTH_LONG).show();
return true;
}
@Override
public boolean onMenuItemActionCollapse(MenuItem item) {
Toast.makeText(ToolBarActivity.this, "Collapse", Toast.LENGTH_LONG).show();
return true;
}
});
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
this.finish();
return true;
case R.id.action_delete_all:
return true;
default:
return super.onOptionsItemSelected(item);
}
}
效果如下:
##CoordinatorLayout ##
CoordinatorLayout 实现了多种Material Design中提到的滚动效果,下面我根据上面学习的控件先写一个简单 demo,先看下效果:
[外链图片转存失败(img-Di96tqqb-1567165503268)(https://img-blog.csdn.net/20160210230710011)]
###CoordinatorLayout 简单案例###
activity_main.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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="reacthello.myapplication.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
- 必须使用一个容器布局:AppBarLayout来让Toolbar响应滚动事件
- AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view
- 在RecyclerView上添加app:layout_behavior,用来通知AppBarLayout 这个特殊的view何时发生了滚动事件,这个behavior需要设置在触发事件(滚动)的view之上
app:layout_behavior="@string/appbar_scrolling_view_behavior"
- AppBarLayout里面定义的view需要设置app:layout_scrollFlags属性,并且必须至少启用scroll
- 一定要把带有scroll flag的view放在前面,这样收回的view才能让正常退出,而固定的view继续留在顶部
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPagerAdapter pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), this);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(pagerAdapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
toolbar.setTitle("标题");//设置Toolbar标题
toolbar.setTitleTextColor(Color.parseColor("#ffffff")); //设置标题颜色
toolbar.setBackgroundColor(Color.parseColor("#327fc7"));
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
}
}
ViewPagerAdapter
public class ViewPagerAdapter extends FragmentPagerAdapter {
final int PAGE_COUNT = 4;
private String tabTitles[] = new String[]{"科技","社会","头条","体育"};
private Context context;
public ViewPagerAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
@Override
public Fragment getItem(int position) {
return PageFragment.newInstance(position + 1);
}
@Override
public int getCount() {
return PAGE_COUNT;
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}
PageFragment.java
public class PageFragment extends Fragment {
public static final String PAGE_NUMBER = "ARG_PAGE";
private int mPage;
public static PageFragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt(PAGE_NUMBER, page);
PageFragment pageFragment = new PageFragment();
pageFragment.setArguments(args);
return pageFragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(PAGE_NUMBER);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page, container, false);
RecyclerView recyclerView = (RecyclerView) view;
// 创建一个线性布局管理器
LinearLayoutManager layoutManager = new LinearLayoutManager(getContext());
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
// 设置布局管理器
recyclerView.setLayoutManager(layoutManager);
// 创建数据集
String[] dataset = new String[100];
for (int i = 0; i < dataset.length; i++){
dataset[i] = "item" + i;
}
// 创建Adapter,并指定数据集
MyAdapter adapter = new MyAdapter(dataset);
// 设置Adapter
recyclerView.setAdapter(adapter);
return view;
}
}
MyAapter
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder>
{
// 数据集
private String[] mDataset;
public MyAdapter(String[] dataset)
{
super();
mDataset = dataset;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i)
{
// 创建一个View
View view = View.inflate(viewGroup.getContext(),R.layout.viewholder_item, null);
// 创建一个ViewHolder
ViewHolder holder = new ViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i)
{
// 绑定数据到ViewHolder上
viewHolder.mTextView.setText(mDataset[i]);
}
@Override
public int getItemCount()
{
return mDataset.length;
}
public static class ViewHolder extends RecyclerView.ViewHolder
{
public TextView mTextView;
public ViewHolder(View itemView)
{
super(itemView);
mTextView = (TextView) itemView.findViewById(R.id.list_item);
}
}
}
fragment_page.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/rvToDoList"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
viewholder_item.xml
<?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:gravity="center"
>
<TextView
android:id="@+id/list_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/fab_margin"
android:textColor="@color/colorPrimary"
android:textSize="16sp"
/>
</LinearLayout>
CollapsingToolbarLayout
CollapsingToolbarLayout结合Toolbar可以实现个可以折叠的Tolbar,效果入下:
activity_main.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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="reacthello.myapplication.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"
android:src="@drawable/pic"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email"
/>
</android.support.design.widget.CoordinatorLayout>
图片,
CollapsingToolbarLayout有两个元素,一个ImageView就是偶们想要显示的,而Toolbar就是折叠后看到的顶栏Toolbar.
- app:contentScrim="?attr/colorPrimary"
设置折叠后toolbar的颜色 - app:expandedTitleMarginEnd
collapsingToolbar设置的title距离屏幕右边的距离 - app:expandedTitleMarginStart
collapsingToolbar设置扩张时候(还没有收缩时)title向左填充的距离 - app:layout_scrollFlags
这里可以设置多个值,如果想要滚动,必须至少设置scroll,可以是或的关系,有如下取值:
1.enterAlways 向下移动时,立即显示View
2.exitUntilCollapsed 向上滚动时收缩View,但可以固定Toolbar一直在上面
3.enterAlwaysCollapsed 需要几何minHeight来使用
- app:layout_collapseMode 控制滚出屏幕范围的效果有如下取值:
1. parallax 表示滚动过程中,CollapsingToolbarLayout中的View会一直保持可见区域在正中间.
2. pin 当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上
MainActivity.java
在代码中使用关键代码如下:
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
}
final CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(
R.id.collapsing_toolbar);
// 此时标题必须由collapsingToolbar来设置
collapsingToolbar.setTitle("我是标题");
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.pic);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(final Palette palette) {
int defaultColor = getResources().getColor(R.color.colorAccent);
int defaultTitleColor = getResources().getColor(R.color.colorPrimary);
int bgColor = palette.getDarkVibrantColor(defaultColor);
int titleColor = palette.getLightVibrantColor(defaultTitleColor); collapsingToolbar.setContentScrimColor(bgColor); collapsingToolbar.setCollapsedTitleTextColor(titleColor); collapsingToolbar.setExpandedTitleColor(titleColor);
}
});
##Navigation View ##
Navigation View可用于方便地创建导航抽屉,是Android Design Support Library提供的一个组件,并且可以向下兼容到 Android 2.1,下面使用Navigation View实现一个简单的栗子,效果如下:
主布局activity_navigation.xml
<?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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Content -->
<FrameLayout
android:id="@+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Drawer -->
<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/header_view"
app:menu="@menu/navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
- app:headerLayout 用于指定一个任意的布局,作为导航抽屉的顶部,可选项
- app:menu接收一个menu,作为导航菜单的菜单项
header_view.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="?attr/colorPrimaryDark"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="@+id/profile_image"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_marginTop="20dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_marginTop="10dp"
android:textSize="18sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="用户名"
android:gravity="center"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
/>
</LinearLayout>
菜单布局navigation_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_cloud"
android:title="主页" />
<item
android:id="@+id/nav_messages"
android:icon="@drawable/ic_attachment"
android:title="消息" />
<item
android:id="@+id/nav_friends"
android:icon="@drawable/ic_cloud_circle"
android:title="朋友" />
<item
android:id="@+id/nav_discussion"
android:icon="@drawable/ic_cloud_queue"
android:title="回复" />
</group>
<item android:title="子菜单">
<menu>
<item
android:icon="@drawable/ic_folder_shared"
android:title="子菜单一" />
<item
android:icon="@drawable/ic_attachment"
android:title="子菜单二" />
</menu>
</item>
</menu>
- android:checkableBehavior=“single” 设定一组菜单项为至多只有一个可被选中
- android:checked=“true” 默认选中
添加样式
<style name="Base.Theme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#673AB7</item>
<item name="colorPrimaryDark">#512DA8</item>
<item name="colorAccent">#FF4081</item>
<item name="android:windowBackground">@color/background</item>
</style>
以上就是对android support下新增的布局组件简单的学习,算是自己做一个记录吧。
欢 迎 关 注 我 的 公 众 号 “编 程 大 全”
专注技术分享,包括Java,python,AI人工智能,Android分享,不定期更新学习视频