RecyclerView+CardView實現橫向卡片式滑動效果

2019-10-21 21:27:05

字體：大中小

來源：轉載

供稿：網友

現在來介紹兩種控件RecyclerView和CardView，并通過實例將它們結合在一起實現一種橫向卡片式滑動效果.

1.RecyclerView

RecyvlerView是android SDK 新增加的一種控件，也被官方推薦代替ListView來使用，因為其具有更好的靈活性和代替性。

2.CardView

CardView是安卓5.0推出的一種卡片式控件，內部封裝了許多有用的方法來實現美觀效果。

3.如何使用RecylerView和CardView在android studio中

在build.gradle中添加依賴再編輯即可

compile 'com.android.support:recyclerview-v7:25.+'compile 'com.android.support:cardview-v7:25

4.通過實例，使用兩種控件實現橫向卡片式滑動效果

建立main.xml布局文件，代碼如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"       android:orientation="vertical"       android:layout_width="match_parent"       android:layout_height="match_parent"       xmlns:app="http://schemas.android.com/apk/res-auto">  <android.support.v7.widget.RecyclerView    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/recycler_View"    >  </android.support.v7.widget.RecyclerView></LinearLayout>

使用過ListView的同學應該知道還需要一個子布局來填充RecyclerView
以下為recyclerView_item.xml的代碼：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"                  xmlns:app="http://schemas.android.com/apk/res-auto"       android:orientation="vertical"       android:layout_width="match_parent"       android:layout_height="match_parent"       android:id="@+id/recyclerview_item"       android:padding="30dp"  >  <android.support.v7.widget.CardView    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    app:contentPadding="50dp"    app:cardCornerRadius="20dp"    android:clickable="true"    android:foreground="?android:attr/selectableItemBackground"    app:cardElevation="@dimen/cardview_compat_inset_shadow"    app:cardBackgroundColor="@color/cardview_light_background">    <LinearLayout      android:layout_width="match_parent"      android:layout_height="wrap_content">      <TextView        android:id="@+id/tv1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:text="作者"        android:textSize="22dp"/>    </LinearLayout>    <LinearLayout      android:layout_width="match_parent"      android:layout_height="114dp"      >      <TextView        android:id="@+id/tv2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:text="        鋤禾日當午，汗滴禾下土"        android:textSize="22dp"/>    </LinearLayout>  </android.support.v7.widget.CardView></LinearLayout>

從代碼中，我們會發現使用了CardView控件以及在控件中添加簡易的兩個TextView

現在來介紹CardView的一些常用屬性，這也是現在卡片效果的關鍵所在

card_view:contentPadding 這個可以給你的內容加上padding屬性
card_view:cardBackgroundColor這個可以改變cardview的背景
card_view:cardCornerRadius這個可以改變cardview圓角的大小
card_view:cardElevation這個比較難解釋，CardView的Z軸陰影，被用來決定陰影的大小以及柔和度，以至于可以逼真的模擬出對于深度效果的描述。說白點可以理解為陰影的大小
andorid:foreground=”?android:attr/selectableItemBackground” 這個可以使CardView被點擊后出現波紋效

通過以上常用屬性可以使CardView出現各種不同的效果

現在回到Activity中來實現RecyclerView

跟ListView的一樣，我們需要寫一個適配器，代碼如下：

public class recyclerViewadapter extends RecyclerView.Adapter {  private List<DataBean> lists;  private Context context;  public recyclerViewadapter(List<DataBean> lists, Context context) {    this.lists = lists;    this.context = context;  }  class myholder extends RecyclerView.ViewHolder{    private TextView tv1,tv2;    public myholder(View itemView) {      super(itemView);      tv1= (TextView) itemView.findViewById(R.id.tv1);      tv2= (TextView) itemView.findViewById(R.id.tv2);    }  }  @Override  public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {    myholder holder =new myholder(LayoutInflater.from(parent.getContext()).inflate(R.layout.recyclerview_item,parent,false));    return holder;  }  @Override  public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {    Log.d("TAG", "onBindViewHolder: "+lists.get(position).getAutor());    ((myholder)holder).tv1.setText(lists.get(position).getAutor());    ((myholder)holder).tv2.setText(lists.get(position).getContent());  }  @Override  public int getItemCount() {    return lists.size();  }}

寫一個類繼承RecyclerView.Adapter，重寫RecyclerView.Adapter的三個重要方法 onBindViewHolder（） getItemCount() 和 OncreateViewHolder()

OncreateViewHolder(): 創建新的View,被LayoutManager所調用OnBindViewHolder():將數據與界面進行綁定getItemCount() :返回數據的數量

在Activity中，代碼如下：

public class Frament1 extends android.support.v4.app.Fragment{  private Toolbar toolbar1;  private RecyclerView recycler_view;  private TextView tv1,tv2;  private View view;  private List<DataBean> lists;  @Override  public void onAttach(Context context) {    super.onAttach(context);  }  @Nullable  @Override  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {    setHasOptionsMenu(true);     view = inflater.inflate(R.layout.fragment1, container, false);    initView();    initData();    LinearLayoutManager m=new LinearLayoutManager(getContext());    m.setOrientation(LinearLayoutManager.HORIZONTAL);    recycler_view.setLayoutManager(m);    recyclerViewadapter adapter=new recyclerViewadapter(lists,getContext());    recycler_view.setAdapter(adapter);    return view;  }  @Override  public void onResume() {    super.onResume();  }  private void initData() {    lists=new ArrayList<>();    lists.add(new DataBean("Smart","青青原上草，一歲一枯榮"));    lists.add(new DataBean("Smart","青青原上草，一歲一枯榮"));    lists.add(new DataBean("Smart","青青原上草，一歲一枯榮"));    lists.add(new DataBean("Smart","青青原上草，一歲一枯榮"));    lists.add(new DataBean("Smart","青青原上草，一歲一枯榮"));    lists.add(new DataBean("Smart","青青原上草，一歲一枯榮"));  }  private void initView() {    recycler_view= (RecyclerView) view.findViewById(R.id.recycler_View);    tv1= (TextView) view.findViewById(R.id.tv1);    tv2= (TextView) view.findViewById(R.id.tv2);  }}

在代碼中，我們獲取LayoutManager對象,設置其方向為水平方向，并設置RecyclerView的LayoutManager

然后實例化adapter對象，傳入上下文和假數據lists，并設置RecyclerView.adapater

 LinearLayoutManager m=new LinearLayoutManager(getContext());    m.setOrientation(LinearLayoutManager.HORIZONTAL);    recycler_view.setLayoutManager(m);    recyclerViewadapter adapter=new recyclerViewadapter(lists,getContext());    recycler_view.setAdapter(adapter);

到此基本步驟已經完成，運行程序。

以下為運行截圖

RecyclerView,CardView,橫向,卡片式滑動