记一次Android完整项目(4) RecyclerView线性布局

1,157 阅读3分钟

RecyclerView

使用的依赖和权限 : 在app/build.gradle中的dependencies闭包添加以下内容:

implementation 'androidx.recyclerview:recyclerview:1.1.0'

RecyclerView 基本用法

修改 activity_main.xml: 由于RecyclerView不是内置在系统SDK中,需要把其完整的包名路径写出来
<LinearLayout 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.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    />
</LinearLayout>

RecyclerView 线性布局

1.在 xml 布局文件中添加
<androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rv_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
2.在 对应的.java 文件中初始化RecyclerView
		/**
         * 1.假设已经知道列表高度,可直接定义列表高度
         * 2.不知道列表高度,需要手动计算RecyclerView高度
         */
        mRvList = fd(R.id.rv_list);
        mRvList.setLayoutManager(new LinearLayoutManager(this));
        mRvList.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));
        mRvList.setNestedScrollingEnabled(false);// 限制每个单独的RecyclerView滑动
        mListAdapter = new MusicListAdapter(this,mRvList,mMusicSourceModel.getHot());
        mRvList.setAdapter(mListAdapter);
补充:.setLayoutManager() 用法

效果一:rv.setLayoutManager(new LinearLayoutManager(this)); 这样设置的效果是组件垂直往下

效果二: 修改LinearLayoutManager(this)里面的参数,第二个参数表示水平布局,第三个参数表示是否反转,就会呈现出另一个效果

rv.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false));

效果三: 在效果二的基础上,我们把第三个参数反转改一下,改为true,看看有什么效果

rv.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL,true));

我们发现item0在最右边了,而且同样可以左右滑动

效果四:表格布局,第一个参数表示上下文,第二个参数表示表格有多少列 .rv.setLayoutManager(new GridLayoutManager(this,3)); 可以上下拖动,表格为3列

效果五:在表格布局中还可以修改参数,使其水平布局,那么那个数字就代表着有几行了,同样最后一个参数表示反转,我这里就不演示了

rv.setLayoutManager(new GridLayoutManager(this,3,GridLayoutManager.HORIZONTAL,false));

图中分为三列,可以左右拖动

3.创建一个新的适配器 Adapter
/**
 * @author iwenLjr
 * Create to 2020/2/20 22:49
 */
public class MusicListAdapter extends RecyclerView.Adapter<MusicListAdapter.ViewHolder> {

    private Context mContext;
    private View mItemView;
    private RecyclerView mRv;
    private boolean isCalcaulationRvHeight;
    private List<MusicModel> mDataSource;
	
    // 给函数一个构造方法
    public MusicListAdapter(Context context, RecyclerView recyclerView,List<MusicModel> dataSource) {
        mContext = context;
        mRv = recyclerView;
        this.mDataSource = dataSource;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // 添加适配器布局
        mItemView = LayoutInflater.from(mContext).inflate(R.layout.item_list_music, parent, false);
        return new ViewHolder(mItemView);
    }
	// 绑定数据
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        setRecyclerViewHeight();

        final MusicModel musicModel = mDataSource.get(position);

        // 展示网络图片
        Glide.with(mContext)
                .load(musicModel.getPoster())
                .into(holder.ivIcon);

        holder.tvName.setText(musicModel.getName());
        holder.tvAuthor.setText(musicModel.getAuthor());

        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(mContext, PlayMusicActivity.class);
                intent.putExtra(PlayMusicActivity.MUSIC_ID,musicModel.getMusicId());
                mContext.startActivity(intent);
            }
        });
    }

    @Override
    public int getItemCount() {
        return mDataSource.size();
    }

    /**
     * 自定义RecyclerView高度
     *
     * 1.获取ItemView高度
     * 2.获取ItemView数量
     * 3.计算高度:使用ItemViewHeight * ItemViewNum
     */
    private void setRecyclerViewHeight() {

        if (isCalcaulationRvHeight || mRv == null) return;

        isCalcaulationRvHeight = true;

        // 获取itemView高度
        RecyclerView.LayoutParams itemViewLp = (RecyclerView.LayoutParams) mItemView.getLayoutParams();

        // 获取ItemView数量
        int itemCount = getItemCount();

        // 计算
        int recyclerViewHeight = itemViewLp.height * itemCount;

        // 设置RecyclerView高度
        LinearLayout.LayoutParams rvLp = (LinearLayout.LayoutParams) mRv.getLayoutParams();
        rvLp.height = recyclerViewHeight;
        mRv.setLayoutParams(rvLp);

    }
	// 先获取ViewHolder
    class ViewHolder extends RecyclerView.ViewHolder {

        View itemView;
        ImageView ivIcon;
        TextView tvName,tvAuthor;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
			// 绑定视图
            this.itemView = itemView;
            ivIcon = itemView.findViewById(R.id.iv_icon_list);
            tvName = itemView.findViewById(R.id.tv_name);
            tvAuthor = itemView.findViewById(R.id.tv_author);
        }
    }
}
4.在 res-layout 下面创建一个布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/item_commit_selector"
    android:orientation="horizontal"
    android:padding="@dimen/marginSize">


    <ImageView
        android:id="@+id/iv_icon_list"
        android:layout_width="@dimen/itemIconSize"
        android:layout_height="@dimen/itemIconSize"
        android:src="@mipmap/img1" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/marginSize"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="音乐名称"
            android:textColor="@color/titleColor"
            android:textSize="@dimen/titleSize"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_author"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="作者"
            android:textColor="@color/infoColorH"
            android:textSize="@dimen/infoSize" />


    </LinearLayout>

    <ImageView
        android:layout_width="@dimen/itemPlaySize"
        android:layout_height="@dimen/itemPlaySize"
        android:src="@mipmap/play"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="@dimen/marginSize"/>

</LinearLayout>