Android에서 Recyclerview에 헤더를 추가하는 방법
recyclerview에 헤더 항목을 추가하기 위해 완성된 모델을 찾고 있었는데, 간결하고 명료한 것을 발견할 수 없었습니다. 이 블로그에서는 Android 애플리케이션용 recyclerview에 헤더 항목을 추가하는 데 사용할 수 있는 모델을 개발하려고 합니다.
아래 스크린샷을 보고 이 자습서에서 달성하려는 내용에 대한 아이디어를 얻으십시오.
잘못 정렬된 보기 항목 출력
실제 출력
시작하자.
1. 지원 라이브러리 추가
Recyclerview가 프로젝트에서 작동하려면 다음 지원 라이브러리를 gradle(Module.app)에 추가해야 합니다.
implementation 'com.android.support:recyclerview-v7:28.0.0'
2. Recyclerview 만들기
향상된 경험을 위해 listview의 Recyclerview 인스턴스를 사용하고 XML에서 정의하는 것은 매우 간단합니다. 다음과 같이 xml에서 정의할 수 있습니다.
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
3. Header 및 Viewitem 레이아웃에 대해 서로 다른 두 가지 레이아웃 생성
여기서 우리는 두 개의 xml 레이아웃을 만듭니다. 하나는 헤더 항목용이고 다른 하나는 보기 항목용입니다.
Headerview는 헤더 항목에 표시되는 데 필요한 UI 구성 요소를 보유합니다.
헤더 항목 xml에 대한 코드는 아래와 유사해야 합니다.
activity_headeritem.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:id="@+id/main_dashboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="20dp">
<LinearLayout
android:id="@+id/counts_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:paddingBottom="30dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/review_needs_count_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/ThemePrimaryColor"
android:textAppearance="@style/customfontstyle"
android:textStyle="bold"
/>
<TextView
android:id="@+id/review_needs_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="NEEDS REVIEW"
android:textColor="@color/disable_login_btn_bg"
android:textSize="11sp"
android:textStyle="bold"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/planned_requests_count_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/ThemePrimaryColor"
android:textAppearance="@style/customfontstyle"
android:textStyle="bold"
/>
<TextView
android:id="@+id/inprogress_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="PLANNED REQUESTS"
android:textColor="@color/disable_login_btn_bg"
android:textSize="11sp"
android:textStyle="bold"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/inprogress_count_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/ThemePrimaryColor"
android:textAppearance="@style/customfontstyle"
android:textStyle="bold"
/>
<TextView
android:id="@+id/completed_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="IN PROGRESS"
android:textStyle="bold"
android:textColor="@color/disable_login_btn_bg"
android:textSize="11sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/completed_count_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/ThemePrimaryColor"
android:textAppearance="@style/customfontstyle"
android:textStyle="bold"
/>
<TextView
android:id="@+id/planned_requests_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="COMPLETED"
android:textColor="@color/disable_login_btn_bg"
android:textSize="11sp"
android:textStyle="bold"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Headerview와 유사하게 Listview Items는 보기 항목에 대한 UI 구성 요소를 보유합니다.
아래 Listview 항목에 대한 xml 코드를 첨부했습니다.
activity_listviewitem.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<LinearLayout
android:id="@+id/latest_content_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
android:paddingTop="15dp"
android:paddingRight="20dp"
android:paddingBottom="15dp"
android:paddingLeft="5dp"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal"
>
<com.like.LikeButton
android:id="@+id/upward_image"
android:layout_width="40dp"
android:layout_height="40dp"
app:icon_size="25dp"
app:anim_scale_factor="2"
app:like_drawable="@drawable/arrow_up_colored"
app:unlike_drawable="@drawable/arrow_up_icon"
android:layout_gravity="center_horizontal"
app:circle_start_color="@color/ThemeColor"
app:dots_primary_color="@color/ThemeColor"
app:dots_secondary_color="@color/ThemeColor"
app:circle_end_color="@color/ThemeColor"/>
<TextView
android:id="@+id/count_upward_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/UpvoteTextStyle"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/latest_feed_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_weight="1.8">
<TextView
android:id="@+id/latest_tab_title_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/TitletextStyle"
/>
<TextView
android:id="@+id/latest_tab_descrip_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="3"
style="@style/DescriptiontextStyle"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="5dp">
<TextView
android:id="@+id/comment_count_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/CommentstextStyle"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/comments_text"
style="@style/CommentstextStyle"
/>
<TextView
android:id="@+id/latest_tab_status_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/StatusTextStyle"
android:textColor="@color/inprogress_status_color"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
4. 커스텀어댑터클래스.자바
viewtype 속성을 사용하여 헤더 항목을 recyclerview에 추가했습니다. 이제 Recyclerview용 맞춤 어댑터를 만들겠습니다.
onCreateViewHolder 방법에서 우리는 layout.xml을 정의하는 데 도움이 되는 두 가지 확장 방법을 사용해야 합니다. viewtype 속성을 따르는 "RecyclerView.Adapter"로 어댑터를 확장해야 합니다.CustomAdapter.java
public class CustomAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private static final int TYPE_HEADER = 0;
private static final int TYPE_ITEM = 1;
private List<ViewItemsModel> viewitemlists;
private Context context;
public CustomAdapter(Context context, List<ViewItemsModel> viewitemlists) {
this.context = context;
this.viewitemlists = viewitemlists;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == TYPE_ITEM) {
// Here Inflating your recyclerview item layout
View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_listviewitem, parent, false);
return new ItemViewHolder(itemView);
} else if (viewType == TYPE_HEADER) {
// Here Inflating your header view
View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_headeritem, parent, false);
return new HeaderViewHolder(itemView);
}
else return null;
}
@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
if (holder instanceof HeaderViewHolder){
setheadersdata_flag = true;
HeaderViewHolder headerViewHolder = (HeaderViewHolder) holder;
// You have to set your header items values with the help of model class and you can modify as per your needs
headerViewHolder.txt_needsreview.setText(“YOUR _HEADERVIEW_STRING”);
}
else if (holder instanceof ItemViewHolder){
final ItemViewHolder itemViewHolder = (ItemViewHolder) holder;
// Following code give a row of header and decrease the one position from listview items
final LatestTabModel.ViewItemsModel data = latestlists.get(position-1);
// You have to set your listview items values with the help of model class and you can modify as per your needs
itemViewHolder.title.setText(data.getTitle());
}
}
@Override
public int getItemViewType(int position) {
if (position == 0) {
return TYPE_HEADER;
}
return TYPE_ITEM;
}
// getItemCount increasing the position to 1. This will be the row of header
@Override
public int getItemCount() {
return latestlists.size()+1;
}
private class HeaderViewHolder extends RecyclerView.ViewHolder {
TextView txt_needsreview,txt_planned,txt_inprogress,txt_completed;
public HeaderViewHolder(View view) {
super(view);
txt_needsreview = (TextView) view.findViewById(R.id.review_needs_count_text);
txt_planned = (TextView) view.findViewById(R.id.planned_requests_count_text);
txt_inprogress = (TextView) view.findViewById(R.id.inprogress_count_text);
txt_completed = (TextView) view.findViewById(R.id.completed_count_text);
}
}
public class ItemViewHolder extends RecyclerView.ViewHolder {
TextView title,description,upward_count,comment_count,status;
LinearLayout latest_feed_layout;
LikeButton upvote_image;
public ItemViewHolder(View itemView) {
super(itemView);
title = (TextView) itemView.findViewById(R.id.latest_tab_title_text);
description = (TextView) itemView.findViewById(R.id.latest_tab_descrip_text);
upward_count = (TextView) itemView.findViewById(R.id.count_upward_text);
comment_count = (TextView) itemView.findViewById(R.id.comment_count_text);
status = (TextView) itemView.findViewById(R.id.latest_tab_status_text);
latest_feed_layout = (LinearLayout) itemView.findViewById(R.id.latest_feed_layout);
upvote_image = (LikeButton) itemView.findViewById(R.id.upward_image);
}
}
}
getItemViewType()은 Recyclerview를 스크롤하는 데 도움이 되는 viewtype 속성을 Recyclerview에 제공합니다.
getItemCount()는 목록 항목 위치를 1씩 증가시킵니다(listitem + 1). 헤더 아래에 행을 제공합니다.
5. 메인액티비티.자바
이 클래스에서는 스크롤 기능을 완성하기 위해 Recyclerview의 어댑터 클래스를 전달해야 합니다. 마지막으로 헤더 뷰를 통해 Recyclerview의 완전한 기능을 구현합니다.
MainActivity.java
public class MainActivity extends AppCompatActivity {
RecyclerView recyclerView;
LinearLayoutManager linearLayoutManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = (RecyclerView)findViewById(R.id.my_recycler_view);
linearLayoutManager = new LinearLayoutManager(this);
MyRecyclerAdapter adapter = new MyRecyclerAdapter(getActivity(), getListViewItems());
recyclerView.setLayoutManager(linearLayoutManager);
recyclerView.setAdapter(adapter);
}
}
이것으로 이 튜토리얼을 마칩니다. Android 앱용 recyclerview를 만드는 방법을 배웠기를 바랍니다. 이제 안드로이드 장치에서 이것을 실행하고 출력을 직접 볼 수 있습니다. 이 출력은 정확히 원하는 것 같습니다.
Reference
이 문제에 관하여(Android에서 Recyclerview에 헤더를 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/gopigk/how-to-add-header-to-recyclerview-in-android-5cl1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
