RecyclerView+CardView實(shí)現(xiàn)橫向卡片式滑動(dòng)效果

發(fā)布時(shí)間：2020-08-20 17:26:29 來(lái)源：腳本之家閱讀：1134 作者：qq_21276791 欄目：移動(dòng)開(kāi)發(fā)

現(xiàn)在來(lái)介紹兩種控件RecyclerView和CardView，并通過(guò)實(shí)例將它們結(jié)合在一起實(shí)現(xiàn)一種橫向卡片式滑動(dòng)效果.

1.RecyclerView

RecyvlerView是android SDK 新增加的一種控件，也被官方推薦代替ListView來(lái)使用，因?yàn)槠渚哂懈玫撵`活性和代替性。

2.CardView

CardView是安卓5.0推出的一種卡片式控件，內(nèi)部封裝了許多有用的方法來(lái)實(shí)現(xiàn)美觀效果。

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

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

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

4.通過(guò)實(shí)例，使用兩種控件實(shí)現(xiàn)橫向卡片式滑動(dòng)效果

建立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>

使用過(guò)ListView的同學(xué)應(yīng)該知道還需要一個(gè)子布局來(lái)填充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="
    鋤禾日當(dāng)午，汗滴禾下土"

    android:textSize="22dp"/>
  </LinearLayout>
 </android.support.v7.widget.CardView>
</LinearLayout>

從代碼中，我們會(huì)發(fā)現(xiàn)使用了CardView控件以及在控件中添加簡(jiǎn)易的兩個(gè)TextView

現(xiàn)在來(lái)介紹CardView的一些常用屬性，這也是現(xiàn)在卡片效果的關(guān)鍵所在

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

通過(guò)以上常用屬性可以使CardView出現(xiàn)各種不同的效果

現(xiàn)在回到Activity中來(lái)實(shí)現(xiàn)RecyclerView

跟ListView的一樣，我們需要寫(xiě)一個(gè)適配器，代碼如下：

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();
 }
}

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

OncreateViewHolder(): 創(chuàng)建新的View,被LayoutManager所調(diào)用
OnBindViewHolder():將數(shù)據(jù)與界面進(jìn)行綁定
getItemCount() :返回?cái)?shù)據(jù)的數(shù)量

在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對(duì)象,設(shè)置其方向?yàn)樗椒较颍⒃O(shè)置RecyclerView的LayoutManager

然后實(shí)例化adapter對(duì)象，傳入上下文和假數(shù)據(jù)lists，并設(shè)置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);

到此基本步驟已經(jīng)完成，運(yùn)行程序。

以下為運(yùn)行截圖

RecyclerView+CardView實(shí)現(xiàn)橫向卡片式滑動(dòng)效果

更多關(guān)于滑動(dòng)功能的文章，請(qǐng)點(diǎn)擊專題：《Android滑動(dòng)功能》

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

RecyclerView+CardView實(shí)現(xiàn)橫向卡片式滑動(dòng)效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽