Material卡片式布局+下拉刷新+完整代码
一、Material卡片式布局
1》添加库依赖
compile 'com.android.support:recyclerview-v7:24.2.1' compile 'com.android.support:cardview-v7:24.2.1' compile 'com.github.bumptech.glide:glide:3.7.0'
2》在Activity_mian.xml中
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/draw_lay" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" > ...... <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> ....... </android.support.design.widget.CoordinatorLayout> ...... </android.support.v4.widget.DrawerLayout>
3》建立一个实体类
package com.example.myapplication; /** * Created by 海绵宝宝 on 2019/3/30. */ public class Fruit { private String name; private int imageId; public Fruit(String name,int imageId){ this.name=name; this.imageId=imageId; } public String getName() { return name; } public int getImageId() { return imageId; } }
4》为RecycleView提供一个布局，在layout下建立一个fruit_item.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" app:cardCornerRadius="4dp"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/fruitIma" android:layout_width="match_parent" android:layout_height="100dp" android:scaleType="centerCrop"/><!--scaleType设置图片按照比例填满Imageview--> <TextView android:id="@+id/fruitName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margin="5dp" android:textSize="16sp"/> </LinearLayout> </android.support.v7.widget.CardView>
5》为RecycleView建立一个适配器
package com.example.myapplication; import android.content.Context; import android.support.v7.widget.CardView; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.TextureView; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import com.bumptech.glide.Glide; import java.util.List; /** * Created by 海绵宝宝 on 2019/3/30. */ public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> { private Context mContext; private List<Fruit> mFruitList; static class ViewHolder extends RecyclerView.ViewHolder{ CardView cardView; ImageView fruitImage; TextView fruitName; public ViewHolder(View itemView) { super(itemView); cardView=(CardView) itemView; fruitImage=(ImageView)itemView.findViewById(R.id.fruitIma); fruitName=(TextView)itemView.findViewById(R.id.fruitName); } } public FruitAdapter(List<Fruit>fruitList){ mFruitList=fruitList; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { if(mContext==null){ mContext=parent.getContext(); } View view= LayoutInflater.from(mContext).inflate(R.layout.fruit_item,parent,false); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder holder, int position) { Fruit fruit=mFruitList.get(position); holder.fruitName.setText(fruit.getName()); Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage); } @Override public int getItemCount(){ return mFruitList.size(); } }
6》修改mainActivity.java
package com.example.myapplication; import android.support.annotation.NonNull; import android.support.design.widget.NavigationView; import android.support.design.widget.Snackbar; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.GridLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Toast; import android.support.design.widget.FloatingActionButton; import java.util.ArrayList; import java.util.List; import java.util.Random; public class MainActivity extends AppCompatActivity { private DrawerLayout mDrawer; private Fruit[] fruits={ new Fruit("水果1",R.drawable.a1),new Fruit("水果2",R.drawable.a2), new Fruit("水果3",R.drawable.a3),new Fruit("水果4",R.drawable.a4), new Fruit("水果5",R.drawable.a5),new Fruit("水果6",R.drawable.a6), new Fruit("水果7",R.drawable.a7),new Fruit("水果8",R.drawable.a8), new Fruit("水果9",R.drawable.a9),new Fruit("水果10",R.drawable.a10), new Fruit("水果11",R.drawable.a11),new Fruit("水果12",R.drawable.a12), new Fruit("水果13",R.drawable.a13),new Fruit("水果14",R.drawable.a14), new Fruit("水果15",R.drawable.a15),new Fruit("水果16",R.drawable.a16) }; private List<Fruit>fruitList=new ArrayList<>(); private FruitAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); .......//图片显示 ininFruits(); RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recycler_view); GridLayoutManager layoutManager=new GridLayoutManager(this,2); recyclerView.setLayoutManager(layoutManager); adapter=new FruitAdapter(fruitList); recyclerView.setAdapter(adapter); } ......private void ininFruits(){ fruitList.clear(); for(int i=0;i<50;i++){ Random random=new Random(); int index=random.nextInt(fruits.length); fruitList.add(fruits[index]); } } }
7》这样写完后RecycleView会挡住ToolBar，这是使用APPBarLayout
在activity_main.xml中
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_scrollFlags="scroll|enterAlways|snap" /><!--scroll向上动时隐藏|enterAlways向下滑动时一起|snap在隐藏一部分是自动选择隐藏或者显示--> </android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <!--防止RecycleView挡住ToolBar-->
8》结果如下
二、下拉刷新
SwipeRefreshLayout是用于下拉刷新的核心类，将支持下拉刷新的控件放入其中就可以让这个控件实现下拉刷新，下面我们让RecycleView实现下拉刷新
在xml文件中用SwipeRefreshLayout包裹RecycleView
<android.support.v4.widget.SwipeRefreshLayout android:id="@+id/refresh" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <!--防止RecycleView挡住ToolBar--> </android.support.v4.widget.SwipeRefreshLayout>
在MainActivity.java中
private SwipeRefreshLayout swipeRefreshLayout;
......
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ....... //下拉刷新 swipeRefreshLayout=(SwipeRefreshLayout)findViewById(R.id.refresh);//得到控件 swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);//设置颜色 swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener(){//设置下拉监听器 @Override public void onRefresh() { refreshFruit(); } }); } private void refreshFruit(){ new Thread(new Runnable() { @Override public void run() { try{ Thread.sleep(2000);//由于本地刷新极快所以将线程暂停两秒 }catch (Exception e) { } runOnUiThread(new Runnable() {//切回到主线程 @Override public void run() { ininFruits(); adapter.notifyDataSetChanged();//通知数据发生变化 swipeRefreshLayout.setRefreshing(false);//刷新结束 } }); } }).start(); }
三、完整代码
从ToolBar（导航条）到DrawerLayout（滑动菜单）到Navigation（更优化的滑动菜单）FloatingActionButton（浮动按钮）到CardView（卡片式布局）到SwipRefershLayout（下拉刷新）
百度云连接：https://pan.baidu.com/s/17TrLqgdZ1uzhht2hT9_vSw
密码：j9zq
