RecycleView 혼합 항목 레이아웃 구현

12372 단어 안 드 로 이 드 학습 노트
RecycleView 혼합 항목 레이아웃 구현
144
저자.
작은 인물 이 덩 크 슛 을 하 다.
2017.03.13 15:47*
글자 수 233
블 로그 주소: http://www.jianshu.com/p/c9ce1c67981d
우선 효 과 를 살 펴 보 자.
RecycleView实现混合Item布局_第1张图片
효과 미리 보기. png
이 실례 는 모 과 망 의 모니터 에서 나온다http://www.imooc.com/video/13046실현 절 차 는 스스로 모니터 를 볼 수 있 고 실현 코드 만 기록 되 어 있다.
의존 도 추가:
(1) 프로젝트 의 build. gradle 파일 에 아래 의존 도 를 추가 합 니 다.
compile 'com.android.support:recyclerview-v7:25.0.0'

(2) 아래 그림 에서 도 자동 으로 의존 할 수 있 으 며 Recycle View 를 선택 하면 된다.
RecycleView实现混合Item布局_第2张图片
코드 부분
직접 코드 전송 문 MainActivity
public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private MyAdapter mMyAdapter;


    private int colors[] = {android.R.color.holo_blue_bright,android.R.color.black,android.R.color.holo_red_dark};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
    }

    private void initView() {
        mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerView);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL,
                false));
        mMyAdapter = new MyAdapter(this);
        mRecyclerView.setAdapter(mMyAdapter);

    }

    private void initData() {
        List  list= new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            Person p = new Person();
            int type = (int) (Math.random()*3+1);
            p.type = type;
            p.content="content"+1;
            p.avaterColor = colors[type-1];
            p.name = "name"+i;
            list.add(p);
        }
        mMyAdapter.addList(list);
        mMyAdapter.notifyDataSetChanged();
    }
}

bean 개체 Person 클래스
/**
 * Created by 24540 on 2017/3/13.
 */

public class Person {
    public  static final int TYPE_ONE = 1;
    public  static final int TYPE_TWO = 2;
    public  static final int TYPE_THREE = 3;

    protected int type;
    protected int avaterColor;
    protected int contentColor;
    protected String name;
    protected String content;

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getContentColor() {
        return contentColor;
    }

    public void setContentColor(int contentColor) {
        this.contentColor = contentColor;
    }

    public int getAvaterColor() {
        return avaterColor;
    }

    public void setAvaterColor(int avaterColor) {
        this.avaterColor = avaterColor;
    }

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public static int getTypeThree() {
        return TYPE_THREE;
    }

    public static int getTypeTwo() {
        return TYPE_TWO;
    }
    public static int getTypeOne() {
        return TYPE_ONE;
    }
}

Recycle View 어댑터
public class MyAdapter extends RecyclerView.Adapter {

    private LayoutInflater mLayoutInflater;

    private List mList = new ArrayList<>();

    private Context mContext;

    public MyAdapter(Context mContext) {
        this.mContext = mContext;
        mLayoutInflater = LayoutInflater.from(mContext);
    }

    //          
    public void addList(List list){
        mList.addAll(list);
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //     viewType，        ViewHolder
        switch (viewType){
            case Person.TYPE_ONE:
                return new TypeOneHolder(mLayoutInflater.inflate(R.layout.item_type_one,parent,false));
            case Person.TYPE_TWO:
                return new TypeTwoHolder(mLayoutInflater.inflate(R.layout.item_type_two,parent,false));
            case Person.TYPE_THREE:
                return new TypeThreeHolder(mLayoutInflater.inflate(R.layout.item_type_three,parent,false));
        }
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        //   TypeAbstartViewHolder，                
        ((TypeAbstartViewHolder)holder).bindHolder(mList.get(position));
    }

    @Override
    public int getItemViewType(int position) {
        return mList.get(position).getType();
    }

    @Override
    public int getItemCount() {
        return mList.size();
    }
}

관건 적 인 점 은 TypeAbstartView Holder 가 bindHolder 방법 을 추상 화하 고 서로 다른 item 구 조 를 우아 하 게 불 러 옵 니 다. 코드 는 다음 과 같 습 니 다.
public abstract class TypeAbstartViewHolder extends RecyclerView.ViewHolder {
    public TypeAbstartViewHolder(View itemView) {
        super(itemView);
    }
    public abstract void bindHolder(Person person);
}

위 에서 추상 적 인 방법 을 계승 하여 서로 다른 item 레이아웃 TypeOne Holder 를 불 러 옵 니 다.
public class TypeOneHolder extends TypeAbstartViewHolder {
    private ImageView avater;
    private TextView name;

    public TypeOneHolder(View itemView) {
        super(itemView);
        avater = (ImageView) itemView.findViewById(R.id.avater);
        name = (TextView) itemView.findViewById(R.id.name);
    }
    // ViewHolder    
    @Override
    public void bindHolder(Person person) {
        avater.setBackgroundResource(person.getAvaterColor());
        name.setText(person.getName());
    }
}

TypeTwo Holde 코드 는 다음 과 같 습 니 다:
public class TypeTwoHolder extends TypeAbstartViewHolder {
    private ImageView avater;
    private TextView name;
    private TextView content;

    public TypeTwoHolder(View itemView) {
        super(itemView);
        avater = (ImageView) itemView.findViewById(R.id.avater);
        name = (TextView) itemView.findViewById(R.id.name);
        content = (TextView) itemView.findViewById(R.id.content);
    }


    // ViewHolder    
    @Override
    public void bindHolder(Person person) {
        avater.setBackgroundResource(person.getAvaterColor());
        name.setText(person.getName());
        content.setText(person.getContent());
    }
}

TypeThreeHolder 의 코드 는 다음 과 같 습 니 다.
public class TypeThreeHolder extends TypeAbstartViewHolder {
    private ImageView avater;
    private TextView name;
    private TextView content;
    private ImageView iv;

    public TypeThreeHolder(View itemView) {
        super(itemView);
        avater = (ImageView) itemView.findViewById(R.id.avater);
        name = (TextView) itemView.findViewById(R.id.name);
        content = (TextView) itemView.findViewById(R.id.content);
        iv = (ImageView) itemView.findViewById(R.id.content_color);
    }

    // ViewHolder    
    @Override
    public void bindHolder(Person person) {
        avater.setBackgroundResource(person.getAvaterColor());
        name.setText(person.getName());
        content.setText(person.getContent());
        iv.setBackgroundResource(person.getAvaterColor());
    }
}

xml 파일 코드 부분: item 만 보 냈 습 니 다.type_three 부분의 코드:

recycle View 를 통 해 두 개의 서로 다른 레이아웃 혼합 을 실현 하려 면 main Activity 를 다음 과 같이 수정 해 야 합 니 다.
public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private MyAdapter mMyAdapter;


    private int colors[] = {android.R.color.holo_blue_bright, android.R.color.black, android.R.color.holo_red_dark};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
    }

    private void initView() {
        mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerView);

        //       2         
        final GridLayoutManager manager = new GridLayoutManager(this, 2);
        mRecyclerView.setLayoutManager(manager);
        manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                int type = mRecyclerView.getAdapter().getItemViewType(position);
                //  TYPE_THREE，    ，      
                if (type == Person.TYPE_THREE) {
                    return manager.getSpanCount();
                } else {
                    return 1;
                }
            }
        });
        mMyAdapter = new MyAdapter(this);

        //      view    
        mRecyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
                GridLayoutManager.LayoutParams layoutParams = (GridLayoutManager.LayoutParams) view.getLayoutParams();
                int spanSize = layoutParams.getSpanSize();
                int spanIndex = layoutParams.getSpanIndex();
                outRect.top = 20;
                if (spanSize != manager.getSpanCount()) {
                    if (spanIndex == 0) {
                        outRect.right = 0;
                    } else {
                        outRect.right = 10;
                    }
                }
            }
        });
        mRecyclerView.setAdapter(mMyAdapter);


    }

    private void initData() {
        List list = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            Person p = new Person();
            int type = (int) (Math.random() * 3 + 1);
            p.type = type;
            p.content = "content" + 1;
            p.avaterColor = colors[type - 1];
            p.name = "name" + i;
            list.add(p);
        }
        mMyAdapter.addList(list);
        mMyAdapter.notifyDataSetChanged();
    }
}

효과 그림:
RecycleView实现混合Item布局_第3张图片
두 가지 레이아웃. png
android
© 저작권 은 작자 에 게 귀속 된다
고발 문
제목 1069: 학생 정보 찾기
WIFI 소개 및 간단 한 작업 절차

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage