如何评价 Bilibili 的新版本 Android 客户端采用 material design 配色

今天看啥 热点:
Android Material Design 详解(使用support v7兼容5.0以下系统),androidmaterial
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 name=&AppTheme.ActionBarStyle& parent=&Widget.AppCompat.ActionBar.Solid&&
&item name=&android:titleTextStyle&&@style/AppTheme.ActionBar.TitleTextStyle&/item&
&style name=&AppTheme.ActionBar.TitleTextStyle& parent=&@style/TextAppearance.AppCompat.Widget.ActionBar.Title&&
&!--ActionBar标题文字颜色--&
&item name=&android:textColor&&@android:color/white&/item&
&/style&3.所有需要使用ActionBar的Activity必须继承自ActionBarActivity,因为即使使用了类似Theme.AppCompat.Light.DarkActionBar这样的主题,系统也不会自动添加ActionBar.
相对于普通的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);
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));
 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 (2)adapter,RecyclerViewAdapter.java:
public class RecyclerViewAdapter extends RecyclerView.Adapter&RecyclerViewAdapter.ViewHolder& {
private List&CityInfoBean& mD
public RecyclerViewAdapter(Context context, List&CityInfoBean& myDataset) {
this.context =
mDataset = myD
// Create new views (invoked by the layout manager)
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() {
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() {
public boolean onLongClick(View v) {
int position = vh.getPosition();
Toast.makeText(v.getContext(), &Item long click. Position:& +
position, Toast.LENGTH_SHORT).show();
showDialog(position);
// Replace the contents of a view (invoked by the layout manager)
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());
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() {
public void onClick(DialogInterface dialog, int which) {
switch (which) {
//delete this item
mDataset.remove(position);
notifyItemRemoved(position);
//add one item
mDataset.add(position, new CityInfoBean(&New City&, &010&, &Asia&));
notifyItemInserted(position);
//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!
//change one item
mDataset.get(position).setCityName(&City name changed&);
notifyItemChanged(position);
//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());
builder.create().show();
public static class ViewHolder extends RecyclerView.ViewHolder {
public TextView cityNameTV, phoneTV, addrTV;
public ViewHolder(View 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);
(3)主页面布局文件:
recycler_layout.xml:
&?xml version=&1.0& encoding=&utf-8&?&
&LinearLayout xmlns:android=&/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=&/apk/res/android&
android:layout_width=&match_parent&
android:layout_height=&wrap_content&
xmlns:card_view=&/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& /&
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/books
相关搜索:
相关阅读:
相关频道:
Android教程最近更新只需一步,快速开始
只需一步, 快速开始
后使用快捷导航没有帐号?
查看: 218115|回复: 10
积分威望金钱
基于 Material Design 的 BiliBili 第三方
客户端,我们知道这个APP目前比较流行,所以大家也比较喜欢模仿,需要的参考一下文档共享 :
一个在维护中的API整理:
Usages将您申请到的 Bilibili API Key 填入 Secret. ,
并放入 MDBilibili\app\src\main\java\me\qixingchen\mdbilibili\app 文件夹下关于如何申请BiliBili 的 API KEY,请参阅
API KEY Google下就好了Screen shots
源码下载:
/view/12877.html
今天,我又来了
积分威望金钱
元芳你怎么看?
积分威望金钱
高级会员, 积分 909, 距离下一级还需 91 积分
高级会员, 积分 909, 距离下一级还需 91 积分
我了个去,顶了
积分威望金钱
高级会员, 积分 1650, 距离下一级还需 1350 积分
高级会员, 积分 1650, 距离下一级还需 1350 积分
积分威望金钱
高级会员, 积分 830, 距离下一级还需 170 积分
高级会员, 积分 830, 距离下一级还需 170 积分
积分威望金钱
高级会员, 积分 1764, 距离下一级还需 1236 积分
高级会员, 积分 1764, 距离下一级还需 1236 积分
积分威望金钱
安卓我的最爱
积分威望金钱
是爷们的娘们的都帮顶!大力支持
积分威望金钱
高级会员, 积分 1589, 距离下一级还需 1411 积分
高级会员, 积分 1589, 距离下一级还需 1411 积分
呵呵,低调,低调!
积分威望金钱
回个帖子,下班咯~
社区QQ达人
使用QQ帐号登录论坛的用户
经常参与各类话题的讨论,发帖内容较有主见
长期对论坛的繁荣而不断努力,或多次提出建设性意见
活跃且尽责职守的版主
曾经为论坛做出突出贡献目前已离职的版主
为论坛做出突出贡献的会员
经常帮助其他会员答疑
积极宣传本站,为本站带来更多注册会员
积极宣传本站,为本站带来更多的用户访问量
Powered by}

我要回帖

更多关于 material design 教程 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信