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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
page.title=UI Widgets
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#recyclerview">RecyclerView</a></li>
<li><a href="#cardview">CardView</a></li>
</ol>
</div>
</div>
<p>The support library in the Android L Developer Preview contains two new widgets,
<code>RecyclerView</code> and <code>CardView</code>. Use these widgets to show complex lists
and cards in your app. These widgets have material design style by default.</p>
<h2 id="recyclerview">RecyclerView</h2>
<p><code>RecyclerView</code> is a more advanced and flexible version of <code>ListView</code>.
This widget is a container for large sets of views that can be recycled and scrolled very
efficiently. Use the <code>RecyclerView</code> widget when you have lists with elements that
change dynamically.</p>
<p><code>RecyclerView</code> is easy to use, because it provides:</p>
<ul>
<li>A layout manager for positioning items</li>
<li>Default animations for common item operations</li>
</ul>
<p>You also have the flexibility to define custom layout managers and animations for this
widget.</p>
<p>To use the <code>RecyclerView</code> widget, you have to specify an adapter and a layout
manager. To create an adapter, you extend the <code>RecyclerView.Adapter</code> class. The details
of the implementation depend on the specifics of your dataset and the type of views. For more
information, see the <a href="#rvexamples">examples</a> below.</p>
<img src="/preview/material/images/RecyclerView.png" alt="" id="figure1" style="width:550px"/>
<p class="img-caption">
<strong>Figure 1</strong> - The <code>RecyclerView</code> widget.
</p>
<p>A <strong>layout manager</strong> positions item views inside a <code>RecyclerView</code> and
determines when to reuse item views that are no longer visible to the user. To reuse (or
<em>recycle</em>) a view, a layout manager may ask the adapter to replace the content of the
view with a different element from the dataset. Recycling views in this manner improves
performance by avoiding the creation of unnecessary views or performing expensive
<code>findViewById</code> lookups.
</p>
<p><code>RecyclerView</code> provides <code>LinearLayoutManager</code>, which shows the items in a
vertical or horizontal scrolling list. To create a custom layout, you extend the
<code>RecyclerView.LayoutManager</code> class.</p>
<h3>Animations</h3>
<p>Animations for adding and removing items are enabled by default in <code>RecyclerView</code>.
To customize these animations, extend the <code>RecyclerView.ItemAnimator</code> class and use
the <code>RecyclerView.setItemAnimator</code> method.</p>
<h3 id="rvexamples">Examples</h3>
<p>To include a <code>RecyclerView</code> in your layout:</p>
<pre>
<!-- 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"/>
</pre>
<p>To get the <code>RecyclerView</code> object in your activity:</p>
<pre>
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);
}
...
}
</pre>
<p>To create a simple adapter:</p>
<pre>
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;
}
}
</pre>
<h2 id="cardview">CardView</h2>
<p><code>CardView</code> extends the <code>FrameLayout</code> class and lets you show information
inside cards that have a consistent look on any app. <code>CardView</code> widgets can have
shadows and rounded corners.</p>
<p>To create a card with a shadow, use the <code>android:elevation</code> attribute.
<code>CardView</code> uses real elevation and dynamic shadows
and falls back to a programmatic shadow implementation on earlier versions. For more information,
see <a href="{@docRoot}preview/material/compatibility.html">Compatibility</a>.</p>
<p>Here's how to specify properties of <code>CardView</code>:</p>
<ul>
<li>To set the corner radius in your layouts, use the <code>card_view:cardCornerRadius</code>
attribute.</li>
<li>To set the corner radius in your code, use the <code>CardView.setRadius</code> method.</li>
<li>To set the background color of a card, use the <code>card_view:cardBackgroundColor</code>
attribute.</li>
</ul>
<p>To include a <code>CardView</code> in your layout:</p>
<pre>
<!-- 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>
</pre>
|
