Material Design 学习——控件

月半兄

2015-03-20 (Updated: 2020-11-26)

1.1 Android5.0中使用

1.1.1 将Toolbar设置为ActionBar

setActionBar(Toolbar toolbar);

1.1.2 先隐藏ActionBar，然后为Toolbar设置属性

<Toolbar
    android:background="?android:attr/colorPrimary
    android:minHeight="?android:attr/actionBarSize" />

1.2 兼容Android5.0以下

需要使用如下类：

android.support.v7.app.ActionBarActivity
android.support.v7.widget.Toolbar

1.2.1 将Toolbar设置为ActionBar

setSupportActionBar(android.support.v7.widget.Toolbar toolbar);

1.2.2 先隐藏ActionBar，然后为Toolbar设置属性

<android.support.v7.widget.Toolbar
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary" />

1.2.3 改变Toolbar样式

<!-- theme为Toolbar样式 -->
<!-- popupTheme为Toolbar上弹窗样式，如菜单 -->
<android.support.v7.widget.Toolbar
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

1.3 设置Toolbar字体样式

<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">
    <item name="android:toolbarStyle">@style/MyToolBarStyle</item>
</style>

<style name="MyToolBarStyle" parent="android:Widget.Material.Toolbar">
    <item name="android:minHeight">?android:attr/actionBarSize</item>
    <item name="android:background">?android:attr/colorPrimary</item>
    <item name="android:titleTextAppearance">@style/MyToolbar.Title</item>
    <item name="android:subtitleTextAppearance">@style/MyToolbar.Subtitle</item>
</style>

<style name="MyToolbar.Title" parent="@android:style/TextAppearance.Material.Widget.Toolbar.Title">
    <item name="android:textColor">@color/title_text_color</item>
</style>

<style name="MyToolbar.Subtitle" parent="@android:style/TextAppearance.Material.Widget.Toolbar.Subtitle">
    <item name="android:textColor">@color/subtitle_text_color</item>
</style>

2 RecyclerView

mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
//必须要为RecyclerView设置一个LayoutManger，否则无法初始化
mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);

RecyclerView以支持许多其他的新特性，比如每一个item的动画，绘制分隔线等。这里需要点明的一点是，RecyclerView继承自ViewGroup，而非ListView，所以RecyclerView只是外表看起来像ListView，Adapter的Holder缓存机制与BaseAdapter类似，不能把RecyclerView当做ListView来看待。

2.2 RecyclerView.Adapter<MyAdapter.ViewHolder>

如下是Demo中的一个具体实现

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

    //Paper为Model类
    private List<Paper> paperList;
    private Context mContext;

    public RecyclerViewAdapter(Context context, List<Paper> paperList) {
        this.mContext = context;
        this.paperList = paperList;
    }

    //在这里初始化ViewHodler
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item, viewGroup, false);
        return new ViewHolder(v);
    }

    //Item初始化（ViewHolder绑定时）会调用该方法
    @Override
    public void onBindViewHolder(final ViewHolder viewHolder, int i) {
        Paper paper = paperList.get(i);
        viewHolder.mContext = mContext;
        viewHolder.pic.setImageResource(paper.getPic());
        viewHolder.name.setText(paper.getName());
    }

    @Override
    public int getItemCount() {
        return paperList.size();
    }

    //需要自己实现一个继承自RecyclerView.ViewHolder的ViewHolder类
    public static class ViewHolder extends RecyclerView.ViewHolder {
        private Context mContext;
        private ImageView pic;
        private TextView name;

        public ViewHolder(View v) {
            super(v);
            pic = (ImageView) v.findViewById(R.id.img_list_item_pic);
            name = (TextView) v.findViewById(R.id.tv_list_item_name);
        }
    }
}

3 CardView

CardView继承自FrameLayout，只是封装了一些设置圆角等方法方便使用，使用时需要注意CardView的一些属性的命名空间不是android。

cardCornerRadius：设置圆角
cardBackgroundColor：设置Card背景色

实例：

<android.support.v7.widget.CardView 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:layout_margin="5dp"
    app:cardCornerRadius="5dp"
    app:cardBackgroundColor="#ffff0000"
    android:elevation="100dp">

    <!-- 这里放置CardView的内容 -->        

</android.support.v7.widget.CardView>

1 Toolbar