Android Material Design 详解（使用support v7兼容5.0以下系统（部分功能））

来源：互联网发布：lifemod软件下载编辑：程序博客网时间：2024/06/11 21:09

Android Material Design 详解（使用support v7兼容5.0以下系统）

2014-12-18 5 个评论来源：books1958的专栏

我要投稿

Material Design是Google在2014年的I/O大会上推出的全新设计语言。Material Design是基于Android 5.0（API level 21）的，兼容5.0以下的设备时需要使用版本号v21.0.0以上的support v7包中的appcpmpat，不过遗憾的是support包只支持Material Design的部分特性。使用eclipse或Android Studio进行开发时，直接在Android SDK Manager中将Extras->Android Support Library升级至最新版即可。目前最新版本为：

?
1
com.android.support:appcompat-v7:21.0.3

本文中示例程序使用minSdkVersion=14，即属于使用support包实现Material Design风格。

使用Material Design的步骤：

一、使用Material主题

1.创建一个Android应用，应用主题Theme.AppCompat（或其子主题，如Theme.AppCompat.Light.DarkActionBar）

2.自定义程序所使用的主题的某些属性，示例：

?
1
2
3
4
5
6
7
8
9
10
<style name="AppTheme"parent="Theme.AppCompat.Light.DarkActionBar"type="text/css"><!--ActionBar的颜色-->
        <item name=colorPrimary>@color/primary</item>
        <!-- 随主题而改变的颜色（如CheckBox的颜色）-->
        <item name=colorAccent>@color/accent</item>
        <!--状态栏的颜色 （使用support包时似乎无效。）-->
        <item name=colorPrimaryDark>@color/primary_dark</item>
 
        <!--ActionBar的样式-->
        <item name=actionBarStyle>@style/AppTheme.ActionBarStyle</item></style><style name="AppTheme.ActionBarStyle"parent="Widget.AppCompat.ActionBar.Solid"type="text/css"><item name=android:titleTextStyle>@style/AppTheme.ActionBar.TitleTextStyle</item></style><style name="AppTheme.ActionBar.TitleTextStyle"parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"type="text/css"><!--ActionBar标题文字颜色-->
        <item name=android:textColor>@android:color/white</item></style>

3.所有需要使用ActionBar的Activity必须继承自ActionBarActivity，因为即使使用了类似Theme.AppCompat.Light.DarkActionBar这样的主题，系统也不会自动添加ActionBar.
效果图：

height=400

相对于普通的ActionBar的变化：

（1）右侧三个小点的样式变了。（这个无所谓。。。）

（2）点击右侧三个小点（更多）时，下拉菜单不是从ActionBar的下面开始展开，而是直接从ActionBar之上开始！也许的确有办法把它改成旧的样式，不过查阅官方文档之后发现，Google对此的解释是：菜单是一个临时展现给用户的组件，因此应该悬浮在上面。也就是说，新的设计规则推荐的就是这种默认的样式。

二、使用RecyclerView

RecyclerView是Google在support v7包中提供的一个全新的组件。该组件是一个增强版的ListView，新特性：

1.提高了性能；

2.adapter中自动进行item复用，也就是说，以前的这种繁琐的写法不需要了：

?
1
2
3
4
5
6
7
8
9
10
if(convertView == null) {
            convertView = LayoutInflater.from(context).inflate(R.layout.friends_item, parent, false);
            holder = newViewHolder();
 
            holder.nameTV = (TextView) convertView.findViewById(R.id.friends_item_name);
            holder.phoneTV = (TextView) convertView.findViewById(R.id.friends_item_phone);
            convertView.setTag(holder);
        }else{
            holder = (ViewHolder) convertView.getTag();
        }

3.预置了item的添加，删除，移动，修改时的动画，当且改动画也可以自定义。

效果图：

height=400

示例代码：

(1)主页面，获取到RecyclerView，设置adapter即可。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
RecyclerView mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
 // use this setting to improve performance if you know that changes
 // in content do not change the layout size of the RecyclerView
  mRecyclerView.setHasFixedSize(true);
 
 // use a linear layout manager
mRecyclerView.setLayoutManager(newLinearLayoutManager(this));
//data
 List<cityinfobean> myDataset = newArrayList<cityinfobean>();
        for(inti = 0; i < 50; i++) {
            CityInfoBean city = newCityInfoBean();
            city.setCityName(Tianjin- + i);
            city.setCityPhone(022- + i);
            city.setLocation(Asia_ + i);
 
            myDataset.add(city);
        }
 
        RecyclerViewAdapter mAdapter = newRecyclerViewAdapter(this, myDataset);
        mRecyclerView.setAdapter(mAdapter);
 
//RecyclerView doesn't has a 'OnItemClickListener' or 'OnItemLongClickListener' like ListView,
 // so you should add the callback in adapter </cityinfobean></cityinfobean>

(2)adapter，RecyclerViewAdapter.java:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
publicclass RecyclerViewAdapter extendsRecyclerView.Adapter<recyclerviewadapter.viewholder> {
    privateContext context;
    privateList<cityinfobean> mDataset;
 
    publicRecyclerViewAdapter(Context context, List<cityinfobean> myDataset) {
        this.context = context;
        mDataset = myDataset;
    }
 
    // Create new views (invoked by the layout manager)
    @Override
    publicViewHolder onCreateViewHolder(ViewGroup parent, intviewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_list_item, parent,false);
        // set the view's size, margins, paddings and layout parameters
 
        finalViewHolder vh = newViewHolder(v);
        v.setOnClickListener(newView.OnClickListener() {
            @Override
            publicvoid onClick(View v) {
                intposition = vh.getPosition();
                Toast.makeText(v.getContext(), Item click. Position: +
                        position, Toast.LENGTH_SHORT).show();
            }
        });
 
        v.setOnLongClickListener(newView.OnLongClickListener() {
            @Override
            publicboolean onLongClick(View v) {
                intposition = vh.getPosition();
//                Toast.makeText(v.getContext(), Item long click. Position: +
//                        position, Toast.LENGTH_SHORT).show();
 
                showDialog(position);
 
                returntrue;
            }
        });
 
        returnvh;
    }
 
    // Replace the contents of a view (invoked by the layout manager)
    @Override
    publicvoid onBindViewHolder(ViewHolder holder, intposition) {
        holder.cityNameTV.setText(mDataset.get(position).getCityName());
        holder.phoneTV.setText(mDataset.get(position).getCityPhone());
        holder.addrTV.setText(mDataset.get(position).getLocation());
    }
 
    @Override
    publicint getItemCount() {
        returnmDataset.size();
    }
 
    privatevoid showDialog(finalint position) {
        AlertDialog.Builder builder = newAlertDialog.Builder(context);
        builder.setTitle(Choose operation);
 
        String[] dialogItems = newString[]{
                context.getString(R.string.delete_one_item),
                context.getString(R.string.add_one_item),
                context.getString(R.string.move_one_item),
                context.getString(R.string.change_one_item),
                context.getString(R.string.add_many_items),
        };
        builder.setItems(dialogItems,newDialogInterface.OnClickListener() {
            @Override
            publicvoid onClick(DialogInterface dialog, intwhich) {
                switch(which) {
                    case0:
                        //delete this item
                        mDataset.remove(position);
                        notifyItemRemoved(position);
                        break;
                    case1:
                        //add one item
                        mDataset.add(position,newCityInfoBean(New City, 010, Asia));
                        notifyItemInserted(position);
                        break;
                    case2:
                        //TODO remember to change the data set...
                        //move one item to another position
                        notifyItemMoved(position, position + 2);
                        //May cause IndexOutOfBoundsException. This is just a demo!
                        break;
                    case3:
                        //change one item
                        mDataset.get(position).setCityName(City name changed);
                        notifyItemChanged(position);
                        break;
                    case4:
                        //add many items
                        List<cityinfobean> insertList = newArrayList<cityinfobean>();
                        insertList.add(newCityInfoBean(New City 01,010, Asia));
                        insertList.add(newCityInfoBean(New City 02,020, America));
 
                        mDataset.addAll(position, insertList);
                        notifyItemRangeInserted(position, insertList.size());
                        break;
                    default:
                        break;
                }
            }
        });
 
        builder.create().show();
    }
 
    publicstatic class ViewHolder extendsRecyclerView.ViewHolder {
        publicTextView cityNameTV, phoneTV, addrTV;
 
        publicViewHolder(View v) {
            super(v);
 
            cityNameTV = (TextView) v.findViewById(R.id.city_name);
            phoneTV = (TextView) v.findViewById(R.id.city_phone);
            addrTV = (TextView) v.findViewById(R.id.city_addr);
        }
    }
}
</cityinfobean></cityinfobean></cityinfobean></cityinfobean></recyclerviewadapter.viewholder>

(3)主页面布局文件：

recycler_layout.xml:

?
1
2
3
4
5
6
<!--?xml version=1.0encoding=utf-8?-->
<linearlayout android:layout_height="match_parent"android:layout_width="match_parent"android:orientation="vertical"xmlns:android="http://schemas.android.com/apk/res/android">
 
     
 
</android.support.v7.widget.recyclerview></linearlayout>

二、使用CardView

CardView是Google在support v7包中提供了另一个全新组件，可以很方便的实现“卡片式布局”（具有投影/圆角的立体效果）。CardView继承自FrameLayout，因此如果内部需要互不重叠的放置多个组件时，可能需要再嵌套一个LinearLayout或RelativeLayout等。

效果图：

height=400

布局文件：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<linearlayout android:layout_height="wrap_content"android:layout_width="match_parent"xmlns:android="http://schemas.android.com/apk/res/android"xmlns:card_view="http://schemas.android.com/apk/res-auto">
 
     
 
        <linearlayout android:layout_height="match_parent"android:layout_margin="6dp"android:layout_width="match_parent"android:orientation="vertical">
 
            <imageview android:contentdescription="@null"android:layout_height="wrap_content"android:layout_width="wrap_content"android:src="@drawable/ic_launcher">
 
            <textview android:id="@+id/info_text"android:layout_height="match_parent"android:layout_width="match_parent"android:text="@string/example_text"android:textsize="18sp">
 
        </textview></imageview></linearlayout>
 
    </android.support.v7.widget.cardview>
 
</linearlayout>

属性解释：

cardCornerRadius：圆角大小；

cardElevation：投影的深度；

cardBackgroundColor：卡片的背景色。

0 0