| page.title=목록 및 카드 생성 |
| |
| @jd:body |
| |
| <div id="tb-wrapper"> |
| <div id="tb"> |
| <h2>이 과정에서 다루는 내용</h2> |
| <ol> |
| <li><a href="#RecyclerView">목록 생성</a></li> |
| <li><a href="#CardView">카드 생성</a></li> |
| <li><a href="#Dependencies">종속 사항 추가</a></li> |
| </ol> |
| <h2>필독 항목</h2> |
| <ul> |
| <li><a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a></li> |
| <li><a href="{@docRoot}design/material/index.html">Android의 머티리얼 디자인</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <p>앱에서 머티리얼 디자인 스타일로 복잡한 목록과 카드를 생성하려면 |
| {@link android.support.v7.widget.RecyclerView} 및 {@link android.support.v7.widget.CardView} |
| 위젯을 사용하세요.</p> |
| |
| |
| <h2 id="RecyclerView">목록 생성</h2> |
| |
| <p>{@link android.support.v7.widget.RecyclerView} 위젯은 {@link android.widget.ListView}의 더욱 향상되고 유연해진 버전입니다. |
| 이 위젯은 한정된 수의 뷰를 유지함으로써 매우 효율적으로 스크롤할 수 있는 큰 데이터 집합을 표시하기 위한 컨테이너입니다. |
| 사용자 작업 또는 네트워크 이벤트에 따라 런타임에 요소가 변경되는 데이터 컬렉션이 있는 경우 |
| {@link android.support.v7.widget.RecyclerView} 위젯을 사용하세요. |
| </p> |
| |
| <p>{@link android.support.v7.widget.RecyclerView} 클래스는 다음 기능을 제공하여 큰 데이터 집합의 표시 및 취급 작업을 단순화합니다. |
| </p> |
| |
| <ul> |
| <li>항목 위치 지정을 위한 레이아웃 관리자</li> |
| <li>항목 제거 및 추가와 같은 공통 항목 작업을 위한 기본 애니메이션</li> |
| </ul> |
| |
| <p>또한 필요에 따라 {@link |
| android.support.v7.widget.RecyclerView} 위젯을 위한 사용자지정 레이아웃 관리자 및 애니메이션을 정의할 수도 있습니다.</p> |
| |
| <img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" /> |
| <p class="img-caption"> |
| <strong>그림 1</strong>. <code>RecyclerView</code> 위젯. |
| </p> |
| |
| <p>{@link android.support.v7.widget.RecyclerView} 위젯을 사용하려면 어댑터와 레이아웃 관리자를 지정해야 합니다. |
| 어댑터를 생성하려면 {@link |
| android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} 클래스를 확장하세요. 구현 세부사항은 데이터 집합의 사양 및 뷰 유형에 의해 결정됩니다. |
| 자세한 내용은 아래의 <a href="#RVExamples">예</a>를 참조하세요. |
| </p> |
| |
| <div style="float:right"> |
| <img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426" /> |
| <p class="img-caption" style="margin-left:8px"> |
| <strong>그림 2</strong> - <code>RecyclerView</code>를 사용한 목록. |
| </p> |
| </div> |
| |
| <p><strong>레이아웃 관리자</strong>는 항목 뷰를 {@link |
| android.support.v7.widget.RecyclerView}내에 배치하고, 사용자에게는 더 이상 보이지 않는 항목 뷰를 언제 재사용할지 결정합니다. |
| 뷰를 재사용 (또는 <em>재활용</em>)하기 위해, 레이아웃 관리자는 어댑터에게 뷰의 콘텐츠를 데이터 집합의 다른 요소로 교체하도록 요청할 수 있습니다. |
| 이런 방식으로 뷰를 재활용하면 불필요한 뷰 생성이나 리소스를 많이 소모하는 {@link android.app.Activity#findViewById findViewById()} 조회를 수행하지 않아도 되므로 성능이 개선됩니다. |
| |
| </p> |
| |
| <p>{@link android.support.v7.widget.RecyclerView}는 다음과 같은 내장 레이아웃 관리자를 제공합니다.</p> |
| |
| <ul> |
| <li>{@link android.support.v7.widget.LinearLayoutManager}는 항목을 가로 또는 세로 스크롤 목록으로 표시합니다. |
| </li> |
| <li>{@link android.support.v7.widget.GridLayoutManager}는 그리드 형식으로 항목을 표시합니다.</li> |
| <li>{@link android.support.v7.widget.StaggeredGridLayoutManager}는 지그재그형의 그리드 형식으로 항목을 표시합니다.</li> |
| </ul> |
| |
| <p>사용자지정 레이아웃 관리자를 생성하려면 {@link |
| android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} 클래스를 확장하십시오.</p> |
| |
| <h3>애니메이션</h3> |
| |
| <p>항목 추가 및 제거를 위한 애니메이션은 {@link |
| android.support.v7.widget.RecyclerView}에서 기본적으로 활성화됩니다. 이러한 애니메이션을 사용자지정하려면 |
| {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} 클래스를 |
| 확장하고 {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()} |
| 메서드를 사용하세요.</p> |
| |
| <h3 id="RVExamples">예:</h3> |
| |
| <p>다음 코드 예는 |
| {@link android.support.v7.widget.RecyclerView}를 레이아웃에 추가하는 방법을 보여줍니다.</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>{@link android.support.v7.widget.RecyclerView} 위젯을 레이아웃에 추가한 후, 객체 핸들을 얻어 레이아웃 관리자에 연결하고, 표시할 데이터의 어댑터를 첨부합니다. |
| |
| </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); |
| |
| // 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 |
| mLayoutManager = new LinearLayoutManager(this); |
| mRecyclerView.setLayoutManager(mLayoutManager); |
| |
| // specify an adapter (see also next example) |
| mAdapter = new MyAdapter(myDataset); |
| mRecyclerView.setAdapter(mAdapter); |
| } |
| ... |
| } |
| </pre> |
| |
| <p>어댑터는 데이터 집합의 항목에 액세스할 수 있게 해주며, 항목 뷰를 생성하고, 원래의 항목이 더 이상 보이지 않을 경우 일부 뷰의 콘텐츠를 새 데이터 항목으로 교체합니다. |
| |
| 다음 코드 예는 {@link android.widget.TextView} 위젯을 사용하여 표시된 문자열 배열로 이루어진 데이터 집합의 간단한 구현을 보여줍니다. |
| </p> |
| |
| <pre> |
| public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { |
| private String[] mDataset; |
| |
| // Provide a reference to the views for each data item |
| // Complex data items may need more than one view per item, and |
| // you provide access to all the views for a data item in a view holder |
| public static class ViewHolder extends RecyclerView.ViewHolder { |
| // each data item is just a string in this case |
| 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, false); |
| // 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> |
| |
| |
| <div style="float:right;margin-top:15px;margin-left:30px"> |
| <img src="{@docRoot}design/material/images/card_travel.png" alt="" width="225" height="383"> |
| <p class="img-caption" style="margin-left:12px"> |
| <strong>그림 3</strong>. 카드 예. |
| </p> |
| </div> |
| |
| <h2 id="CardView">카드 생성</h2> |
| |
| <p>{@link android.support.v7.widget.CardView}는 {@link android.widget.FrameLayout} 클래스를 |
| 확장하고 카드 내의 정보를 플랫폼에서 일관된 모습으로 표시할 수 있도록 합니다. {@link |
| android.support.v7.widget.CardView} 위젯은 그림자와 둥근 모서리를 가질 수 있습니다.</p> |
| |
| <p>그림자가 있는 카드를 생성하려면 <code>card_view:cardElevation</code> 특성을 사용합니다. |
| {@link android.support.v7.widget.CardView}는 Android 5.0(API 레벨 21) 이상에서 실제 엘리베이션 및 동적 그림자를 사용하며, 이전 버전에서는 이전의 프로그래밍 방식의 그림자 구현으로 환원됩니다. 자세한 내용은 <a href="{@docRoot}training/material/compatibility.html">호환성 유지</a>를 참조하세요. |
| |
| |
| </p> |
| |
| <p>이러한 속성을 사용하여 |
| {@link android.support.v7.widget.CardView} 위젯의 모습을 사용자지정합니다.</p> |
| |
| <ul> |
| <li>레이아웃에 모서리 반지름을 설정하려면 <code>card_view:cardCornerRadius</code> |
| 특성을 사용합니다.</li> |
| <li>코드에서 모서리 반지름을 설정하려면 <code>CardView.setRadius</code> 메서드를 사용합니다.</li> |
| <li>카드의 배경색을 설정하려면 <code>card_view:cardBackgroundColor</code> |
| 특성을 사용합니다.</li> |
| </ul> |
| |
| <p>다음 코드 예는 {@link android.support.v7.widget.CardView} |
| 위젯을 레이아웃에 포함시키는 방법을 보여줍니다.</p> |
| |
| <pre> |
| <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" |
| xmlns:tools="http://schemas.android.com/tools" |
| xmlns:card_view="http://schemas.android.com/apk/res-auto" |
| ... > |
| <!-- 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> |
| </LinearLayout> |
| </pre> |
| |
| <p>자세한 내용은 {@link android.support.v7.widget.CardView}의 API 레퍼런스를 참조하세요.</p> |
| |
| |
| <h2 id="Dependencies">종속 사항 추가</h2> |
| |
| <p>{@link android.support.v7.widget.RecyclerView} 및 {@link android.support.v7.widget.CardView} |
| 위젯은 <a href="{@docRoot}tools/support-library/features.html#v7">v7 지원 라이브러리</a>의 일부입니다. |
| 이러한 위젯을 프로젝트에서 사용하려면 다음 |
| <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 종속 사항</a>을 앱의 모듈에 추가하세요. |
| </p> |
| |
| <pre> |
| dependencies { |
| ... |
| compile 'com.android.support:cardview-v7:21.0.+' |
| compile 'com.android.support:recyclerview-v7:21.0.+' |
| } |
| </pre> |