Material Design学习

来源:互联网 发布:阿里云 数据库 编辑:程序博客网 时间:2024/05/29 08:35

今天学写了MD上新增的控件,下面做一些学习笔记,以供参考,需要注意的是,在正式学习之前,请确保sdk下的extra目录下已经下载相关依赖,如下:
这里写图片描述
并且需要在module的build.gradle中添加如下依赖:

// 向下兼容的appcompat-v7compile '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上的文字距离左边的距离tabPaddingEndtabBackground  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以及对应的事件处理
@Overridepublic 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,先看下效果:
这里写图片描述

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 向下移动时,立即显示View2.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可用于方便地创建导航抽屉,是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下新增的布局组件简单的学习,算是自己做一个记录吧。

material design

0 0
原创粉丝点击