RecyclerView實現多種佈局樣式
阿新 • • 發佈:2019-01-10
1、新增依賴
compile 'com.android.support:recyclerview-v7:25.3.0'
2、佈局
<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
item
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_centerInParent="true"
android:background="@mipmap/ic_launcher"
android:id ="@+id/item_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"/>
<TextView
android:layout_marginTop="10dp"
android:text="標題"
android:id="@+id/item_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/item_iv"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textSize="18sp"/>
</RelativeLayout>
3、程式碼
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private RecyclerView rv;
//圖片陣列
private int[] mListIcons = new int[]{R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round
};
//標題陣列
private String[] mListTitle = new String[]{"標題1","標題2","標題3","標題4","標題5","標題6","標題7","標題8",
"標題9","標題10","標題11","標題12","標題13","標題14","標題15","標題16","標題17","標題18","標題19","標題20"
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rv = (RecyclerView) findViewById(R.id.rv);
initData();
}
private void initData() {
//樣式,boolean代表展示的方向
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
rv.setLayoutManager(linearLayoutManager);
//資料
rv.setAdapter(new RecyclerView.Adapter() {
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = View.inflate(parent.getContext(), R.layout.rv_item, null);
RecyclerView.ViewHolder viewHolder = new RvViewholder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
//進行資料設定
RvViewholder myViewholder = (RvViewholder) holder;
//設定圖片
myViewholder.itemIv.setImageResource(mListIcons[position]);
//設定標題資料
myViewholder.itemTv.setText(mListTitle[position]);
}
@Override
public int getItemCount() {
return mListIcons.length;
}
class RvViewholder extends RecyclerView.ViewHolder {
public ImageView itemIv;
public TextView itemTv;
/**
* 初始化控制元件
*/
public RvViewholder(View itemView) {
super(itemView);
itemIv = (ImageView) itemView.findViewById(R.id.item_iv);
itemTv = (TextView) itemView.findViewById(R.id.item_tv);
}
}
});
}
}
可以通過new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);設定橫向或者縱向列表
效果圖:
4、改變樣式,實現GridView樣式
//建立一個豎橫的listView
//LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
//建立一個豎橫的gridView
GridLayoutManager layoutManager = new GridLayoutManager(this, 3 ,GridLayoutManager.VERTICAL,false);
rv.setLayoutManager(layoutManager);
效果圖:
5、瀑布流樣式
StaggeredGridLayoutManager layout = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
rv.setLayoutManager(layout);