Material Design(三)

来源:互联网 发布:淘宝商家怎么改头像 编辑:程序博客网 时间:2024/06/01 11:10

Material Theme

这种新material theme 提供:

  • 系统小工具,让你设置自己的调色板
  • 触摸反馈的动画为系统部件
  • 活动过渡动画

您可以根据与一个调色板你控制你的品牌形象定制的材料主题的外观。您可以调整动作栏,并使用主题属性状态栏,如图1。

图1:自定义材料的主题。

该系统部件有一个新的设计和触摸反馈的动画。您可以自定义调色板,触控反馈的动画,以及活动转变为你的应用程序。

该材料的主题被定义为:

  • @android:style/Theme.Material (dark version)
  • @android:style/Theme.Material.Light(light version)
    • @android:style/Theme.Material.Light.DarkActionBar

有关您可以使用的材料样式的列表,请参阅API参考android.R.style

注:该材料主题是仅适用于Android的L开发者预览版。欲了解更多信息,请参阅兼容性。

自定义调色板


要自定义主题的基础颜色,以适应你的品牌,使用的主题定义自定义颜色,当你从材料主题的继承属性:

<resources>  <!-- inherit from the material theme -->  <style name="AppTheme" parent="android:Theme.Material">    <!-- Main theme colors -->    <!--   your app's branding color (for the app bar) -->    <item name="android:colorPrimary">@color/primary</item>    <!--   darker variant of colorPrimary (for status bar, contextual app bars) -->    <item name="android:colorPrimaryDark">@color/primary_dark</item>    <!--   theme UI controls like checkboxes and text fields -->    <item name="android:colorAccent">@color/accent</item>  </style></resources>

自定义状态栏和导航栏


该材料的主题,您可以轻松地自定义状态栏,这样你就可以指定一个适合自己的品牌,并提供足够的对比度,显示白色状态图标的颜色。要设置自定义颜色的状态栏,使用android:statusBarColor 属性,当您扩展材料的主题。默认情况下android:statusBarColor inherits the value of android:colorPrimaryDark.

要处理的状态栏的颜色自己(例如,通过添加背景渐变),设置android:statusBarColor属性来  @android:color/transparent,并根据需要调整窗口的标志。您还可以使用Window.setStatusBarColor方法的动画或褪色。

注: 状态栏应该几乎总是有从主工具栏中明确界定,除了全出血图像情况下,当你使用渐变作为保护。

当自定义导航栏和状态栏,使他们既透明或只修改状态栏。导航栏应该在所有其他情况下保持黑色。

主题各个视图


在XML布局定义的元素可以指定android:theme 属性,它引用一个主题资源。此属性修改的主题元素和充气它下面的任何元素,这是非常有用的改变主题颜色调色板中的接口的特定部分。


UI Widgets

在Android L开发者预览版的支持库包含两个新的部件, RecyclerView的CardView。使用这些小工具来显示您的应用程序的复杂列表和卡片。这些部件有材料的设计风格默认。

RecyclerView


RecyclerView是一个更先进,更灵活的版本的ListView。这个控件是一个容器大集的可循环和滚动非常有效的意见。使用RecyclerView当你有列表会动态变化的元素部件。

RecyclerView是易于使用,因为它提供了:

  • 用于定位项目的布局管理
  • 默认的动画,共同经营项目

你还必须为这个小部件定义自定义布局管理器和动画的灵活性。

要使用RecyclerView小部件,你必须指定一个适配器和一个布局管理器。要创建一个适配器,你扩展RecyclerView.Adapter类。实施的细节取决于你的数据集和视图的类型的细节。欲了解更多信息,请参见示例如下。

  图1 -本RecyclerView部件。

一个布局管理器里面的一个位置项目的意见RecyclerView并确定何时重用项目的意见不再对用户可见。重用(或回收)视图,布局管理器可能会问适配器以取代从数据集中不同元素的视图的内容。以这种方式回收的改进意见,避免造成不必要的意见或进行昂贵的性能 findViewById查找。

RecyclerView提供LinearLayoutManager,它示出了在垂直或水平滚动列表中的项目。要创建一个自定义布局,您扩展 RecyclerView.LayoutManager类。

动画

动画的添加和删除项目中默认启用的RecyclerView。要自定义这些动画,延长RecyclerView.ItemAnimator类,并使用RecyclerView.setItemAnimator方法。

示例

要包括RecyclerView在你的布局:

< - !一个RecyclerView与一些常用的属性--> <android.support.v7.widget.RecyclerView     android:id = "@+id/my_recycler_view"     android:scrollbars = "vertical"     android:layout_width = "match_parent"     android:layout_height = "match_parent" />

To get the RecyclerView object in your activity:

public class MyActivity extends Activity {    private RecyclerView mRecyclerView;    private RecyclerView.Adapter mAdapter;    private RecyclerView.LayoutManager mLayoutManager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.my_activity);        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);        // improve performance if you know that changes in content        // do not change the size of the RecyclerView        mRecyclerView.setHasFixedSize(true);        // use a linear layout manager        mLayoutManager = new LinearLayoutManager(this);        mRecyclerView.setLayoutManager(mLayoutManager);        // specify an adapter (see also next example)        mAdapter = new MyAdapter(myDataset);        mRecyclerView.setAdapter(mAdapter);    }    ...}

要创建一个简单的适配器:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {    private String[] mDataset;    // Provide a reference to the type of views that you are using    // (custom viewholder)    public static class ViewHolder extends RecyclerView.ViewHolder {        public TextView mTextView;        public ViewHolder(TextView v) {            super(v);            mTextView = v;        }    }    // Provide a suitable constructor (depends on the kind of dataset)    public MyAdapter(String[] myDataset) {        mDataset = myDataset;    }    // Create new views (invoked by the layout manager)    @Override    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,                                                   int viewType) {        // create a new view        View v = LayoutInflater.from(parent.getContext())                               .inflate(R.layout.my_text_view, parent);        // set the view's size, margins, paddings and layout parameters        ...        ViewHolder vh = new ViewHolder(v);        return vh;    }    // Replace the contents of a view (invoked by the layout manager)    @Override    public void onBindViewHolder(ViewHolder holder, int position) {        // - get element from your dataset at this position        // - replace the contents of the view with that element        holder.mTextView.setText(mDataset[position]);    }    // Return the size of your dataset (invoked by the layout manager)    @Override    public int getItemCount() {        return mDataset.length;    }}

CardView


的CardView扩展的FrameLayout类,并允许您显示里面有一个一致的外观上的任何应用程序卡的信息。的CardView小部件可以有阴影和圆角。

要创建具有阴影卡,使用的android:海拔。属性 的CardView使用真正的抬高和动态阴影和回落到较早版本的纲领性阴影的实现。欲了解更多信息,请参阅兼容性。

以下是如何指定的属性的CardView

  • 要设置圆角半径在布局中,使用card_view:cardCornerRadius 属性。
  • 要设置圆角半径在你的代码中,使用CardView.setRadius方法。
  • 设置卡的背景颜色,使用card_view:cardBackgroundColor 属性。

要包括的CardView在你的布局:

< - !包含一个TextView一个的CardView --> <android.support.v7.widget.CardView     xmlns:card_view = "http://schemas.android.com/apk/res-auto"     android:id = "@+id/card_view"     android:layout_gravity = "center"     android:layout_width = "200dp"     android:layout_height = "200dp"     card_view:cardCornerRadius = "4dp" >     <TextView         android:id = "@+id/info_text"         android:layout_width = "match_parent"         android:layout_height = "match_parent"  /> </android.support.v7.widget.CardView>

0 0
原创粉丝点击