Android之Material Design之可重新整理的滑動列表（RecyclerView）
阿新 • • 發佈：2019-02-11
Material Design控制元件的簡單介紹：
- Toolbar — 加強版ActionBar，用setSupportActionBar()方法將Toolbar例項傳入 （app:showAsAction-用來指定按鈕的顯示位置）。
- DrawerLayout — 用於滑動選單。
- FloatingActionButton — 懸浮按鈕。
- Snackbar — 可互動式提示。
- CoordinatorLayout — 加強版FramLayout，可監聽其所有子控制元件的事件，然後自動幫我們做出合理的響應，用於Toolbar。
- AppBarLayout — 一個垂直方向的LinearLayout，內部做了滾動事件的封裝。必須是CoordinatorLayout的子佈局。
- CollapsingToolbarLayout — 用於可摺疊式標題欄，只能作為AppBarLayout的直接子佈局來使用。
- NestedScrollView — ScrollView加強版-允許使用滾動方式檢視螢幕以外的資料，NestedScrollView增加了巢狀響應滾動事件功能。
- CardView — 可和RecyclerView配合實現卡片式佈局。
- SwipeRefreshLayout — 用於下拉重新整理。
~其中有一個名為Demo的bean類就不貼出來了，都是set/get函式~
主佈局檔案activity_list.xml（xmlns:app可用於相容
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.cuanbo.cb_iot.View.Presentation.MeetingListActivity" android:id="@+id/parentLayout"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height" android:background="@drawable/background_toolbar" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay" > <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="@drawable/background_toolbar" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:toolbarId="@+id/toolbar" > <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" app:layout_collapseMode="parallax" android:fitsSystemWindows="true"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@drawable/background_toolbar" app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_list" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/fab_margin" app:backgroundTint="@color/colorAccent" app:layout_anchor="@id/app_bar" app:layout_anchorGravity="bottom|end" app:srcCompat="@mipmap/ic_add_white_18dp" android:elevation="8dp"/> </android.support.design.widget.CoordinatorLayout>
Toolbar下內容佈局檔案content_list.xml:
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/swiperefresh" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.cuanbo.cb_iot.View.Presentation.MeetingListActivity" tools:showIn="@layout/activity_meeting_list"> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" > <android.support.v7.widget.RecyclerView android:id="@+id/recycler" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v7.widget.RecyclerView> </android.support.v4.widget.NestedScrollView> </android.support.v4.widget.SwipeRefreshLayout>
用於RecyclerView的CardView佈局檔案item_list.xml:
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_marginTop="20dp" android:layout_marginRight="30dp" android:layout_marginLeft="30dp" app:cardCornerRadius="6dp" app:cardElevation="8dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/text_bookName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:gravity="center" android:text="書名" android:textSize="20sp" android:textStyle="bold" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:id="@+id/text_author" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_weight="1" android:text="作者" android:textSize="16sp" /> <TextView android:id="@+id/text_press" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginTop="8dp" android:layout_weight="1" android:text="出版社" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:id="@+id/text_type" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_weight="1" android:text="題材" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/btn_buy" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@color/FullTransparent" android:text="購買" android:textColor="@color/mainColor" android:textSize="17sp" /> <Button android:id="@+id/btn_collect" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@color/FullTransparent" android:text="新增收藏" android:textColor="@color/mainColor" android:textSize="17sp" /> <Button android:id="@+id/btn_try" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@color/FullTransparent" android:text="試讀" android:textColor="@color/mainColor" android:textSize="17sp" /> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView>
程式碼檔案MainActivity:
public class MainActivity extends AppCompatActivity { private MyAdapter adapter; private SwipeRefreshLayout swipeRefreshLayout; private List<Demo> demoList = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_list); //獲取Toolbar佈局 Toolbar toolbar = findViewById(R.id.toolbar); //方法將Toolbar例項傳入 setSupportActionBar(toolbar); //新增系統返回按鈕在toolbar ActionBar actionBar = getSupportActionBar(); if (actionBar != null) { actionBar.setDisplayHomeAsUpEnabled(true); } initFloatBtn(); initData(); initRecyclerView(); initSwipeRefreshLayout(); }
private void initFloatBtn() { //懸浮按鈕 FloatingActionButton fab = findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // 懸浮按鈕點選事件 } });}
private void initData() { demoList.clear(); //讀取本地資料庫litePal資料庫 List<Demo> demos = DataSupport.findAll(Demo.class);demoList.addAll(demos); }
private void initRecyclerView(){ RecyclerView recyclerView = findViewById(R.id.recycler); GridLayoutManager layoutManager = new GridLayoutManager(this,1); recyclerView.setLayoutManager(layoutManager); adapter = new MeetingAdapter(demoList); recyclerView.setAdapter(adapter); recyclerView.setNestedScrollingEnabled(false);//解決滑動列表卡頓問題}
private void initSwipeRefreshLayout(){ swipeRefreshLayout = findViewById(R.id.swiperefresh); swipeRefreshLayout.setSize(SwipeRefreshLayout.LARGE); //設定下拉重新整理進度條的顏色 swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary); swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { //進行重新整理資料操作initData(); adapter.notifyDataSetChanged(); swipeRefreshLayout.setRefreshing(false); } }); }
程式碼檔案MyAdapter:
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { private Context context; private List<Demo> demoList; //利用結構函式傳入資料 public MyAdapter(List<Demo> demoList) { this.demoList = demoList; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { //獲取context if (context == null) { context = parent.getContext(); } //繫結RecyclerView的子佈局即item_list.xml View view = LayoutInflater.from(context).inflate(R.layout.item_list,parent,false); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder holder, final int position) { //根據position獲取相應的資料 final Demo demo = demoList.get(position); //給RecyclerView子佈局中的控制元件設定相應的資料 holder.textBookName.setText(demo.getBookName()); holder.textAuthor.setText(demo.getAuthor()); holder.textPress.setText(demo.getPress());holder.textType.setText(demo.getType()); //購買按鈕點選事件 holder.btnBuy.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); //收藏按鈕點選事件 holder.btnCollect.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); //試讀按鈕點選事件 holder.btnTry.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); } @Override public int getItemCount() { return meetingList.size(); } static class ViewHolder extends RecyclerView.ViewHolder { CardView cardView; TextView textBookName; TextView textAuthor; TextView textPress; TextView textType; Button btnBuy; Button btnCollect; Button btnTry; ViewHolder(View itemView) { super(itemView); cardView = (CardView) itemView; textBookName = itemView.findViewById(R.id.text_bookName); textAuthor = itemView.findViewById(R.id.text_author); textPress = itemView.findViewById(R.id.text_press); textType = itemView.findViewById(R.id.text_type); btnBuy = itemView.findViewById(R.id.btn_buy); btnCollect = itemView.findViewById(R.id.btn_collect); btnTry = itemView.findViewById(R.id.btn_try); } } }