你的位置:首页 > 操作系统

[操作系统]Android RecyclerView 和 CardView简单使用


Android 5.0之后Android新增加的两个UI控件RecyclerView,CardView。

RecyclerView可以看出是ListView的加强版,能够更加灵活的使用、支持动画等

CardView则是Google提供的一个卡片式视图组件,可以定义如边角的弧度、阴影等属性。从本质上看,可以将CardView看做是FrameLayout在自身之上添加了圆角和阴影效果。

要使用这两个UI控件我们需要先在Android Studio 中添加相应的库:

 

之后要有两个布局文件:

 

main_activity.

 1 <LinearLayout  2    3   android:layout_width="match_parent" 4   android:layout_height="match_parent" 5   android:orientation="vertical" 6   android:paddingLeft="@dimen/activity_horizontal_margin" 7   android:paddingRight="@dimen/activity_horizontal_margin" 8   android:paddingTop="@dimen/activity_vertical_margin" 9   android:paddingBottom="@dimen/activity_vertical_margin"10   tools:context=".MainActivity">11 12   <TextView13     android:id="@+id/tvTitle"14     android:layout_width="wrap_content"15     android:layout_height="wrap_content"16     android:layout_gravity="center_horizontal"17     android:textSize="20sp"18     android:text="@string/tvTitle" />19 20   <android.support.v7.widget.RecyclerView21     android:id="@+id/recyclerView"22     android:layout_width="match_parent"23     android:layout_height="wrap_content" />24 25 </LinearLayout>

recyclerview_cardview_item.

 1 <android.support.v7.widget.CardView 2    3    4   android:id="@+id/cardview" 5   android:layout_width="match_parent" 6   android:layout_height="match_parent" 7   android:layout_margin="6dp" 8   android:padding="6dp" 9   card_view:cardBackgroundColor="#ffdddddd"10   card_view:cardCornerRadius="28dp"11   card_view:cardElevation="6dp">12 13   <LinearLayout 14     android:layout_width="match_parent"15     android:layout_height="match_parent"16     android:orientation="vertical">17 18     <ImageView19       android:id="@+id/ivImage"20       android:layout_width="120dp"21       android:layout_height="160dp"22       android:layout_marginLeft="16dp" />23 24     <LinearLayout25       android:layout_width="wrap_content"26       android:layout_height="wrap_content"27       android:orientation="horizontal">28 29       <TextView30         android:id="@+id/tvId"31         android:layout_width="wrap_content"32         android:layout_height="wrap_content"33         android:layout_marginBottom="12dp"34         android:layout_marginLeft="20dp" />35 36       <TextView37         android:id="@+id/tvName"38         android:layout_width="wrap_content"39         android:layout_height="wrap_content"40         android:layout_marginBottom="12dp"41         android:layout_marginLeft="24dp" />42     </LinearLayout>43 44   </LinearLayout>45 </android.support.v7.widget.CardView>

然后再在MainActivity中

 1 package idv.ron.recyclercardviewdemo; 2  3 import android.content.Context; 4 import android.os.Bundle; 5 import android.support.v7.app.AppCompatActivity; 6 import android.support.v7.widget.RecyclerView; 7 import android.support.v7.widget.StaggeredGridLayoutManager; 8 import android.view.LayoutInflater; 9 import android.view.View; 10 import android.view.ViewGroup; 11 import android.widget.ImageView; 12 import android.widget.TextView; 13 import android.widget.Toast; 14  15 import java.util.ArrayList; 16 import java.util.List; 17  18 public class MainActivity extends AppCompatActivity { 19   @Override 20   protected void onCreate(Bundle savedInstanceState) { 21     super.onCreate(savedInstanceState); 22     setContentView(R.layout.main_activity); 23     RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView); 24     recyclerView.setLayoutManager( 25         new StaggeredGridLayoutManager( 26             2, StaggeredGridLayoutManager.HORIZONTAL)); 27     List<Member> memberList = new ArrayList<>(); 28     memberList.add(new Member(92, R.drawable.p05, "James")); 29     memberList.add(new Member(103, R.drawable.p06, "David")); 30     memberList.add(new Member(234, R.drawable.p09, "Jerry")); 31     memberList.add(new Member(35, R.drawable.p10, "Maggie")); 32     memberList.add(new Member(23, R.drawable.p01, "John")); 33     memberList.add(new Member(75, R.drawable.p02, "Jack")); 34     memberList.add(new Member(65, R.drawable.p03, "Mark")); 35     memberList.add(new Member(12, R.drawable.p04, "Ben")); 36     memberList.add(new Member(45, R.drawable.p07, "Ken")); 37     memberList.add(new Member(78, R.drawable.p08, "Ron")); 38     memberList.add(new Member(57, R.drawable.p11, "Sue")); 39     memberList.add(new Member(61, R.drawable.p12, "Cathy")); 40     recyclerView.setAdapter(new MemberAdapter(this, memberList)); 41   } 42  43   private class MemberAdapter extends 44       RecyclerView.Adapter<MemberAdapter.ViewHolder> { 45     private Context context; 46     private LayoutInflater layoutInflater; 47     private List<Member> memberList; 48  49     public MemberAdapter(Context context, List<Member> memberList) { 50       this.context = context; 51       layoutInflater = LayoutInflater.from(context); 52       this.memberList = memberList; 53     } 54  55     public class ViewHolder extends RecyclerView.ViewHolder { 56       ImageView ivImage; 57       TextView tvId, tvName; 58       View itemView; 59  60       public ViewHolder(View itemView) { 61         super(itemView); 62         this.itemView = itemView; 63         ivImage = (ImageView) itemView.findViewById(R.id.ivImage); 64         tvId = (TextView) itemView.findViewById(R.id.tvId); 65         tvName = (TextView) itemView.findViewById(R.id.tvName); 66       } 67     } 68  69     @Override 70     public int getItemCount() { 71       return memberList.size(); 72     } 73  74     @Override 75     public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) { 76       View itemView = layoutInflater.inflate( 77           R.layout.recyclerview_cardview_item, viewGroup, false); 78       return new ViewHolder(itemView); 79     } 80  81     @Override 82     public void onBindViewHolder(ViewHolder viewHolder, final int position) { 83       final Member member = memberList.get(position); 84       viewHolder.ivImage.setImageResource(member.getImage()); 85       viewHolder.tvId.setText(String.valueOf(member.getId())); 86       viewHolder.tvName.setText(member.getName()); 87       viewHolder.itemView.setOnClickListener(new View.OnClickListener() { 88         @Override 89         public void onClick(View v) { 90           ImageView imageView = new ImageView(context); 91           imageView.setImageResource(member.getImage()); 92           Toast toast = new Toast(context); 93           toast.setView(imageView); 94           toast.setDuration(Toast.LENGTH_SHORT); 95           toast.show(); 96         } 97       }); 98     } 99   }100 }

下面是效果图: