Android L 开发者预览支持库提供两个新的Widgets,RecyclerView和CardView。使用这两个Widgets可以显示复杂的Listview和卡片布局,这两个Widgets默认使用Material design。
RecyclerView
RecyclerView是一个更高级柔性版本的Listview,RecyclerView是一个能包含很多视图的容器,它能完美的处理循环和滚动。在item动态变化的Listview使用RecyclerView。
RecyclerView使用很简单,因为它提供了:
1、定位item的布局管理器
2、常见的item操作默认动画
你能够灵活的为RecyclerView自定义布局管理器和动画。
使用RecyclerView,必须使用指定一个adapter、定义一个布局管理器。创建adapter必须继承自RecyclerView.Adapter。实施的细节需要看数据类型和需要的视图。
RecyclerView widget
RecyclerView 提供了 LayoutManager,RecylerView 不负责子 View 的布局,我们可以自定义 LayoutManager 来实现不同的布局效果,目前只提供了LinearLayoutManager。 LinearLayoutManager 可以指定方向,默认是垂直, 可以指定水平, 这样就轻松实现了水平的 ListView。
RecyclerView Demo:
1、布局文件
<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
2、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);
}
...
}
To create a simple adapter:
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, null);
// 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;
}
}
3、Recycler adapter
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, null);
// 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;
}
}
RecyclerView 的标准化了 ViewHolder, 编写 Adapter 面向的是 ViewHoder 而不在是View 了, 复用的逻辑被封装了, 写起来更加简单。
CardView
CardView继承自FrameLayout类,可以在一个卡片布局中一致性的显示内容,卡片可以包含圆角和阴影。
可以使用android:elevation属性,创建一个阴影的卡片。
怎样指定CardView的属性:
1、使用android:cardCornerRadius属性指定圆角半径
2、使用CardView.setRadius 设置圆角半径。
3、使用android:cardBackgroundColor属性设置卡片颜色
在创建布局文件中创建CardView:
<!-- A CardView that contains a TextView -->
<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>
参考:
http://developer.android.com/preview/material/ui-widgets.html
分享到:
相关推荐
材质设计小部件-轻巧 该框架为您提供了充分的灵活性,可以应用您想在应用程序中使用的任何材料设计小部件! 如果您只需要使用整个软件包小部件中的一个或两个,请参见以下步骤。 灯光模式 暗模式 ...
[WIP][BETA]-Material Design Music Player Screenshots Features Material design Browse Songs, Albums, Artists Create and edit playlists 6 different now playing styles Homescreen widgets Browse...
Design and customize GUI using material design to create attractive and intuitive layouts easily Bring your designs to life with Android 5's powerful and extensive Java libraries, new sensors, and new...
This book focuses on practical techniques for developing apps compatible with Android 4.1 (Jelly Bean) and up, including coverage of Lollipop and material design. Write and run code every step of ...
Title: Android Programming: The Big Nerd Ranch Guide, 3rd Edition Author: Bill Phillips, Chris Stewart Length: 624 pages Edition: 3 Language: English ... Material Design Chapter 36. Afterword
Material Design Basics Dealing with Threads Requesting Permissions Assets, Files, and Data Parsing Tutorial #11 - Adding Simple Content Tutorial #12 - Displaying the Book Using Preferences Tutorial #...
安装从NPM / YARN安装并在您自己的项目中使用如果要尝试使用这些库,则可以例如安装使用material-angular UI的。 您可以使用或 。 要使用NPM安装,请在终端上运行以下命令: npm install @ajsf/material 使用YARN,...
Material Design Basics Dealing with Threads Requesting Permissions Tutorial: Runtime Permission Support Assets, Files, and Data Parsing Tutorial #11 - Adding Simple Content Tutorial #12 - Displaying ...
Flutter-Neumorphic:适用于Flutter的完整,立即可用的Neumorphic ui套件,兼容:sunglasses:暗模式
Flutter-Movies4U:Movies4u应用程序用户界面非常易于使用,并且该应用程序是一种有趣的方式来概述您的电影体验。 此仓库是在出色的UI,材料设计和最新功能的帮助下创建的。 此回购协议包含主要功能,例如:黑暗主题
UXTOOLTIME-Axure:最好的Axure小部件库
GlassMorphism是一种新的UI趋势,在设计师中非常受欢迎。 Glass Kit为您提供了小部件和其他元素,可在您的flutter应用程序中轻松高效地实现此样式。 画廊: 上面的源代码可以在此处的示例目录中找到 入门 您应该...