Android RecyclerView之瀑布流显示(四)
效果图
垂直显示(标准显示) 垂直反向显示 水平显示 水平反向显示
Android RecyclerView详解(一)
Android RecyclerView之ListView显示(二)
Android RecyclerView之GridView显示(三)
Android RecyclerView之ListView显示
本博文讲述了运用RecyclerView替代ListView
在Android RecyclerView详解(一)中已经介绍过了RecyclerView的基本运用接下来我要使用强大RecyclerView来显示ListView的效果。
1.将RecyclerView添加到布局文件并关联兼容包(注意:低版本的安卓系统,要进行兼容包的关联)
步骤：按住control+alt+shift+s出现Project Structure按下图所示关联
关联成功后在主布局文件activity_main中添加RecyclerView
2.在与主类MainActivity同级下新建一个包名为menu在包中新建一个类为DateBean用于归纳信息
3.新建一个行布局名为list_item，并添加一个ImageView和TextView
在XML中用到了scaleType属性，scaleType属性详解可以点击：点击打开链接
<?
xml version=
“1.0”
encoding=
“utf-8”
?>
<
LinearLayout
xmlns:
android
=
“http://schemas.android.com/apk/res/android”
android
:layout_width=
“wrap_content”
android
:layout_height=
“wrap_content”
android
:orientation=
“vertical”
>
<!–android:scaleType=”fitXY”：把原图按照指定的大小在View中显示，
拉伸显示图片，不保持原比例，填满ImageView.–>
<!–android:adjustViewBounds=”true”：是否保持原图的长宽比–>
<
ImageView
android
:id=
“@+id/item_staggered_icon”
android
:layout_width=
“wrap_content”
android
:layout_height=
“wrap_content”
android
:adjustViewBounds=
“true”
android
:scaleType=
“fitXY”
android
:src=
“@mipmap/ic_launcher”
/>
<
TextView
android
:id=
“@+id/item_staggered_name”
android
:layout_width=
“wrap_content”
android
:layout_height=
“wrap_content”
android
:layout_centerVertical=
“true”
android
:layout_toRightOf=
“@+id/item_list_icon”
android
:text=
“图片描述”
android
:textSize=
“20sp”
android
:textStyle=
“bold”
/>
</
LinearLayout
>
4.在res文件下新建一个包为menu在包中建一个menu布局文件用于显示下拉菜单
如果想了解详细的Menu菜单栏详细使用可以点击：Android Menu菜单栏
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_Staggered" android:orderInCategory="100" android:title="Staggered显示" app:showAsAction="never"> <menu> <item android:id="@+id/action_Staggered_noraml" android:orderInCategory="100" android:title="标准" app:showAsAction="never"/> <item android:id="@+id/action_Staggered_vertical_reverse" android:orderInCategory="100" android:title="垂直反向" app:showAsAction="never"/> <item android:id="@+id/action_Staggered_horizontal" android:orderInCategory="100" android:title="水平" app:showAsAction="never"/> <item android:id="@+id/action_Staggered_horizontal_reverse" android:orderInCategory="100" android:title="水平反向" app:showAsAction="never"/> </menu> </item> </menu>
5.RecyclerView适配器，
RecyclerView适配器的详细介绍可以点击：Android RecyclerView详解(一)
package com.example.recyclerview_staggered.adapter; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import com.example.recyclerview_staggered.R; import com.example.recyclerview_staggered.menu.DateBean; import java.util.List; /** * Date:2017/3/15 * author:陈箫阳ChenXiaoYang * furction: */ public class RecyclerViewStaggeredAdapter extends RecyclerView.Adapter<RecyclerViewStaggeredAdapter.StaggerHolder> { private Context mContext; //泛型是RecyclerView所需的Bean类 private List<DateBean> mDateBeen; //构造方法，一般需要接收两个参数 1.上下文 2.集合对象（包含了我们所需要的数据） public RecyclerViewStaggeredAdapter(Context context, List<DateBean> dateBeen) { mContext = context; mDateBeen = dateBeen; } @Override public RecyclerViewStaggeredAdapter.StaggerHolder onCreateViewHolder(ViewGroup parent, int viewType) { //转换一个ViewHolder对象，决定了item的样式，参数1.上下文 2.XML布局资源 3.null View itemView = View.inflate(mContext, R.layout.staggered_item, null); //创建一个ViewHodler对象 RecyclerViewStaggeredAdapter.StaggerHolder staggerHolder = new RecyclerViewStaggeredAdapter.StaggerHolder(itemView); //把ViewHolder传出去 return staggerHolder; } //当ViewHolder和数据绑定是回调 @Override public void onBindViewHolder(RecyclerViewStaggeredAdapter.StaggerHolder holder, int position) { //从集合里拿对应的item的数据对象 DateBean dateBean = mDateBeen.get(position); //给Holder里面的控件对象设置数据 holder.setData(dateBean); } //决定RecyclerView有多少条item @Override public int getItemCount() { //数据不为null，有几条数据就显示几条数据 if (mDateBeen != null && mDateBeen.size() > 0) { return mDateBeen.size(); } return 0; } //自动帮我们写的ViewHolder，参数：View布局对象 public class StaggerHolder extends RecyclerView.ViewHolder { private final ImageView mImageView; private final TextView mTextView; public StaggerHolder(View itemView) { super(itemView); mImageView = (ImageView) itemView.findViewById(R.id.item_staggered_icon); mTextView = (TextView) itemView.findViewById(R.id.item_staggered_name); } public void setData(DateBean data) { //给imageView设置图片数据 mImageView.setImageResource(data.icon); //给TextView设置文本数据 mTextView.setText(data.name); } } }
6.编写主类
package com.example.recyclerview_staggered; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.StaggeredGridLayoutManager; import android.view.Menu; import android.view.MenuItem; import android.widget.Toast; import com.example.recyclerview_staggered.adapter.RecyclerViewStaggeredAdapter; import com.example.recyclerview_staggered.menu.DateBean; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private RecyclerView mRecyclerVIew; private int[] image = {R.drawable.cxy1, R.drawable.cxy8, R.drawable.cxy7, R.drawable.cxy2, R.drawable.cxy4, R.drawable.cxy5, R.drawable.cxy3, R.drawable.cxy1, R.drawable.cxy6, R.drawable.cxy1, R.drawable.cxy8, R.drawable.cxy7, R.drawable.cxy2, R.drawable.cxy4, R.drawable.cxy5, R.drawable.cxy3, R.drawable.cxy1, R.drawable.cxy6}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化控件 mRecyclerVIew = (RecyclerView) findViewById(R.id.recyclerView); } //RecyclerView实现瀑布流的效果，实际上就是 private void loadStaggeredDate(Boolean inversion, Boolean orientation) { //集合对象 ArrayList<DateBean> dateBeanArrayList = new ArrayList<>(); //给Bean类放数据，把装好数据的Bean类放到集合里 for (int i = 0; i < image.length; i++) { //创建Bean类对象 DateBean dateBean = new DateBean(); //给benu类对象添加图片和信息 dateBean.icon = image[i]; dateBean.name = "RecyclerStaggered" + i; //把Bean类放入集合 dateBeanArrayList.add(dateBean); } //创建适配器adapter对象 参数1.上下文 2.数据加载集合 RecyclerViewStaggeredAdapter recyclerViewStaggeredAdapter = new RecyclerViewStaggeredAdapter(this, dateBeanArrayList); //设置适配器 mRecyclerVIew.setAdapter(recyclerViewStaggeredAdapter); //布局管理器 StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, orientation ? StaggeredGridLayoutManager.VERTICAL : StaggeredGridLayoutManager.HORIZONTAL); staggeredGridLayoutManager.setReverseLayout(inversion); //设置布局管理器 参数GridManager 可以使RecyclerView实现和GridView一样的效果 mRecyclerVIew.setLayoutManager(staggeredGridLayoutManager); } /* *下面的代码和RecycleView没有关系，是菜单，方便RecycleView的展示 */ //加载菜单布局 @Override public boolean onCreateOptionsMenu(Menu menu) { //加载布局使用菜单特有方法，getMenuInflate对象 //参数1.菜单显示的布局 2.固定Menu getMenuInflater().inflate(R.menu.menu_main, menu); return true; } //菜单按钮点击事件处理 @Override public boolean onOptionsItemSelected(MenuItem item) { int itemId = item.getItemId(); if (itemId == R.id.action_Staggered_noraml) { //标准显示（垂直） loadStaggeredDate(false, true); Toast.makeText(MainActivity.this, "成功", Toast.LENGTH_SHORT).show(); return true; }//Staggered垂直反向显示 else if (itemId == R.id.action_Staggered_vertical_reverse) { loadStaggeredDate(true, true); }//Staggered水平显示 else if (itemId == R.id.action_Staggered_horizontal) { loadStaggeredDate(false, false); }//Staggered水平反向 else if (itemId == R.id.action_Staggered_horizontal_reverse) { loadStaggeredDate(true, false); } return super.onOptionsItemSelected(item); } }
