Android RecyclerView UI 의 스크롤 컨트롤 예시
RecyclerView 는 증강 판 ListView 라 고 할 수 있다.이 는 ListView 와 같은 효 과 를 실 현 했 을 뿐만 아니 라 ListView 에 존재 하 는 여러 가지 부족 도 최적화 시 켰 다.RecyclerView 는 현재 공식 적 으로 추천 하 는 스크롤 컨트롤 입 니 다.O(∩∩)O~
기본 용법
RecyclerView 도 새로 추 가 된 컨트롤 이 므 로 프로젝트 의 build.gradle 에 해당 하 는 의존 라 이브 러 리 를 추가 해 야 사용 할 수 있 습 니 다.
compile 'com.android.support:recyclerview-v7:24.2.1'추가 후 Sync Now 링크 를 클릭 하 세 요.
다음 레이아웃 파일 수정:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
그리고 RecyclerView 에 어댑터 를 만 듭 니 다(RecyclerView 에서 계승 합 니 다.Adapter
public class CatAdapter extends RecyclerView.Adapter<CatAdapter.ViewHolder> {
private List<Cat> cats;
static class ViewHolder extends RecyclerView.ViewHolder {
ImageView image;
TextView name;
public ViewHolder(View view) {
super(view);
image = (ImageView) view.findViewById(R.id.image);
name = (TextView) view.findViewById(R.id.name);
}
}
public CatAdapter(List<Cat> cats) {
this.cats = cats;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.cat_item, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
Cat cat = cats.get(position);
holder.image.setImageResource(cat.getImageId());
holder.name.setText(cat.getName());
}
@Override
public int getItemCount() {
return cats.size();
}
}
CatAdapter 의 구조 함 수 는 보 여줄 데이터 원본 을 전달 하고 클래스 변수 cats 에 값 을 부여 하 는 데 사 용 됩 니 다.
CatAdapter 는 RecyclerView.Adapter 에서 계승 하기 때문에 다음 세 가지 방법 을 다시 써 야 합 니 다.
public class MainActivity extends AppCompatActivity {
private List<Cat> cats = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recycler_view);
LinearLayoutManager layoutManager=new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
CatAdapter adapter=new CatAdapter(cats);
recyclerView.setAdapter(adapter);
}
/**
*
*/
private void init() {
cats.add(new Cat(" ", R.drawable.cat1));
cats.add(new Cat(" ", R.drawable.cat2));
cats.add(new Cat(" ", R.drawable.cat3));
cats.add(new Cat(" ", R.drawable.cat4));
cats.add(new Cat(" ", R.drawable.cat5));
cats.add(new Cat(" ", R.drawable.cat6));
cats.add(new Cat(" ", R.drawable.cat7));
cats.add(new Cat(" ", R.drawable.cat8));
cats.add(new Cat(" ", R.drawable.cat9));
cats.add(new Cat(" ", R.drawable.cat10));
cats.add(new Cat(" ", R.drawable.cat11));
cats.add(new Cat(" ", R.drawable.cat12));
}
}
recyclerView 예시
우 리 는 recyclerView 를 사용 하여 ListView 의 효 과 를 만 들 었 고 코드 논리 가 더욱 뚜렷 해 졌 다.
2 가로 스크롤
이제 이 고양이 들 을 가로 스크롤 로 바 꿉 시다.
catitem 의 요 소 를 수직 으로 배열 합 니 다:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp" />
</LinearLayout>우 리 는 ImageView 와 TextView 를 모두 수평 으로 가운데 로 설정 하고 android:layot 를 사용 합 니 다.margin Top,텍스트 와 그림 을 거 리 를 두 면 더욱 아름 답 습 니 다.
다음은 이벤트 클래스 의 코드 를 수정 합 니 다.
@Override
protected void onCreate(Bundle savedInstanceState) {
...
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
...
}
가로 배열
우 리 는 화면 밖의 고양 이 를 수평 방향 으로 미끄러져 볼 수 있다.
ListView 의 레이아웃 배열 은 자신 이 관리 하기 때문에 한계 가 있 습 니 다.그리고 RecyclerView 는 레이아웃 작업 을 LayoutManager 에 맡 겼 습 니 다.LayoutManager 는 일련의 확장 가능 한 레이아웃 배열 인 터 페 이 스 를 제 정 했 습 니 다.그래서 우 리 는 인터페이스의 규범 에 따라 실현 하면 다양한 배열 방식 의 레이아웃 을 맞 출 수 있 습 니 다.O(∩∩)O~
3 폭포 흐름 배치
Staggered GridLayoutManager 를 사용 하여 멋 진 폭포 흐름 구 조 를 실현 합 시다 O(∩∩)O~
우선 cat 수정아 이 템 레이아웃 파일:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="5dp"
>
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginTop="10dp" />
</LinearLayout>활성 클래스 의 코드 수정:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
StaggeredGridLayoutManager layoutManager=new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
CatAdapter adapter = new CatAdapter(cats);
recyclerView.setAdapter(adapter);
}
폭포 흐름 예시
4 클릭 이벤트
RecyclerView 는 ListView 와 같은 setOnItemClickListener()이벤트 가 없 기 때문에 하위 항목 의 구체 적 인 View 에 클릭 이 벤트 를 등록 해 야 합 니 다.
ListView 의 setOnItemClickListener()는 하위 항목 의 클릭 이벤트 로 등록 되 어 있 지만,하위 항목 의 구체 적 인 단 추 를 누 르 려 면 ListView 를 사용 하 는 것 이 번 거 롭 습 니 다.그래서 RecyclerView 는 하위 항목 클릭 이벤트 의 모니터 를 직접 제거 하고 모든 클릭 이 벤트 를 구체 적 인 View 에 맡 겨 등록 합 니 다.O(∩∩)O
어댑터 수정:
static class ViewHolder extends RecyclerView.ViewHolder {
View catView;
ImageView image;
TextView name;
public ViewHolder(View view) {
super(view);
catView = view;
image = (ImageView) view.findViewById(R.id.image);
name = (TextView) view.findViewById(R.id.name);
Log.d(TAG, "ViewHolder: image:" + image);
Log.d(TAG, "ViewHolder: name:" + name);
}
}
public CatAdapter(List<Cat> cats) {
this.cats = cats;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.cat_item, parent, false);
final ViewHolder holder = new ViewHolder(view);
holder.catView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getAdapterPosition();
Cat cat = cats.get(position);
Toast.makeText(v.getContext(), " View " + cat.getName(), Toast.LENGTH_SHORT).show();
}
});
holder.image.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getAdapterPosition();
Log.d(TAG, "onClick: position:" + position);
Cat cat = cats.get(position);
Toast.makeText(v.getContext(), " " + cat.getName(), Toast.LENGTH_SHORT).show();
}
});
return holder;
}
RecyclerView 클릭 이벤트 실행
그림 아래 글 자 를 클릭 하면 ImageView 의 클릭 이벤트 가 발생 합 니 다.이벤트 가 외부 로 전송 되 기 때 문 입 니 다.O(∩∩)O~
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
