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 demoList.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);
}
}
}