Android Material Design 详解(使用support v7兼容5.0以下系统)
来源:互联网 发布:传智播客168 erp 源码 编辑:程序博客网 时间:2024/06/05 03:22
版权声明:本文为博主原创文章,未经博主允许不得转载。
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升级至最新版即可。目前最新版本为:
- 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.自定义程序所使用的主题的某些属性,示例:
- <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
- <!--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">
- <item name="android:titleTextStyle">@style/AppTheme.ActionBar.TitleTextStyle</item>
- </style>
- <style name="AppTheme.ActionBar.TitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
- <!--ActionBar标题文字颜色-->
- <item name="android:textColor">@android:color/white</item>
- </style>
效果图:
相对于普通的ActionBar的变化:
(1)右侧三个小点的样式变了。(这个无所谓。。。)
(2)点击右侧三个小点(更多)时,下拉菜单不是从ActionBar的下面开始展开,而是直接从ActionBar之上开始!也许的确有办法把它改成旧的样式,不过查阅官方文档之后发现,Google对此的解释是:菜单是一个临时展现给用户的组件,因此应该悬浮在上面。也就是说,新的设计规则推荐的就是这种默认的样式。
二、使用RecyclerView
RecyclerView是Google在support v7包中提供的一个全新的组件。该组件是一个增强版的ListView,新特性:
1.提高了性能;
2.adapter中自动进行item复用,也就是说,以前的这种繁琐的写法不需要了:
- if (convertView == null) {
- convertView = LayoutInflater.from(context).inflate(R.layout.friends_item, parent, false);
- holder = new ViewHolder();
- 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的添加,删除,移动,修改时的动画,当且改动画也可以自定义。
效果图:
(1)主页面,获取到RecyclerView,设置adapter即可。
- 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(new LinearLayoutManager(this));
- //data
- List<CityInfoBean> myDataset = new ArrayList<CityInfoBean>();
- for (int i = 0; i < 50; i++) {
- CityInfoBean city = new CityInfoBean();
- city.setCityName("Tianjin-" + i);
- city.setCityPhone("022-" + i);
- city.setLocation("Asia_" + i);
- myDataset.add(city);
- }
- RecyclerViewAdapter mAdapter = new RecyclerViewAdapter(this, myDataset);
- mRecyclerView.setAdapter(mAdapter);
- //RecyclerView doesn't has a 'OnItemClickListener' or 'OnItemLongClickListener' like ListView,
- // so you should add the callback in adapter
- public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
- private Context context;
- private List<CityInfoBean> mDataset;
- public RecyclerViewAdapter(Context context, List<CityInfoBean> myDataset) {
- this.context = context;
- mDataset = myDataset;
- }
- // Create new views (invoked by the layout manager)
- @Override
- public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
- View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_list_item, parent, false);
- // set the view's size, margins, paddings and layout parameters
- final ViewHolder vh = new ViewHolder(v);
- v.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View v) {
- int position = vh.getPosition();
- Toast.makeText(v.getContext(), "Item click. Position:" +
- position, Toast.LENGTH_SHORT).show();
- }
- });
- v.setOnLongClickListener(new View.OnLongClickListener() {
- @Override
- public boolean onLongClick(View v) {
- int position = vh.getPosition();
- // Toast.makeText(v.getContext(), "Item long click. Position:" +
- // position, Toast.LENGTH_SHORT).show();
- showDialog(position);
- return true;
- }
- });
- return vh;
- }
- // Replace the contents of a view (invoked by the layout manager)
- @Override
- public void onBindViewHolder(ViewHolder holder, int position) {
- holder.cityNameTV.setText(mDataset.get(position).getCityName());
- holder.phoneTV.setText(mDataset.get(position).getCityPhone());
- holder.addrTV.setText(mDataset.get(position).getLocation());
- }
- @Override
- public int getItemCount() {
- return mDataset.size();
- }
- private void showDialog(final int position) {
- AlertDialog.Builder builder = new AlertDialog.Builder(context);
- builder.setTitle("Choose operation");
- String[] dialogItems = new String[]{
- 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, new DialogInterface.OnClickListener() {
- @Override
- public void onClick(DialogInterface dialog, int which) {
- switch (which) {
- case 0:
- //delete this item
- mDataset.remove(position);
- notifyItemRemoved(position);
- break;
- case 1:
- //add one item
- mDataset.add(position, new CityInfoBean("New City", "010", "Asia"));
- notifyItemInserted(position);
- break;
- case 2:
- //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;
- case 3:
- //change one item
- mDataset.get(position).setCityName("City name changed");
- notifyItemChanged(position);
- break;
- case 4:
- //add many items
- List<CityInfoBean> insertList = new ArrayList<CityInfoBean>();
- insertList.add(new CityInfoBean("New City 01", "010", "Asia"));
- insertList.add(new CityInfoBean("New City 02", "020", "America"));
- mDataset.addAll(position, insertList);
- notifyItemRangeInserted(position, insertList.size());
- break;
- default:
- break;
- }
- }
- });
- builder.create().show();
- }
- public static class ViewHolder extends RecyclerView.ViewHolder {
- public TextView cityNameTV, phoneTV, addrTV;
- public ViewHolder(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);
- }
- }
- }
recycler_layout.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <android.support.v7.widget.RecyclerView
- android:id="@+id/my_recycler_view"
- android:scrollbars="vertical"
- android:layout_width="match_parent"
- android:layout_height="match_parent" />
- </LinearLayout>
二、使用CardView
CardView是Google在support v7包中提供了另一个全新组件,可以很方便的实现“卡片式布局”(具有投影/圆角 的立体效果)。CardView继承自FrameLayout,因此如果内部需要互不重叠的放置多个组件时,可能需要再嵌套一个LinearLayout或RelativeLayout等。
效果图:
布局文件:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- xmlns:card_view="http://schemas.android.com/apk/res-auto">
- <android.support.v7.widget.CardView
- android:id="@+id/card_view"
- android:layout_gravity="center"
- android:layout_width="match_parent"
- android:layout_height="200dp"
- android:layout_margin="6dp"
- card_view:cardCornerRadius="4dp"
- card_view:cardBackgroundColor="@color/card_bg"
- card_view:cardElevation="4dp">
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_margin="6dp"
- android:orientation="vertical">
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:contentDescription="@null"
- android:src="@drawable/ic_launcher" />
- <TextView
- android:id="@+id/info_text"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:textSize="18sp"
- android:text="@string/example_text" />
- </LinearLayout>
- </android.support.v7.widget.CardView>
- </LinearLayout>
cardCornerRadius:圆角大小;
cardElevation:投影的深度;
cardBackgroundColor:卡片的背景色。
============================================================
源码下载(免积分哦):http://download.csdn.net/detail/books1958/8269227
转自:http://blog.csdn.net/books1958/article/details/41956093
- Android Material Design 详解(使用support v7兼容5.0以下系统(部分功能))
- Android Material Design 详解(使用support v7兼容5.0以下系统)
- Android Material Design 详解(使用support v7兼容5.0以下系统)
- Android Material Design 详解(使用support v7兼容5.0以下系统)
- Android 5.0以下使用Material Design 特性
- Android Support v7及以下包详解
- Android:Material Design兼容库(Design Support Library)
- Android Material Design 兼容库的使用详解
- Android Material Design 兼容库的使用详解
- Android Material Design 兼容库的使用详解
- Android Material Design 兼容库的使用详解
- Android Material Design 兼容库的使用详解 之 Snackbar
- Android Material Design 兼容库的使用详解
- Android Material Design 兼容库的使用详解
- Android Material Design 兼容库的使用详解
- Android Material Design 兼容库的使用详解
- Android Support兼容包详解<v4、v7>
- Material Design兼容库(Design Support Library)
- 控制范围
- 浅谈Linux的I/O模型
- Android学习笔记十七之GridLayout网格布局
- GIPS-NetEQ 最大化话音质量、最小化延迟
- 关于Windows下使用Wamp搭建服务器出现403错误问题解决办法
- Android Material Design 详解(使用support v7兼容5.0以下系统)
- 玩具装箱[HNOI 2008][Codevs 1319]
- 自定义View重绘使requestLayout, invalidate和postInvalidate的异同
- CentOS7.1 VNC Server服务配置
- Java连接池详细总结
- Android学习笔记:EditText InputTye汇总
- ios获取当前视图所在的viewController
- Python logging模块详解
- Editplus批量修改编码格式