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可用于兼容5.0以下系统):
<?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); } } }