Android Material Design 학습(ListView 대신 RecyclerView)

본 논문 의 사례 는 RecyclerView 를 실현 하고 코드 가 비교적 간단 하 며 초보 자 에 게 적합 하 며 오류 가 있 으 면 지적 해 주 십시오.
복습 ListView
이 글 을 보면학습 Android ListView 기초ListView 에 대한 기초 지식 을 알 수 있 습 니 다.
실현 과정 에서 BaseAdapter 를 복사 해 야 하 는데 주로 이 네 가지 방법 입 니 다.
  • Public int getCount():어댑터 의 데이터 집중 데이터 의 갯 수,즉 ListView 가 표시 해 야 할 데이터 갯 수
  • Public Object getItem(int position):데이터 집중 과 지정 한 색인 에 대응 하 는 데이터 항목 가 져 오기
  • public long getItemId(int position):지정 한 줄 에 대응 하 는 ID 가 져 오기
  • Public View getView(int position,View convertView,View Group parent):항목 마다 표시 할 내용 가 져 오기
  • 일반적으로 ListView 는 항목 마다 같은 레이아웃 입 니 다.각 항목 이 서로 다른 레이아웃 을 실현 하려 면 getItemView Type 과 getView TypeCount 를 복사 하여 실현 할 수 있 습 니 다.
    RecyclerView 구현
    1.xml 레이아웃
    다음은 RecyclerView 의 각 항목 의 레이아웃 layot 아래 의 item 입 니 다.article_type_1.xml
    
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:card_view="http://schemas.android.com/apk/res-auto"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:fresco="http://schemas.android.com/apk/res-auto"
     android:id="@+id/cv_item"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:foreground="?android:attr/selectableItemBackground"
     app:cardCornerRadius="5dp"
     app:cardElevation="5dp"
     app:contentPadding="2dp">
    
     <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
    
      <com.facebook.drawee.view.SimpleDraweeView
       android:id="@+id/rcv_article_photo"
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:layout_centerVertical="true"
       fresco:actualImageScaleType="centerInside"
       fresco:roundAsCircle="true"
       fresco:roundingBorderColor="@color/lightslategray"
       fresco:roundingBorderWidth="1dp" />
    
      <LinearLayout
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
       android:orientation="vertical">
    
       <TextView
        android:id="@+id/rcv_article_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="2dp"
        android:gravity="center"
        android:text="    《             》     "
        android:textColor="@color/primary_text" />
       <!--                -->
       <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        android:orientation="horizontal">
    
        <TextView
         android:id="@+id/rcv_article_date"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="10dp"
         android:layout_marginRight="2dp"
         android:text="2015-01-09" />
    
        <TextView
         android:id="@+id/rcv_article_source"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="2dp"
         android:layout_marginRight="2dp"
         android:text="     " />
    
        <TextView
         android:id="@+id/rcv_article_readtimes"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="2dp"
         android:layout_marginRight="2dp"
         android:text="1129 " />
    
       </LinearLayout>
    
    
       <TextView
        android:id="@+id/rcv_article_preview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:ellipsize="end"
        android:maxLines="2"
        android:text="      :  、                ,            、                ..." />
    
      </LinearLayout>
     </LinearLayout>
    
    </android.support.v7.widget.CardView> 
    
    
    레이아웃 사고방식 은 바로 CardView 안에 LinearLayout 가 삽입 되 어 있다 는 것 이다.그림 부분 은 고정 너비 100 dp,텍스트 부분 은 android:layotweight='1'이 다른 부분 을 차지 했다.
    TextView 는 android:gravity="center"를 이용 하여 제목 의 텍스트 를 가운데 로 합 니 다.
    Linear Layout 에서 android:gravity="center"를 이용 하여"2015-01-09 과학연구 원 1129 회"를 중간 에 두 었 습 니 다.
    뉴스 상세 내용 의 TextView 이용
    
    android:maxLines="2"
    android:ellipsize="end"
    
    
    글 의 내용 을 2 줄 로 한정 하고 초과 부분 은 생략 번호 로 표시 합 니 다.
    fresco 를 사용 하 십시오.여기 구덩이 가 있 습 니 다.이 글 을 옮 겨 주 십시오.
    Android 의 Fresco 는 원형 그림 의 구 덩이 를 표시 합 니 다.
    미리 보기 효과

    뉴스 목록 의 xml 파일,layot 폴 더 아래 fragmentarticle.xml
    
    <?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:orientation="vertical">
    
     <android.support.v7.widget.RecyclerView
      android:id="@+id/rcv_article"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1" />
    </LinearLayout>
    
    
    2.Adapter 실현
    주요 절 차 는:
    위의 아 이 템 에 의 하면article_type_1.xml 는 class ImageItemArticleView Holder extends RecyclerView 를 실현 합 니 다.View Holder
    RecyclerView 를 계승 합 니 다.어댑터,클래스 항목 ArticleListAdapter 는 RecyclerView 를 확장 합 니 다.어댑터<...>
    세 가지 방법 을 다시 쓰다
  • public int getItemCount()
  • public TestAdapter.ImageItemArticleViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
  • public void onBindViewHolder(ImageItemArticleViewHolder holder, int position)
  • 
    public class ItemArticleAdapter extends RecyclerView.Adapter<ItemArticleAdapter.ImageItemArticleViewHolder> {
    
     //    
     private List<ItemArticle> articleList;
    
     //context
     private Context context;
    
     private LayoutInflater mLayoutInflater;
    
    
     public ItemArticleAdapter(Context context,List<ItemArticle> articleList) {
      this.context = context;
      this.articleList = articleList;
      mLayoutInflater = LayoutInflater.from(context);
     }
    
     @Override
     public ItemArticleAdapter.ImageItemArticleViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
      View view = mLayoutInflater.inflate(
        R.layout.item_article_type_1, parent, false);
      return new ImageItemArticleViewHolder(view);
     }
    
     @Override
     public void onBindViewHolder(ImageItemArticleViewHolder holder, int position) {
      ItemArticle article = articleList.get(position);
      holder.rcvArticlePhoto.setImageURI(Uri.parse(article.getImageUrl()));
      holder.rcvArticleTitle.setText(article.getTitle());
      holder.rcvArticleDate.setText(article.getPublishDate());
      holder.rcvArticleSource.setText(article.getSource());
      //          int   ,      String   
      holder.rcvArticleReadtimes.setText(article.getReadTimes()+" ");
      holder.rcvArticlePreview.setText(article.getPreview());
     }
    
    
     @Override
     public int getItemCount() {
      return articleList.size();
     }
    
     class ImageItemArticleViewHolder extends RecyclerView.ViewHolder {
    
      @InjectView(R.id.rcv_article_photo)
      SimpleDraweeView rcvArticlePhoto;
      @InjectView(R.id.rcv_article_title)
      TextView rcvArticleTitle;
      @InjectView(R.id.rcv_article_date)
      TextView rcvArticleDate;
      @InjectView(R.id.rcv_article_source)
      TextView rcvArticleSource;
      @InjectView(R.id.rcv_article_readtimes)
      TextView rcvArticleReadtimes;
      @InjectView(R.id.rcv_article_preview)
      TextView rcvArticlePreview;
    
      public ImageItemArticleViewHolder(View itemView) {
       super(itemView);
       ButterKnife.inject(this, itemView);
      }
     }
    
    }
    
    
    3.뉴스 실체 류 javabean
    뉴스 가 있 는 index,이미지 url,제목,발표 시간,출처,읽 기 횟수,뉴스 내용 미리 보기
    
    /**
     *    ,    RecycleView       javabean
     *         javabean
     */
    public class ItemArticle {
     private int index;
     private String imageUrl;
     private String title;
     private String publishDate;
     private String source;
     private int readTimes;
     private String preview;
    
     public ItemArticle(int index, String imageUrl, String title, String publishDate, String source, int readTimes, String preview) {
      this.index = index;
      this.imageUrl = imageUrl;
      this.title = title;
      this.publishDate = publishDate;
      this.source = source;
      this.readTimes = readTimes;
      this.preview = preview;
     }
    
     public int getIndex() {
      return index;
     }
    
     public void setIndex(int index) {
      this.index = index;
     }
    
     public String getImageUrl() {
      return imageUrl;
     }
    
     public void setImageUrl(String imageUrl) {
      this.imageUrl = imageUrl;
     }
    
     public String getTitle() {
      return title;
     }
    
     public void setTitle(String title) {
      this.title = title;
     }
    
     public String getPublishDate() {
      return publishDate;
     }
    
     public void setPublishDate(String publishDate) {
      this.publishDate = publishDate;
     }
    
     public String getSource() {
      return source;
     }
    
     public void setSource(String source) {
      this.source = source;
     }
    
     public int getReadTimes() {
      return readTimes;
     }
    
     public void setReadTimes(int readTimes) {
      this.readTimes = readTimes;
     }
    
     public String getPreview() {
      return preview;
     }
    
     public void setPreview(String preview) {
      this.preview = preview;
     }
    }
    
    
    4.fragment 에서 RecyclerView 사용
    아 이 디 어 는 하나의 비동기 스 레 드 를 열 어 여러 가지 뉴스 를 읽 고 List itemArticleList 를 추가 하 는 것 입 니 다.이 itemArticleList 구조 ItemArticleAdapter 는 마지막 으로 setAdapter()방법 으로 RecyclerView 에 어댑터 를 추가 합 니 다.
    
    public class ArticleFragment extends Fragment {
     private static final String STORE_PARAM = "param";
     @InjectView(R.id.rcv_article)
     RecyclerView rcvArticle;
    
     private String mParam;
     //      
     private List<ItemArticle> itemArticleList = new ArrayList<ItemArticle>();
    
     //   fragment     Activity,     Context
     private Activity mAct;
    
    
     public static Fragment newInstance(String param) {
      ArticleFragment fragment = new ArticleFragment();
      Bundle args = new Bundle();
      args.putString(STORE_PARAM, param);
      fragment.setArguments(args);
      return fragment;
     }
    
     @Override
     public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      if (getArguments() != null) {
       mParam = getArguments().getString(STORE_PARAM);
      }
     }
    
     @Nullable
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
      View view = inflater.inflate(R.layout.fragment_article, null);
      Log.i(STORE_PARAM, "in StoreFragment");
      mAct = getActivity();
      ButterKnife.inject(this, view);
      return view;
     }
    
     @Override
     public void onActivityCreated(@Nullable Bundle savedInstanceState) {
      super.onActivityCreated(savedInstanceState);
      rcvArticle.setLayoutManager(new LinearLayoutManager(mAct));//           listview
    //  rcvArticle.setLayoutManager(new GridLayoutManager(mAct, 2));//             grid view
    //  rcvArticle.setLayoutManager(new StaggeredGridLayoutManager(2, OrientationHelper.VERTICAL));//                
    
      new LatestArticleTask().execute();
    
     }
    
     @Override
     public void onDestroyView() {
      super.onDestroyView();
      ButterKnife.reset(this);
     }
    
     class LatestArticleTask extends AsyncTask<String, Void, List<ItemArticle>> {
    
      @Override
      protected void onPreExecute() {
       super.onPreExecute();
      }
    
      @Override
      protected List<ItemArticle> doInBackground(String... params) {
       ItemArticle storeInfo1 =
         new ItemArticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/U5912P28T3D3634984F328DT20120520152700.JPG", "    《             》     ", "2015-01-09", "     ", 1129,
           "      :  、                ,            、                ...");
       ItemArticle storeInfo2 =
         new ItemArticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/U5912P28T3D3634984F328DT20120520152700.JPG", "    《             》     ", "2015-01-09", "     ", 1129,
           "      :  、                ,            、                ...");
       ItemArticle storeInfo3 =
         new ItemArticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/U5912P28T3D3634984F328DT20120520152700.JPG", "    《             》     ", "2015-01-09", "     ", 1129,
           "      :  、                ,            、                ...");
       ItemArticle storeInfo4 =
         new ItemArticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/U5912P28T3D3634984F328DT20120520152700.JPG", "    《             》     ", "2015-01-09", "     ", 1129,
           "      :  、                ,            、                ...");
       ItemArticle storeInfo5 =
         new ItemArticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/U5912P28T3D3634984F328DT20120520152700.JPG", "    《             》     ", "2015-01-09", "     ", 1129,
           "      :  、                ,            、                ...");
       ItemArticle storeInfo6 =
         new ItemArticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/U5912P28T3D3634984F328DT20120520152700.JPG", "    《             》     ", "2015-01-09", "     ", 1129,
           "      :  、                ,            、                ...");
       itemArticleList.add(storeInfo1);
       itemArticleList.add(storeInfo2);
       itemArticleList.add(storeInfo3);
       itemArticleList.add(storeInfo4);
       itemArticleList.add(storeInfo5);
       itemArticleList.add(storeInfo6);
       return itemArticleList;
      }
    
      @Override
      protected void onPostExecute(List<ItemArticle> data) {
       super.onPostExecute(data);
       ItemArticleAdapter adapter = new ItemArticleAdapter(mAct, data);
       rcvArticle.setAdapter(adapter);
      }
     }
    
    }
    
    
    효과 도
    레이아웃 을 수정 하여 선형 디 스 플레이 나 궁 격 디 스 플레이 를 사용 합 니 다.(예전 에는 궁 격 이 귀 찮 았 는데,지금 은 명령 하나 면 돼.구 글 이 이렇게 간단하게 만 들 었 는데,우리 안 드 로 이 드 엔지니어 가 실업 을 잘 해 야 돼?!)
    
    rcvArticle.setLayoutManager(new LinearLayoutManager(mAct));//           listview
    //  rcvArticle.setLayoutManager(new GridLayoutManager(mAct, 2));//             grid view
    //  rcvArticle.setLayoutManager(new StaggeredGridLayoutManager(2, OrientationHelper.VERTICAL));//                
    
    


    지식 점
    TextView 는 setText(int resid)방법 이 필요 합 니 다.그러나 여기 int 는 resourceId 를 표시 합 니 다.읽 기 횟수(int 1123)를 이 TextView 에 부여 하려 면 이 방법 을 사용 할 수 없습니다.
    int 를 String 으로 바 꿔 야 돼 요.
    
    int   String      
    int i =8;
    String s =Integer.toString(i);
    String g =String.valueOf(i);
    String h =i+"";
    holder.rcvArticleReadtimes.setText(String.valueOf(article.getReadTimes())); 
    
    토 도 리스트
    Picasso 이미지 캐 시 라 이브 러 리 학습
    4
  • RecyclerView 각 항목 의 구 조 를 실현 합 니 다
  • 부 딪 힌 구덩이
    rcvArticle.setLayoutManager()는 onActivity Created()방법 에서 호출 해 야 합 니 다.onCreate View()에서 호출 하면 빈 포인터 이상 을 던 집 니 다.
    
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
      View view = inflater.inflate(R.layout.fragment_one_latest, container, false);
      mAct = getActivity();
      //  ,   onActivityCreated    
      rcvArticle.setLayoutManager(new LinearLayoutManager(mAct));//           listview
      ButterKnife.inject(this, view);
      return view;
     }
    
    
    java.lang.NullPointerException
    at com.example.administrator.seenews.ui.fragment.common.ArticleFragment.onCreateView(ArticleFragment.java:111)
    이상 은 본문의 전체 내용 이 므 로 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.

    좋은 웹페이지 즐겨찾기