通過CardView和RecyclerView實現橫向卡片式滑動效果
阿新 • • 發佈：2019-02-01
現在來介紹兩種控制元件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.+' 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" 使用過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);到此基本步驟已經完成，執行程式。
以下為執行截圖：
作者：樂觀的Smart